Signifier "bombes PDF" - Astuces CSS

Anonim

Tout ancien lien d'ancrage peut être un lien vers un document PDF, mais cliquer sur un lien comme celui-ci en pensant autrement peut être surprenant et inconfortable pour un utilisateur. Ce CSS peut signifier visuellement ces liens.

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

Alors…


Watch out for the PDF bomb here!

Devient visuellement:

Watch out for the PDF bomb (PDF) here!

Ou…


Watch out for the PDF bomb here!

Devient:

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

Voir le Pen Identify PDF Bombs par Chris Coyier (@chriscoyier) sur CodePen.