Le meraviglie del CSS2.0+
Giovedì 27 Luglio, 2006A causa forse delle incompatibilità stilistiche e di output - ancora presenti - tra i vari browser, non tutti conoscono le innumerevoli potenzialità dei fogli di stile. Vogliamo mostrare, quindi, alcune caratteristiche della sintassi CSS sconosciute ai più e per ricordarci quanto poco - spesso - sfruttiamo a pieno gli strumenti che abbiamo a disposizione.
Nota: tutti gli esempio sono stati provati su Firefox 1.5.0.5
Selezione per attributi
-
div#myInput input[type=submit] {color:#f00}
-
div#myInput input[type=button] {color:#0f0}
-
div#myInput input[value=Annulla] {color:#00f}
Questa caratteristica, spesso indicata cone CSS2 avanzata, permette cose strabiglianti, se ci riflettiamo un attimo. Il maggior vantaggio lo si ottinene lato HTML, dove non sono necessarie classi o id per distinguere i TAG nel CSS. Sono proprio gli attributi - comunque presenti - nel TAG ad indicare quale stile associare. Inoltre qualsiasi attributo del TAG può essere preso come selettore: alt, title, accesskey, ecc...
Selezione per profondità
Questo tipo di selezione è a dir poco spettacolare, se considerate che può essere sommata a quella precedente. Essa permette di definire la gerarchia degli elementi. Guardando l'esempio qui sotto ci si rendo subito conto della straordinaria portata di questo tipo di selezione, che mantiene il codice HTML pulito e senza indicatori superflui.
-
div#myBox> p {color:#f00}
-
div#myBox> p + p {color:#0f0}
-
div#myBox> p:last-child {color:#00f}
Addirittura, giusto per concludere questo sorvolo, oltre a last-child esiste first-child e - fantastico - first-letter! Provate voi.
Abbiamo ovviamente appena sfiorato l'argomento, alquanto vasto a dire il vero, che vede i CSS come strumento evoluto per la definizione del layput di pagine. Esistono altri selettori e comportamenti e grandi novità per le specifiche dei file CSS di futura generazione.
volevo solo essere sicuro che non ci fosse qualche altro...
Lascia un commento