[webaccessibile] La potenza nascosta dei css

Next Design | Luca Mascaro ::. info a next-design.net
Dom 24 Ott 2004 18:05:43 CEST


Vi avviso in anteprima che questa è una mia polemica personale con il w3,
infatti nella definizione dei css il w3c non si è reso conto (o a ignorato)
un elemento potenzialmente risolutore nello sviluppo con i css.

Infatti il w3c nel suo attributo "content" nei css 2 ha previsto la funzione
"attr(attributo-html)" che ci permette di scrivere nel contenuto il valore
di un attributo del tag xhtml puntato.

http://www.w3.org/TR/REC-CSS2/generate.html#propdef-content

Quello che il w3 non si è reso conto è che proprio questa funzione se fosse
stata prevista in qualunque attributo ci avrebbe permesso di fare ciò che
oggi possiamo fare solo con una forte ridondanza di codice o con javascript.

Prendiamo un esempio molto semplice, il rollover sulle immagini ed
immaginiamo che abbiamo due immagini "spente" che si chiamano "img1.png" e
"img2.png" e due accese che si chiamano "img1_on.png" e "img2_on.png". Ora
pensiamo di avere una pagina html con 2 link di classe "rollover" con id
settato a "img1" e "img2".

Ora se noi volessimo fare il rollover con javascript implementeremmo una
funzione che probabilmente si aggancerà a quei due elementi e sfrutterà il
this.id per recuperare l'id, e ottenere la stringa per poter richiamare
l'immagine corretta come sfondo in base allo status (link o hover).

Ora la stessa cosa per farla con i css la dobbiamo implementare così
(implemento per comodità solo 1 puntatore spento, ma il codice è duplicato
per ogni id)

	#img1:link, #img1:visited{ background: url(img1.png); }
	#img1:hover, #img1:active{ background: url(img1_on.png); }

Quindi spesso in questo caso per avere un codice più leggero e aggiornabile
lo sviluppatore propende per adottare javascript. 

Ma immaginiamo di avere a disposizione la funzione attr() in qualunque
elemento. Il nostro codice per tutti i link con rollover sarà questo:

	.rollover:link, .rollover:visited{ background: url(attr(id).png); }
	.rollover:hover, .rollover:active{ background: url(attr(id)_on.png);
}

Pensate un po cosa si potrebbe fare? ;)

Ps: livio non pensare neanche lontanamente che io possa in js implementare
questa cosa, perché non ho tempo :)





Maggiori informazioni sulla lista webaccessibile