This hack can be used to hide CSS from Opera (versions 6 and below) and from Internet Explorer for Windows (versions 6 and below):
head:first-child+body
A Detailed Explanation
Before Opera 6 was released, developers could use various techniques based on a CSS parsing bug to hide CSS from the Opera web browsers. But, Opera 6 fixed the parsing bug that is the basis of both Tantek’s hack and the simplified box model hack. Unfortunately, Opera 6 still has some CSS display bugs. (What browser doesn’t!)
Fortunately (for our purposes), Opera versions through 6 (and IE/win versions through 6) don’t recognize the :first-child pseudo-element. This missing feature can be used to correct any Opera-specific bug (see an example bug at the bottom of the page).
/* the following selector is seen by EVERY browser */
.myClassSelector {
background-image: none;
}
/* the Owen hack -- http://www.albin.net/css/owen-hack */
/* the following selector is NOT seen by Opera 6 (and below) or by IE6/win */
head:first-child+body .myClassSelector {
background-image: url("regularImage.png");
background-attachment: fixed;
}What the heck does that mean? The Owen hack can be broken into two parts. The first part of the CSS selector (head:first-child+body) means: “select the body element if the body element is adjacent to a head element and the head element is the first child of it’s parent.” Since the head and body elements are, respectively, the first and second elements of the html element, the first part of the Hack is ALWAYS TRUE. The second part of the rule (the .myClassSelector can be any type of CSS selector that you want.
The CSS Specification requires that web browsers ignore any rule they don’t understand. Both Opera (versions 6 and before) and IE/win (versions 6 and before) don’t understand the :first-child selector and will ignore the entire rule. IE5/Mac, Netscape 6, and Mozilla will diplay the proper fixed background image.
Some Examples
The following examples will hide the rules from Opera 6 (and earlier) and from IE/win 6 (and earlier).
/* display red paragraphs */
head:first-child+body p { color: red; }
/* make a paragraph disappear */
head:first-child+body #warning { display: none; }
/* display blue text if the body has an id of "blue" (i.e. )
head:first-child+body#blue { color: blue; }An Opera-only Hack
Wait a sec! This hack hides CSS from Opera and IE/win. What if I only want to hide CSS from Opera 6 and earlier? Ah, well then. You have to combine the Tantek hack’s “be nice to Opera” rule with the Owen hack. For example, using the following CSS, only Opera will display the div.myDiv using red text.
/* be nice to Opera... um, maybe not. */
html>body div.myDiv { color: red; }
/* the Owen hack -- http://www.albin.net/css/owen-hack */
head:first-child+body div.myDiv { color: black; }What if I only want to hide CSS from Opera 6? Boy, you’re getting picky, aren’t you? You have to use the “Be Mean to Opera” hack inside Tantek’s “be nice to Opera” rule and combine them with the Owen hack. For example, using the following CSS, only Opera 6 will display the div.myDiv using red text.
/* The "be nice to Opera" rule */
html>body div.myDiv {
c\olor: red; /* now be mean to Opera 6 using the "simplified box model hack" (i.e. Tantek's hack) */
}
/* the Owen hack -- http://www.albin.net/css/owen-hack */
head:first-child+body div.myDiv {
color: black;
}An Example Opera Bug
One particularly ugly Opera bug happens when a fixed background image is attached to an element besides html or body. All versions of Opera through 6 attach a fixed background image relative to the element in which it is defined and not, as the CSS2 specification says, to the viewport. So, when the document is scrolled, the content moves up past the top of the fixed image and gets displayed over the parent elements background. This usually results in an extremely ugly effect.
Why the Name?
BTW, “Owen” is the name of my first child. Or for you CSS selector gurus out there: [name="John Albin Wilkins"]>[name="Owen"]:first-child ;-).
Comments