Performances IE6 avec les expressions CSS

Question

Nous développons une application Web qui sera vendue à de nombreux clients. Il y a déjà un client (une banque) qui a décidé qu'il achèterait le produit une fois qu'il sera prêt. Malheureusement, en raison d'une mauvaise communication, il est apparu assez tard que le seul navigateur qu'ils utilisent est IE6. L'application a déjà été lancée en gardant à l'esprit qu'elle n'a pas besoin de supporter quoi que ce soit d'autre en dessous d'IE7. Les résultats sont plutôt bons - il est entièrement utilisable sur IE7/FF/Opera/Safari. N'a pas testé sur Chrome, mais attendez-vous à de petits problèmes. Malheureusement, il ya maintenant l'exigence IE6 après tout ...

L'application n'est pas encore très développée, et le design est plutôt correct, donc le changement n'est pas si horrible. Encore, ça va prendre du travail.

Une bonne chose à propos de IE6 est qu'il prend en charge deux fonctionnalités non standard et très utiles. Le premier est les commentaires conditionnels, ce qui me permet d'inclure des fichiers CSS/JS uniquement pour IE6. La deuxième est les expressions CSS. C'est-à-dire, des choses comme ceci:

input 
{ 
    background-color: expression(this.type='text'?'silver':''); 
} 

En substance, il lie les valeurs CSS aux expressions JavaScript. Cela permet d'émuler facilement de nombreuses fonctionnalités CSS que IE6 ne supporte pas nativement, et pourrait alléger considérablement mon fardeau. Malheureusement IE est tristement célèbre pour ses performances JavaScript. Je suis inquiet que l'utilisation d'un trop grand nombre de ces expressions pourrait ralentir à une exploration. Je ne sais pas non plus quels ordinateurs la banque utilise. Comme c'est un très gros, je m'attendrais à une grande variété dans toutes leurs succursales. Je ne m'attends pas à utiliser beaucoup de choses là-bas - des maths simples, des opérateurs ternaires et en regardant les propriétés de cet élément/parent. Toujours il y aurait une douzaine de ceux-ci dans le fichier IE6_override.CSS.

Peut-être un problème?

Ajouté: Blah, c'était ce dont j'avais peur. OK, je vais voir combien je peux utiliser d'autres hacks pour contourner les lacunes. Merci, les gens!

Answer 1

https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html

avère que vous pouvez éviter d'utiliser ceux-ci, ils sont dangereux.

Answer 2

Oui, les expressions sont vraiment lente dans la période IE. Trouvez des moyens de les éviter.

Answer 3

Malheureusement, les performances des expressions CSS sont très médiocres, car le résultat est calculé en permanence, tout au long du chargement de la page, et pas seulement lors du premier chargement de la page. Si vous devez utiliser des expressions, il vaut mieux utiliser le JavaScript standard avec un événement onLoad.

Voir cet article pour plus d'informations: http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/

Answer 4

Les expressions sont réévaluées sur de nombreux événements de page, qui a le potentiel de ralentir les performances de page entière quand il est utilisé de façon trop libérale. (Et encore, ils ne peuvent pas répondre à tous les événements qui pourraient les obliger à réévaluer.)

MS a admis expression() était une erreur, et sont removing it from future browsers.

Il existe généralement de meilleures solutions de contournement JavaScript individuelles pour les différents manquements CSS d'IE6.

Il est plutôt triste que tant d'entreprises continuent de s'en tenir à l'IE6. Peut-être que si vous livrez le projet en retard, ils auront amélioré d'ici là!

Answer 5

Je ne l'ai pas essayé moi-même, mais IE7-js semble prometteur. Il prétend faire IE6 compatible avec IE7

Edit: Soit dit en passant, juste ajouter quelques styles pour IE6, vous pouvez également utiliser

<!--[if lt IE 7]> 
<link rel="stylesheet" type="text/css" media="screen" href="ie6styles.css" /> 
<![endif]--> 

Et vous pouvez toujours utiliser jquery pour définir les propriétés CSS dynamiquement dans tous les navigateurs, y compris IE6.

Answer 6

Je vous suggère de passer à un cadre JS qui prend en charge les CSS Selectors afin que vous puissiez imiter le behaiviour des expressions CSS

vous pouvez tester JS performances cadres si vous ouvrez cette URL sur IE6

http://slicktest.perrohunter.com

acclamations

Answer 7

Il est possible de faire des expressions IE fonctionner de manière optimale, non seulement pour éviter des choses comme la réévaluation continue, mais aussi pour accrocher votre style désiré à IE spécifique classnames donc de rendre votre IE spécifique CSS plus facile à maintenir (comme les expressions elles-mêmes sont dégoûtants):

input 
{ 
    1:expression(this.executedExpressions ? void 0 : this.className += (this.type == 'text' ? ' ie-text' : '')); 
    2:expression(this.executedExpressions = true); 
} 

input.ie-text 
{ 
    background-color:silver; 
} 

Si vous allez utiliser des expressions IE du tout, cela est la meilleure façon. (Je devrais vraiment écrire un article complet à ce sujet).

Answer 8

Si vous devez les utiliser, les techniques trouvées à One-time execution of IE CSS expressions vous aideront avec les problèmes de performances (mais pas de sécurité).