Comments on: Stop using poor performance CSS expressions – Use JavaScript instead http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/ Web development and Internet trends Wed, 17 Mar 2010 23:38:52 +0100 http://wordpress.org/?v=2.9.2 hourly 1 By: X tips to slim down your website « Meshack Blog http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-617461 X tips to slim down your website « Meshack Blog Tue, 12 Jan 2010 01:55:38 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-617461 [...] Rightly so, Microsoft has dropped support for CSS expressions with IE 8. The better choice is to use proper event handlers. Here is a great article further exploring the problem with CSS expressions. [...] [...] Rightly so, Microsoft has dropped support for CSS expressions with IE 8. The better choice is to use proper event handlers. Here is a great article further exploring the problem with CSS expressions. [...]

]]> By: Robert Nyman http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-603711 Robert Nyman Tue, 29 Sep 2009 06:39:10 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-603711 Olav, I think the best resource on that is the <a href="http://developer.yahoo.com/performance/rules.html#css_expressions" rel="nofollow">statement from the Yahoo Performance Team on CSS expressions</a>. Olav,

I think the best resource on that is the statement from the Yahoo Performance Team on CSS expressions.

]]> By: Olav http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-603664 Olav Mon, 28 Sep 2009 20:48:55 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-603664 How did you track performance on css expression vs javascript ?! How did you track performance on css expression vs javascript ?!

]]> By: Robert Nyman http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-597851 Robert Nyman Sun, 16 Aug 2009 22:17:04 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-597851 moleculezz, Glad that it worked out for you! moleculezz,

Glad that it worked out for you!

]]> By: moleculezz http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-597795 moleculezz Sun, 16 Aug 2009 14:59:49 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-597795 Nevermind I fixed the problem. I changed some of the code and set a conditional statement for IE6 to change the div#middle padding to 10px. Nevermind I fixed the problem. I changed some of the code and set a conditional statement for IE6 to change the div#middle padding to 10px.

]]> By: moleculezz http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-597785 moleculezz Sun, 16 Aug 2009 13:12:05 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-597785 Hi, I tried to use the above code but it doesn't seem to work for me. Maybe I'm doing it wrong? If you have IE6 you can check out the web address. It is giving me problems with both the left div and the right div. My structure is something like this: <code> <html> <head> <style type="text/css"> #wrapper{ width:980px; margin:auto; background-color:#fff } #header{ width:980px; position:relative } #middle{ width: expression(document.body.clientWidth > 940)? "980px" : "auto"; /* For web browsers supporting it */ max-width: 980px; padding:20px; overflow:hidden; clear:both; } #left{ float:left; width:200px } #main{ width:auto; margin: 0px 0px 0px 210px } #content{ width: expression(document.body.clientWidth > 480)? "480px" : "auto"; /* For web browsers supporting it */ max-width: 480px; min-height: 400px; margin: 0px 250px 0px 0px; } #right{ float:right; width:240px } #footer{ clear:both; width:980px; margin:auto; padding:20px 0 } </style> </head> <body> < div id="wrapper"> < div id="header"> </div> < div id="middle"> < div id="left"> </div> < div id="main"> < div id="right"> </div> < div id="content"> </div> </div> </div> </div> < div id="footer"> </div> </body> </html> </code> Hi,
I tried to use the above code but it doesn’t seem to work for me. Maybe I’m doing it wrong?
If you have IE6 you can check out the web address. It is giving me problems with both the left div and the right div.

My structure is something like this:
<code>
<html>
<head>
<style type=”text/css”>
#wrapper{ width:980px; margin:auto; background-color:#fff }
#header{ width:980px; position:relative }
#middle{
width: expression(document.body.clientWidth > 940)? “980px” : “auto”;
/* For web browsers supporting it */
max-width: 980px;
padding:20px;
overflow:hidden;
clear:both;
}
#left{ float:left; width:200px }
#main{ width:auto; margin: 0px 0px 0px 210px }
#content{
width: expression(document.body.clientWidth > 480)? “480px” : “auto”;
/* For web browsers supporting it */
max-width: 480px;
min-height: 400px;
margin: 0px 250px 0px 0px;
}
#right{ float:right; width:240px }
#footer{ clear:both; width:980px; margin:auto; padding:20px 0 }
</style>
</head>
<body>
< div id=”wrapper”>
< div id=”header”>

</div>
< div id=”middle”>
< div id=”left”>

</div>
< div id=”main”>
< div id=”right”>

</div>
< div id=”content”>

</div>
</div>
</div>
</div>
< div id=”footer”>

</div>
</body>
</html>
</code>

]]> By: 21 fonctions Javascript pour l’intégrateur web (et plus à venir…) http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-596470 21 fonctions Javascript pour l’intégrateur web (et plus à venir…) Mon, 03 Aug 2009 03:42:11 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-596470 [...] maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6 : [...] [...] maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6 : [...]

]]> By: Robert Nyman http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-570287 Robert Nyman Tue, 14 Apr 2009 20:12:25 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-570287 Zac, Happy it helped! :-) Zac,

