Icone e css per i doc
Uno strumento importante oggi: un css abbinato a icone dei programmi più usati per visualizzare o scaricare allegati, da word a excel, etc attraverso il quale si attribuisce in modo automatico a link che presentano certe caratteristiche, le icone citate.
Esempio:
Vogliamo che di fianco ad ogni link dei file pdf compaia l’iconcina relativa?
Ecco come si fa:
a[href$='.pdf'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_pdf.gif) no-repeat center right;
}
come vedete si fa ricorso ad uso avanzato di definizioni di tags. In questo caso stiamo dicendo al css che ogni link che abbia come href un qualsiasi testo contenente .pdf deve avere quelle caratteristiche (l’iconcina relativa come background).
Carino vero? E soprattutto utile perchè già impostato per le maggiori applicazioni del web.
Unica pecca: non funziona su ie6 (ovviamente :S)
Ecco il link dove scaricare css e icone: Iconize textlinks with css
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
5 Commenti
scusa ma questi non sono css 3 ?
cmq ne ho scoperto una pseudo classe (sempre css3) che mi pare utile :target
)
in pratica serve per applicare uno stile all’elemento cui il link si riferisce (non riesco a spiegarlo meglio
cmq ecco un esempio
http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/tng/css3-modsel-21.html
e referenze w3c
http://www.w3.org/TR/css3-selectors/#target-pseudo
Ciao Patrick.
Chiariamo.
Innanzitutto sono css2, perlomeno nella guida di Gianluca Troiani sono evidenziati i selettori di attributi nella forma seguente:
tag[attributo]
tag[attributo=valore]
tag[attributo~=valore]
tag[attributo|=valore]
l’ultimo, che ho citato nell’esempio dell’articolo e che viene usato per qualche css, forse si riferisce al css3.
Il :target non mi pare molto utile in questo caso, visto che si usa per i link che hanno questa forma: http://www.lauryn.it/index.php#3
In ogni caso che siano css2 o 3 vengono ben supportati da tutti i browser tranne explorer 6, come dicevo (che a malapena supporta i css1) quindi datemi un motivo per non usarli
E brava Laura!
Hai rispolverato un metodo di utilizzare i CSS che mi stava passando di mente! I selettori di attributo sono utili, anche se per adesso non ne ho visto un grande utilizzo, ma riescono a far risparmiare molto codice, ad esempio per diversificare i link che puntano fuori dal nostro sito da quelli interni.
Permettono di risparmiare molto codice, sopratutto xHTML, quindi alleggeriscono in peso delle nostre pagine!
Torno a ripassarmi questi selettori, che non fa mai male agiornarsi!
Laura, non sapevo che erano css2
cmq ritengo che sia molto utile la pseudo classe :target, anche per un fatto di accessibilità in modo da far trovare subito la parte di pagina a cui un link si riferisce (per esempio nelle pagine grandi come possono essere quelle di un manuale)
mi sa che sono pure css1 eeheh
concordo per la pseudo classe :target, ma non si tratta del nostro caso di oggi