Посочете "PDF бомби" - CSS-трикове

Anonim

Всяка стара коренна връзка може да бъде връзка към PDF документ, но щракването върху такава връзка, мисленето в противен случай, може да бъде изненадващо и неудобно за потребителя. Този CSS може визуално да означава тези връзки.

/* Add " (PDF)" text after links that go to PDFs */ a(href$=".pdf"):after ( content: " (PDF)"; ) /* If file size specified as data attribute, use that too */ a(href$=".pdf")(data-size):after ( content: " (PDF, " attr(data-size) ")"; )

Така…


Watch out for the PDF bomb here!

Визуално става:

Watch out for the PDF bomb (PDF) here!

Или…


Watch out for the PDF bomb here!

Става:

Watch out for the PDF bomb (PDF, 2 MB) here!

Вижте писалката за идентифициране на PDF бомби от Chris Coyier (@chriscoyier) на CodePen.