Very short trick: CSS condizionali e ottimizzazione

L’uso delle condizioni all’interno del browser viene spesso utilizzato per decidere quale foglio di stile caricare in base al tipo di browser. Ad esempio possiamo utilizzare questo codice per caricare un particolare foglio di stile quando il browser è Internet Explorer 6:

1
2
3
4
5
<!-- Carica questo foglio di stile per tutti i browser -->
<link rel="stylesheet" href="foglio_style.css" type="text/css" />
<!--[if IE 6]>
   <link rel="stylesheet" href="foglio_style_ie.css" type="text/css" />
<![endif]-->

Un’alternativa a questo modo di procedere (il quale genera almeno due richieste HTTP) potrebbe essere quella di agire sulla classe o id del tag body:

1
2
<!--[if IE 6]><body class="ie6"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->

In questo modo potremmo inserire codice CSS per browser diversi all’interno di un unico file e instradare le definizioni basandoci sulla classe o id assegnato a body! Ad esempio:

1
2
p {color:#000}
body.ie6 p {color:#f00} /* solo su IE 6 */

Ovviamente questa procedura è utile e vantaggiosa quando il codice “alternativo” è di certe dimensioni…

Ottimizzazione dei fogli di stile

Segnalo infine un ottimo tool online per la formattazione e compressione di codice CSS: CSS Formatter and Optimiser. Basato sul motore csstidy (disponibile anche in versione php scaricabile), mi ha colpito per le sue numerose opzioni e l’ottima compressione dei file. L’algoritmo, infatti, non si limita ad eliminare gli “a capo” o gli ultimi “;” (punto e virgola), bensì permette di ottimizzare la sintassi dei colori (#ff9900 in #f90), le indicazioni di pixel (0px in 0), oltre ad eseguire una serie di controlli utili a scovare errori di battitura.

Un commento a: “ ”

  1. 21 mag, 2009 Ottimizzazione dei fogli di stile | Simone D'Amico:

    [...] | Undolog posted under CSS Post correlati: CSS: dare uno stile cross-browser ai [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL