Date de publication: le mercredi 4 mars 2009 à 00h29
Dernière modification: par Pascal BOYER le mercredi 4 mars 2009 à 00h45
« Article précédent: < link > et @import : optimiser le chargement des feuilles de style CSS
» Article suivant: Externaliser les feuilles de style CSS
Règle 7 : d'après le livre « Optimiser les performances de son site » par Steve Souders - Copyright 2007 - Steve Souders - 978-2-84177-483-8
Les expressions CSS, une saloperie propriétaire de microsoft (eux appellent cela une extension de CSS) uniquement supportée par Internet Explorer depuis sa version 5, permettent de modifier dynamiquement les propriétés des règles CSS.
Je ne m'étendrai pas sur le sujet pour les trois raisons suivantes:
- ceux d'entre vous qui ne voient pas de quoi il est question doivent surtout continuer à ignorer les expressions régulières (particulièrement en vertu du troisième point),
- on supposera que ceux qui les utilisent savent ce qu'ils font mais devraient prendre le temps de lire le troisième point,
- les expressions CSS ne seront plus supportées par défaut dans IE8 et le sont par IE7 uniquement pour assurer la rétro-compatibilité.
Abandon des expressions CSS dans Internet Explorer 8
Extrait du blog IE :
CSS Expressions Disabled IE8 Standards Mode
Expressions CSS désactivées en mode standard dans IE8
Also known as “Dynamic Properties,” CSS expressions are a proprietary extension to CSS that carry a high performance cost. CSS Expressions are also commonly used by attackers to evade server-side XSS Filters.
Également connues sous le nom de propriétés dynamiques, les expressions CSS sont une extension propriétaire de CSS ayant un coût important en terme de performances. Ces expressions sont également couramment utilisées par les «pirates» afin de contourner les filtres XSS côté serveur.
As of Beta 2, CSS expressions are not supported in IE8 Standards Mode. They are still supported in IE7 Strict and Quirks mode for backward compatibility. While the IE8 XSS Filter can block attempts to reflect CSS Expressions as part of an XSS attack, blocking them in IE8 Standards Mode brings a performance benefit, improves standards-compliance, and acts as an attack surface reduction against script injection attacks.
A partir de la version béta 2, les expressions CSS ne sont plus supportées par IE8 en mode standard bien qu'elles le reste par IE7 en modes Quirks (Ndt: mode d'affichage basé sur le comportement non standard du navigateur) et Strict pour des raisons de rétro-compatibilité. Alors que le filtre XSS de IE8 permet de bloquer les tentatives de simulations d'expressions CSS provenant d'une attaque XSS, bloquer ces expressions dans le mode standard de IE8 engendre un gain de performance, accroît le respect des normes et permet de réduire la portée des attaques de type injection de script.
Exemple d'exécution multiples
Outre le fait que les expressions CSS ne sont pas du tout respectueuses des standards, Steve Souders nous donne, à travers le code ci-dessous, un petit exemple illustrant les pertes de performance et les dommages collatéraux que peut engendrer leur usage.
Commencez par copier ce code dans un fichier html que vous afficherez ensuite dans IE:
<html> <head> <style> BODY { font-family: Arial,Helvetica; font-size: 11pt; } P { width: expression( setCntr(), document.body.clientWidth>600 ? "600px" : "auto" ); <= EXPRESSION CSS !!!! max-width: 600px; border: 1px solid; } </style> <script> var gnExpr = 0; var gCntrDisplay; var gbOn = true; function setCntr() { gnExpr++; if ( gbOn ) { displayCntr(); } return true; } function displayCntr() { if ( ! gCntrDisplay ) { gCntrDisplay = document.getElementById("cntrdisp"); } if ( gCntrDisplay ) { gCntrDisplay.value = gnExpr; } } function setDisplay(bOn) { gbOn = bOn; } </script> </style> </head> <body> <table border=0 cellpadding=0 cellspacing=0> <tr> <td align=right>Compteur d'évaluation de l'expression:</td> <td><input type=text size=10 id=cntrdisp disabled></td> </tr> <tr> <td align=right>Ne cliquez pas dans cette case !</td> <td><input type=text size=10></td> <td></td> </tr> </table> <p> Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. <p> Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. <p> Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. Avoid using CSS expressions. </body> </html>
Le fichier étant affiché, faites bouger le curseur de votre souris, réduisez la taille de la fenêtre du navigateur, etc.. tout en gardant un oeil sur le compteur en haut à gauche de la page.
Ce compteur affiche le nombre de fois que l'expression CSS est évaluée par le navigateur.
Par ailleurs, si votre esprit de contradiction vous poussa à cliquer dans la case «Ne cliquez pas dans cette case !», vous constaterez les effets inattendus de l'expression CSS sur l'usage d'un champ de saisi.
Conclusion
Bannissez les expressions CSS dans toute la mesure du possible.