Très court astuce: CSS conditionnelle et l'optimisation

L'utilisation de conditions dans le navigateur est souvent utilisé pour décider quelle feuille de style à la charge selon le type de navigateur. Par exemple, nous pouvons utiliser ce code pour charger une feuille de style en particulier lorsque le navigateur est Internet Explorer 6:

1
2
3
4
5
<! - Upload cette feuille de style pour tous les navigateurs ->
"stylesheet" href = "foglio_style.css" type = "text/css" / > < lien rel = "stylesheet" href = "foglio_style.css" type = "text / css" />
<!--[ If IE 6]>
<link rel="stylesheet" type="text/css" /> href="foglio_style_ie.css"
<[Endif] ->

Une alternative à cette approche (qui génère au moins deux requêtes HTTP) serait d'agir sur la classe ou id de la balise body :

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

De cette façon, nous pourrions ajouter CSS pour différents navigateurs dans un fichier de définitions et de la voie unique basé sur la classe ou l'id attribué au body ! Par exemple:

1
2
: #000 } p {color: # 000}
color : #f00 } /* solo su IE 6 */ corps IE6 p {color: # f00}. / * uniquement sur ​​IE 6 * /

Évidemment, cette procédure est utile et avantageux lorsque le code "alternative" est d'une certaine taille ...

Optimisation des feuilles de style

Enfin, un formidable outil en ligne pour le formatage et la compression CSS: CSS Formatter et Optimiseur . Basé sur le moteur CSSTidy (également disponible en version téléchargeable de PHP ), a été impressionnant dans sa diversité et la compression des fichiers excellente. L'algorithme, en fait, non seulement pour éliminer la "tête" ou le dernier "," (virgule), mais optimise la syntaxe de la couleur (# ff9900 à # F90), les signes de pixels (0px à 0), ainsi que d'effectuer un certain nombre de contrôles utiles pour détecter les erreurs de frappe.

Un commentaire: "truc très court: CSS conditionnelle et d'optimisation"

  1. 21 mai 2009 feuilles de style Optimisation | Simone D'Amico :

    [...] | Posté dans Messages Undolog CSS associées: style CSS pour la croix-navigateur [...]

Laisser un commentaire

XHTML TAG PERMIS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CODE D'INSERTION:
 <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 


Arrêtez SOPA