Betegne "PDF-bomber" - CSS-triks

Anonim

Enhver olankerlenke kan være en lenke til et PDF-dokument, men å klikke på en slik lenke tenker ellers kan være overraskende og ubehagelig for en bruker. Denne CSS kan visuelt betegne disse koblingene.

/* 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) ")"; )

Så…


Watch out for the PDF bomb here!

Visuelt blir:

Watch out for the PDF bomb (PDF) here!

Eller…


Watch out for the PDF bomb here!

Blir:

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

Se pennen Identifiser PDF-bomber av Chris Coyier (@chriscoyier) på CodePen.