CSS filter - IE hacks
Lets see what this filter means.
A CSS filter is a technique used by programmers to show or hide markups depending on browsers. Why shall we know all these? Browsers has different implementation of CSS behavior. All of us happened to have different CSS formating in different browsers. If we respect the W3C Schools standards we will have less difficulties. Besides these, sometimes browsers act in a special way and we should use tricks or simple “tell” the certain browser to act in the requested manner.
These CSS filters are called Conditional Comments. Web developers will implement these techniques when some layouts do not have a consistent CSS behavior. In few words these filters are just special instructions.
Conditional Comments
What browsers version support these conditional comments? Not every browser, just Internet Explorer (since version 5). Using this code technique web developers can in a simple manner to hide or show HTML code based on the version of the viewer’s browser.
How we use this?
There are two types of conditional comments: downlevel revealed which is a proprietary Microsoft HTML tag and downlevel hidden which are ignored by non Microsoft browsers because they are treated as a standard comment.
Look at the example below of a “downlevel hidden” conditional comment:
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="styleIE7.css"><![endif]-->
Or
<!--[if lte IE 7]><style>css tags here</style><![endif]-->
Using these tags IE7 will read the specifies while other browsers or other versions of IE won’t. But how know browsers to ignore these? Simple. It interprets the code with a standard HTML comment.
Below is an example of a “downlevel revealed” conditional comment:
<![if !IE]><link rel="stylesheet" css" href="non-ie.css"><![endif]>
This is recommended by Microsoft when the content should be exposed to non-IE browsers. There is also another alternative/technique used by web developers for downlevel-revealed conditional comments in order to only use standardize markup.
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="non-ie.css">
<!--<![endif]-->
While this method is functional in current versions of Internet Explorer, there is no guarantee that future versions will continue to operate this way.
Note: Internet Explorer 4 and below do not support conditional comments.
“Hacks”
“Hacks” are style definitions that exploit known peculiarities and bugs to control whether style rules are seen by a specific browser version. There should be taken care when using hacks.
Import Hacks
The @import statement is not supported at all in Netscape 4, so many sites will import their real stylesheets from a small inline stylesheet to hide it from IE.
Parsing Hacks
There are many hacks based on CSS parser bugs in particular browsers, particularly parsing of comments, and backslash-escaping.
Commented Backslash
This hack uses a bug in Internet Explorer for Mac related to comment parsing. A comment ending in “\*/” is not properly closed in IE Mac, so rules that need to be ignored in IE mac can be placed after such a comment.
Look at the example below:
/* Ignore the next rule in IE mac */ selector { ...styles... } /* Stop ignoring in IE mac */
“Box Model Hack”
Called the “Box Model Hack” because the bug it is most often used to work around, this hack provides a different set of properties to IE and other browsers
#elem { width: [IE width];voice-family: "\"}\"";
voice-family:inherit;width: [Other browser width];}
html>body #elem {
width:[Other browser width];
}
The first “voice-family” statement is set to the string ‘”}”‘, but an IE parser bug will interpret it as a string with a single backslash followed by a } for the end of the rule. voice-family is chosen because it will not affect rendering on a screen stylesheet. The second rule uses the html>body hack for browsers such as Opera 5 that have the parsing bug but do not have the box model bug (and, additionally, which support the child selector)
Selector Hacks
Star HTML hack
Fully-compliant browsers will ignore the * html selector, while IE 5.5 and 6 will process it normally. This enables rules to be specified for these versions of Internet Explorer which will be ignored by all other browsers. For example, this rule specifies text size in Internet Explorer 5.5 and 6, but not in any other browsers.
* html p {font-size: 5em; }
html>body hack
Versions of Internet Explorer before version 7 do not support the “child selector” (>), allowing rules to be specified for all browsers except Internet Explorer. For example, this rule will turn paragraph text blue in Firefox, but not in IE.
html>body p {color: blue; }
Negation pseudo class hack
All versions of Internet Explorer and Opera do not support the “negation pseudo class” that is a Mozilla’s CSS extension.
.yourSelector {color: black;} /* values for IE */html:not([dummy]) .yourSelector {
color: red;
} /* values for Safari and Firefox */
@media all and (min-width: 0px) { .yourSelector {
color: blue;
} } /* values for Opera */
Criticisms of Hacks
Hiding code using hacks often leads to pages being incorrectly displayed when browsers are updated. Many Hacks that used to hide CSS from Internet Explorer 6 and lower no longer work in Internet Explorer 7 due to Internet Explorer 7 improved support for CSS standards.
Post a comment
RSS/XML