CSS expressions vs Filters and Javascript for internet explorer
What is the difference between CSS expressions and CSS Filters?
Are both bad for page speed?
If something can be achieved in pure CSS in other browsers but for IE only possible by CSS expressions or CSS Filters or Javascript. Then should we always go for Javascript, if we are concerning the page speed.
Will Javascript be quicker in rendering than CSS Filter
or Expression
solution?
Update after Pekka's answer
OK so CSS expressions should be avoided, it's clear.
Now I want to know about Filters
Example of filters
#myElement {
opacity: .4; /* other browsers */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in开发者_开发百科 IE6, IE7, and IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}
To get PNG Transparency in IE6 and some CSS 3 effect in IE 6,7,8 We can use CSS IE Filters
http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
and there are also some Javascript alternative available.
Will Javascript be quicker in rendering than CSS Filter ?
Note: The filter
property is not valid CSS
In older versions of IE, if you have the choice to use a CSS filter or a CSS expression, the filter is the better choice.
However, I can't think of a single scenario where you have the choice of a filter or an expression.
You should favor plain Javascript over expressions, because expressions are evaluated constantly, for instance on mousemove
. With plain Javascript, you can control when the code runs, for example onload
, or onresize
.
See a Google document on the subject:
CSS expressions degrade rendering performance; replacing them with alternatives will improve browser rendering for IE users.
Note: This best practices in this section apply only to Internet Explorer 5 through 7, which support CSS expressions. CSS expressions are deprecated in Internet Explorer 8, and not supported by other browsers.
The things filters are used for in IE, there is often no way to replace them.
There is no way to "use Javascript" instead, because the Javascript will just be dynamically applying the filter. This is the case for transparency, and the rgba gradient filter workaround.
In response to your edit:
and there are also some Javascript alternative available.
Will Javascript be quicker in rendering than CSS Filter ?
In the article you linked to, none of workarounds have a filter
solution and a Javascript solution (the ones that do are just applying the same filter
automatically, for convenience).
If you are referring to IE6's CSS Expressions, you should totally drop those and use jQuery.
IE CSS expressions
- Used to work only in IE up to 7
- Have been discontinued by Microsoft
- Achieve nothing that jQuery can't do, it's just a bit more convenient
- According to this, they used to require JavaScript to be enabled
- In conclusion, were a bad idea.
精彩评论