Happy it helped! :-)

]]> By: Zac http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-564920 Zac Wed, 08 Apr 2009 15:58:25 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-564920 Nice job. Works like a charm! Nice job. Works like a charm!

]]> By: Setting min-width and max-width in IE 6 « Web Help! http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-523280 Setting min-width and max-width in IE 6 « Web Help! Sat, 14 Feb 2009 20:00:10 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-523280 [...] found this article on the web, which says that reqular expressions are very expensive on the page, and you should use [...] [...] found this article on the web, which says that reqular expressions are very expensive on the page, and you should use [...]

]]> By: StefKob Blog » Blog Archive » Fonctions Javascript web integration http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-484873 StefKob Blog » Blog Archive » Fonctions Javascript web integration Sat, 13 Dec 2008 23:29:35 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-484873 [...] maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6 : [...] [...] maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6 : [...]

]]> By: Robert Nyman http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-477842 Robert Nyman Fri, 21 Nov 2008 13:37:29 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-477842 waitangi, Great! :-) That CDN thing is a bit off, I think. It's really only valid for major web sites being accessed from all around the globe. Don't worry to much about it. :-) waitangi,

Great! :-)
That CDN thing is a bit off, I think. It’s really only valid for major web sites being accessed from all around the globe. Don’t worry to much about it. :-)

]]> By: waitangi http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-477841 waitangi Fri, 21 Nov 2008 13:32:12 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-477841 Ah cool thanks for that info Robert, I've followed your advice and removed the ie-only code to a separate file inside conditional comments. Almost at the holy grail of YSlow A! (just a few grand on CDN and it's there :) ). Ah cool thanks for that info Robert, I’ve followed your advice and removed the ie-only code to a separate file inside conditional comments.

Almost at the holy grail of YSlow A! (just a few grand on CDN and it’s there :) ).

]]> By: Robert Nyman http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-477775 Robert Nyman Fri, 21 Nov 2008 09:07:14 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-477775 waitangi, The problem with using <code>attachEvent</code> is that it is present in IE 7 as well, + in Opera, who has tried to mimicked it. Therefore, using conditional comments is the best way to achieve this, and also, personally I prefer a clean separation in my code between real code and other code used to cover up for certain web browser flaws. waitangi,

The problem with using attachEvent is that it is present in IE 7 as well, + in Opera, who has tried to mimicked it.

Therefore, using conditional comments is the best way to achieve this, and also, personally I prefer a clean separation in my code between real code and other code used to cover up for certain web browser flaws.

]]> By: waitangi http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-477690 waitangi Fri, 21 Nov 2008 05:53:17 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-477690 Nice one, another Yslow follower here... I'm a js novice but I think this might work as another way of including the code (instead of using [if lt...]), no IE6 to test on here... <code> function checkAvailableWidth(){ // min/max works better with slightly different values? var container = document.getElementById("container"); container.style.width = (document.body.clientWidth 1012? "1010px" : "auto"); } // window.attachEvent only followed by IE6? or IE7 as well? if (window.attachEvent) { window.attachEvent('onload', checkAvailableWidth); window.attachEvent('onresize', checkAvailableWidth); } </code> I have a big block of sitewide js so my idea is to just stick it in there instead of having a separate file. Not sure how those calls work when there are other ones looking out for 'onload' as well. Nice one, another Yslow follower here… I’m a js novice but I think this might work as another way of including the code (instead of using [if lt...]), no IE6 to test on here…

function checkAvailableWidth(){
// min/max works better with slightly different values?
var container = document.getElementById("container");
container.style.width = (document.body.clientWidth 1012? "1010px" : "auto");
}
// window.attachEvent only followed by IE6? or IE7 as well?
if (window.attachEvent)
{
window.attachEvent('onload', checkAvailableWidth);
window.attachEvent('onresize', checkAvailableWidth);
}

I have a big block of sitewide js so my idea is to just stick it in there instead of having a separate file. Not sure how those calls work when there are other ones looking out for ‘onload’ as well.

]]> By: Robert Nyman http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-465916 Robert Nyman Sat, 18 Oct 2008 21:23:21 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-465916 Inair, Good! flash tekkie, Yes, I was very glad about that decision! Inair,

Good!

flash tekkie,

Yes, I was very glad about that decision!

]]> By: flash tekkie http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-465730 flash tekkie Sat, 18 Oct 2008 10:05:12 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-465730 Surely any script execution at the Style Sheet stack of the browser is a performance issue and more importantly a security threat. No wonder it makes IE the most insecure browser on the market. Good news is <a href="http://tekkie.flashbit.net/browsers/internet-explorer-dumping-css-hacks-to-comply-with-standards" title="Internet Explorer dumping CSS hacks to comply with standards" rel="nofollow">Microsoft is ending expressions in Internet Explorer</a> as announced on Thursday earlier this week. A very nice move towards the standard-compliant browser. Surely any script execution at the Style Sheet stack of the browser is a performance issue and more importantly a security threat. No wonder it makes IE the most insecure browser on the market.

Good news is Microsoft is ending expressions in Internet Explorer as announced on Thursday earlier this week.

A very nice move towards the standard-compliant browser.

]]> By: Inair http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-334227 Inair Thu, 10 Jul 2008 03:09:36 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-334227 Hi, This article is great. It help me with the expression problem. Thanks, Robert. Best regards, Inair Hi,

This article is great. It help me with the expression problem. Thanks, Robert.

Best regards,
Inair

]]> By: ????????????? expressions ? CSS | ?????????? ???????????... http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-269428 ????????????? expressions ? CSS | ?????????? ???????????... Sat, 10 May 2008 11:09:22 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-269428 [...] http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-ins... [...] [...] http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-ins... [...]

]]> By: ????????????? expressions ? CSS | ?????????? ???????????... http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-269426 ????????????? expressions ? CSS | ?????????? ???????????... Sat, 10 May 2008 11:03:16 +0000 http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/#comment-269426 [...] http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-ins... [...] [...] http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-ins... [...]

]]>