Attraverso i moltissimi articoli pubblicati su HTML.it spero di aver fatto passare un messaggio:
per poter usare appieno le potenzialità dei fogli di stile non basta conoscere
proprietà e valori. è indispensabile avere solide basi di HTML e del visual
formatting model, della teoria dei fogli di stile e senza dubbio
un'approfondita conoscenza del supporto dei browser e dei loro bug.
E nonostante
tutte queste conoscenze possano sembrare sufficienti, non sono comunque
abbastanza: ci sono alcune tecniche davvero indispensabili il più delle volte.
In questo appuntamento presenterò una piccola selezione di tecniche di cui
abbiamo parlato in diverse occasioni e a cui ho fatto
riferimento molto spesso nei vari articoli qui sulla sezione CSS di HTML.it.
Questo articolo
sarà per il lettore assiduo e lo sviluppatore esperto una sorta di ripasso,
qualcosa in più per chi si è avvicinato da poco ai CSS e/o alle risorse di
HTML.it. Cominiciamo subito.
La keyword !important
L'uso della keyword !important è a volte indispensabile per sistemare bug o difetti implementativi di Internet Explorer fino alla versione 6, mantenendo piena compatibilità per i browser più recenti e capaci. Molti dei suoi usi sono stati trattati in Box model e workaround sul blog, vedremo qui il suo uso più importante: sistemare l'errata implementazione del box model su IE5 e IE5.5. La seguente renderà il div id="box" con larghezza totale di 200 pixel, larghezza utile al contenuto di 180 px e padding sui quattro lati di 10 pixel:
div#box {
!important; /*IE6, IE7 e gli altri browser*/
width /**/: 200px; /*IE5.x: indispensabile il commento vuoto! */
padding: 10px;
}Molti altri usi della keyword !important si possono trovare in Box model e workaround e in Min-height anche su IE.
È il comportamento atteso dei float, anche se spesso non desiderabile: un contenitore con elementi float al suo interno non è in grado di contenerli e li farà sbordare. Fino a qualche tempo fa c'era la tendenza ad usare un elemento vuoto che dà il clear dopo gli elementi float così da forzarne il loro contenimento.
Ci sono in realtà due tecniche molto semplici ed efficaci che non necessitano di aggiunte nel markup e hanno un'ottima compatibilità: ne abbiamo parlato in Float:
teoria e pratica.
La prima è la Float Nearly Everything: per contenere i float basterà rendere float anche il loro contenitore, avendo cura di specificare una larghezza (anche 100% andrà bene) Ecco il codice:
div#box { float:left; width:100% }In alternativa, si può usare la Simple Clearing of floats che sfrutta la proprietà overflow:
div#box { width:100%; overflow:auto }Float opposti
Altra tecnica indispensabile che figura anch'essa nell'articolo Float:teoria e pratica è quella dei float opposti per realizzare layout robusti e stabili senza l'uso di hack e workaround. In sostanza si tratta di affiancare due elementi float rendendoli entrambi float in direzione opposta. Ecco ad esempio il codice di un semplice layout a due colonne che usa i float opposti:
div#container { width: 760px }
div#menu { float: left;width: 260px }
div#content { float: right; width: 500px }
div#footer { clear: both }Display:inline
Anche se IE7 è già uscito da un po', credo che ci troveremo a dover testare i nostri lavori su IE6 per diverso tempo. Questo browser è senza dubbio il più problematico in quanto a bug. Una breve carrellata di alcuni di essi è stata presentata in Risoluzione dei problemi di CSS.
Uno dei problemi più annosi di cui soffre IE6 sono il doubled margin float in cui il margine concorde con il lato su cui è reso float un elemento viene misteriosamente raddoppiato. Per risolvere c'è una dichiarazione semplice e innocua: dichiarare l'elemento float display:inline. Questa dichiarazione non dovrebbe avere effetto sui browser, dato che elementi float vengono resi di default come elementi block-level, ma ha invece l'effetto di sistemare il bug su IE6.
Ottimizzazione e organizzazione del CSS
Un buon sviluppatore CSS dovrebbe scrivere codice che sia mantenibile, efficiente, semplice e facilmente consultabile. In Ottimizzare i
CSS abbiamo presentato diverse pratiche e consigli per l'ottimizzazione e la buona scrittura dei CSS.
Dei venti e più consigli visti, fondamentale a parer mio sono l'ordinamento delle regole all'interno del foglio di stile e delle proprietà secondo una logica coerente.
Per concludere
Abbiamo rivisto brevemente alcune delle tecniche e consigli utili nello sviluppo con i CSS, ecco i link agli articoli citati:
Si tratta di una selezione senz'altro espandibile: ci sono infatti moltissime altre tecniche la cui conoscenza è fondamentale tra quelle presentate qui sulla sezione CSS di HTML.it. In questo caso, dato la complessità degli argomenti, rimando direttamente agli articoli originali.
- Fast CSS rollover, presentato in Menu grafici con rollover e preload via CSS e Grafica per blog con i CSS
- False colonne, presentato in Estendere le false colonne
- Margini negativi presentati in Margini negativi, layout con i margini negativi e in Layout Gala
- Image replacement in Le 3 tecniche migliori
Buona lettura, alla prossima!
