[pillola] effetti dinamici con contenuto generato e selettori di attributo

[thomas_anderson]

Autore: Gabriele Romanato
Riferimenti: http://www.w3.org/TR/CSS21/selector.html
http://www.w3.org/TR/CSS21/generate.html

Tempo: 5 minuti
Colonna sonora: "You can demand", "Nothing" (PENNYWISE, "Unknown Road")
Time: 14.2.07 20:19
Pagina: sommario di http://mimicry.css-zibaldone.com/

__________________________________________________ ______________________________

Marcatura ipotetica:

<h1 id="title">Test</h1>

Voglio inserire contenuto quando si passa col mouse sul titolo e voglio farlo solo per quel
titolo.

CSS:

h1[id="title"]:hover:after {
content: attr(id);
font-weight: bold;
padding-left: 20px;
}

usando il selettore di attributo 'attr="val"' seleziono l'elemento sulla base del suo attributo, in questo caso ID con valore 'title'. poi applico lo pseudo-elemento :after per inserire il contenuto dopo l'elemento. con la funzione 'attr()' visualizzo il contenuto dell'attributo ID.
si noti che ho usato 'padding' per la distanza, perchè Mozilla, Firebird e FF 0.x 1.0x hanno dei problemi con 'margin'.

per concludere, raccomando di usare SOLO i selettori di attributo delle specifiche ufficiali. i selettori CSS3 non passano la validazione.



ps. coi CSS3 si potrebbe fare:

a[$=".pdf"]::hover::after {
content: attr(href);
font-weight: bold;
padding-left: 10px;
}

che va a pescare l'ultima parte dell'attributo di un url http:.../file.pdf

[thomas_anderson]

errata corrige:

a[href$=".pdf"]::hover::after {
content: attr(href);
font-weight: bold;
padding-left: 10px;
}

mancava href davanti a $. comunque se andate sul validator potete scegliere un opzione
(more) che vi permette di validare secondo le spec. CSS3.

Grazie a Marcello Cerruti

[thomas_anderson]

integrazione:
http://forum.diodati.org/messaggi.asp?f=2&id=8675