Cross Browser Issues: CSS Hacks, Understanding Compatibility - Another CSS Solution
(Page 5 of 5 )
Another solution to issues of cross-browser compatibility would be to create multiple style sheets for multiple browsers, then using a JavaScript code to return the version and type of browser the web visitor is using. I’ll talk more about this in the next article. Still, even with the support of both strict mode and quirks mode in these browsers, there are going to be design issues. Let’s look at a few workarounds and why they work the way they do, but we’ll really delve more into the hacks in the next article.
The first one I want to look at is the “html>body” selector. This selects any body element that is a child of an HTML element. The problem though is the child selector will be interpreted correctly in compliant browsers only if there is white space on either side of it (html > body or html> body or html >body), except in IE.
html>body { overflow: visible; } /* show to IE */
body { overflow: auto; } /* show to everyone else */
This is a manifestation of the underscore hack, which allows you to show CSS only to IE and exclude all other browsers. This comes in very handy when you are needing to give IE a set of separate instructions because something won’t appear correctly if you don’t.
The underscore hack looks like this:
body {
background: blue; /* show to Mozilla/Safari/Opera */
_background: red; /* show to IE */
}
Two things I will point out about this workaround: one, your CSS won’t validate; and two, it doesn’t work in IE 5 for Mac. For this case, we have to add another hack, called the Mac Backslash Hack (try saying it three times really fast). The normal function of this hack is to get IE5/Mac to ignore any CSS rules contained within the hack’s boundaries. This hack works by escaping an end-comment marker using a backslash before the asterisk: \*/. This hides the end-comment marker for IE5/Mac, and tricks IE5/Mac into thinking anything which follows is still part of the comment. Once another unescaped end-comment marker appears, IE5/Mac resumes application of the remaining CSS rules. All other browsers understand the escaped end-comment as the actual end of the comment, and apply the following rules as if nothing ever stopped them from doing so.
body {
background: blue; /* show to Mozilla/Safari/Opera */
_background: red; /* show to IE */
/* commented backslash hack for IE5-Mac \*/
background: green;
/* end hack */
}
Hacks, as you can see from the example above, can get pretty complicated if you don’t understand the bugs that the browsers have to begin with. You can find pretty good list of reported CSS bugs for particular browsers either on the browser’s own site or elsewhere on the Internet. The next article will have many more hacks and workarounds, and hopefully this overview of why CSS sometimes really does behave oddly in certain browsers was helpful to you.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 21 
