I have searched the web and forum and am not able to find an good explanation for my question. I know this is a workaround for different browsers (from my understanding the “* html” is for IE specific attributes) but I do not know exactly what it means.
I was wondering what the “* html” means for this class.
should mean the same as .outer all by itself – which one gets used depends on whether the user-agent (browser) supports CSS2/CSS3. Since the .outer comes first in the stylesheet, it will be applied unless hte browser understands the splat.
Thanks for the response, I tried to read the link but I am not a seasoned CSS person and most of it seemed to go over my head, but from what you explained I think I understand but just to clarify:
If the browser supports css2/3 it will ignore .outer and use *.outer.
If the browser doesnt support css2/3 the *.outer is not read at all and is discarded.
What does the html part of the * html .outer mean, is it just a text descriptor. I am still confused on that, it is the same as saying * .outer?
Is it safe to assume that this logic is applied to all classes?
Yes, it is safe to assume that the same applies to all, but you really need to do some digging to see what supports what.
This:
html .outer {…}
means “apply this to anything with a class attribute of ‘outer’ that is a descendant of that is the descendant of anything”. The splat, in this case, is refering to the document node (the thing that contains the ).
The browser won’t exactly “ignore” the original .outer information; it reads the infomation as being superceded. That’s the “cascading” part of CSS – things that appear later, or that are more specific, will override earlier, less-specific statements.
Note that “* html .outer { some styles }” will not be matched by non-IE browsers.
The way I understand it, IE puts some sort of layer around everything - while other browsers do not. So while IE will match the “*” to that layer, other browsers will decide that there is no parent to the HTML node and won’t apply the style. This is used to fix all sorts of IE-specific bugs.
… until the day after tomorrow. That’s why I am firmly against CSS hacks – in this case, the document node is a legitimate DOM construct, so you can’t count on it being unsupported anywhere for any length of time. We use a platform that can serve different stylesheets to different browsers if necessary; use that facility instead of anything unsupported.
But in the context of the css provided, the information is important - because such a CSS hack is being applied.
Regardless of whether one is firmly against CSS hacks or not, this CSS was obviously inherited by the developer and the “why’s” of the code is very important. (ie. IE does strange things. I don’t believe this is matching the document node, but it’s own special way of doing things)
And the day after tomorrow when browsers are released that fix the issue - there’s a solid chance that you’ll be in the same position as someone who applied CSS hacks, browser detection being the ugly beast that it is.
Not to mention the fluid nature of skills in the IT industry. Knowing how you can achieve decent CSS layouts when you’ve taken a job on a different platform will serve anyone well.