10 + 1 trucchi riguardanti i CSS che non puoi non conoscere
Lunedì, Ottobre 8th, 2007- La scorciatoia font
Capita spesso di imbattersi in cose del genere:font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif;Tale spreco può essere risolto facilmente usando la shortcut font:font: 1em/1.5em bold italic small-caps verdana,serifL’importante è ricordare di specificare sempre font-size e font-family. - Due classi insieme
A differenza della maggior parte degli attributi che possono avere un solo valore, l’attributo class può avere due o più valori, purchè separati da spazio:<span class="test1 test2">text</span> - Il valore di default di border
Il modo ritenuto più veloce per dare un bordo ad un elemento è questo:border:2px solid #000;In realtà l’unico valore veramente richiesto è border-style; ciò vuol dire che se non vogliamo cambiare border-width e border-color possiamo semplicemente scrivere qualcosa del genere:border:solid; - Gli hack per IE
Gli hack permettono di eseguire del codice css solo su IE. Visto che l’argomento è di ampia trattazione vi rimando a questa guida. - Image replacement
Inserire un logo nel nostro sito è molto importante per dargli un tocco di personalità; il lato negativo del logo è, che essndo costituito da un’immagine, viene completamente ignorato dai motori di ricerca. La tecnica dell’image replacement risolve il problema: basta inserire un titolo h1 e assegnargli tale regola:h1 { position:absolute; left:-2000px; }In questo modo si avrà anche un valido sostituito nei browser testuali. - Box model hack
Immaginiamo di avere tali regole assegnate a un div con id test:#test { width:100px; border:5px; padding:20px; }In teoria il box dovrebbe essere lungo 150 px, bordi e spaziatura compresi. Purtroppo con IE5 e IE5.5 i bordi e il padding vengono inseriti all’interno del box, costringendoci perciò a usare il solito hack:#test { width:100px; \width:150px; w\idth:100px; }La prima regola è per tutti quei browser che pur aderenti agli standard non supportano lo slash come carattere di escape. La seconda regola funziona in tutti i browser che supportano i caratteri di escape, compreso IE5. La terza regola infine funziona con Firefox, Opera, IE6 e superiori ma non con IE5. - Allineare un box al centro orizzontalmente
Tentati di usare il solito tag center? Conoscendo questa tecnica non ne avrete più bisogno:width:200px; margin:0 auto;Per IE5 è necessario utilizzare a nostro vantaggio il bug del text-align, il quale posiziona indiscriminatamente element inline e block:body { text.align:center; } - Allineare un box al centro verticalmente
Allineare un box con le tabelle era veramente semplice: bastava usare vertical-align. Peccato che tale tecnica non funzioni con i box… Esiste comunque una soluzione alternativa, ovvero di dare un valore al line-height uguale a quello dell’altezza del box:height:200px; line-height:200px;Ricordiamoci però che con questa tecnica potremo inserire solo testo e per di più al massimo una riga. - Posizionare elementi dentro un box con posizione relativa
Una tecnica molto efficace per meglio posizionare dei blocchi in maniera assoluta è di inserirli dentro un blocco con posizione relativa:<div id="container"><div id="box_absolute"></div>In questo modo i blocchi verranno posizionati non rispetto all’angolo superiore della pagina bensì rispetto all’elemento in cui sono contenuti.#container { position:relative; } #box_absolute { position:absolute; top:2px; left:5px; } - Le fake coloumns
Capita spesso di avere due div affiancati, uno per il contenuto e l’altro per il menù. Supponiamo di voler colorare il div dei menù di verde e quello del contenuto in bianco. Certamente i due box avranno un’altezza diversa, e nessuna regola ci permetterà di risolvere tale problema ( se non usando javascript… ). In parole povere la colonna dei menù, essendo meno lunga, si spezzerà molto prima rispetto a quella del contenuto, creando così una sensazione di discontinuità grafica. L’unica soluzione è creare un’immmagine da dare come background a un div che contiene entrambi i box; quest’immagine deve ovviamente avere come background i colori scelti:#container { background:transparent url(bg.gif) repeat-y; } - Inserire png trasparenti anche sulle versioni di IE precedenti la 7
Anche in questo caso vi rimando ad una guida già bella e scritta.
Fonte: evolt.org

Chi conosce un minimo
Da poche ore è finalmente possibile scaricare Internet Explorer 7senza dover superare il controllo WGA per riconoscere le versioni non genuine di Windows.
