Corsi on-line

Evidenziare i link a file PDF con CSS

Ho trovato un interessante snippet che descrive una comoda soluzione per evidenziare la presenza di file PDF all’interno di un elenco su pagina Web; questo piccolo accorgimento può contribuire a rendere più usabile il proprio sito Internet perché in genere gli utenti non amano clickare sui link per l’apertura di file PDF, soprattutto se molto pesanti, interrompendo la propria navigazione.

Sapendo cosa si cela dietro ad un collegamento l’utente potrà scegliere quale azionde compiere, evitando lunghe sessioni di caricamento se non le desidera; grazie a CSS sarà per esempio possibile aggiungere l’indicazione relativa all’estensione dopo un link che collega ad un PDF:

a[href$=".pdf"]:after { content: " (PDF)"; }

Nello stesso modo sarà possibile indicare anche la dimesnione del file PDF linkato:

a[href$=".pdf"][data-size]:after { content: " (PDF, " attr(data-size) ")"; }

Basterà poi un semplice riferimento nel markup per completare l’opera:

Clicka <a href="file.pdf">qui</a> per scaricare il file PDF

Si ricorda che, indipendentemente dall’estensione di riferimento, è sempre buona norma segnalare all’utente il fatto che un link porterà all’apertura di un documento particolarmente “pesante” in termini di spazio occupato.

Post correlati
I più letti del mese
Tematiche