The star-property hack
So, in my new position as a Web Developer at Yahoo! I’ve been working on the homepage for the UK and others. I’ve been documenting the CSS we are using. There are one or two odd hacks we use, but strangely I couldn’t find one of them using *cough* Google.
The “Underscore hack” has already been documented. However we are using something really similar. I am calling this the Star-Property hack which is distinct from the Underscore hack, and more particularly the Holly Hack, which comes up a lot when searching for ’star property css hack’. The Star-Property hack takes the form below, which I am also using as a test page:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”;>
<html>
<head>
<style type=”text/css”>
body {
*background:red;
}
</style>
</head>
<body>
</body>
</html>
As you can see you use a normal selector but insert a * before the property name. This is legal in CSS 2.1 as Pixy notes in the Underscore hack. However, the properties no should not exist. The IE family ignore the *, however, and apply the property without it. I have tested all verison of IE from 5.0-7b2 and they will all apply this rule, unlike the Underscore hack which is not applied in 7b2. No other browser I tested (Firefox 1.0 & 1.5, Netscape 8, Opera 8.5 or Safari 2) applied this rule.
N.b. obviously these opinions are my own and not Yahoo!’s
February 3rd, 2007 at 2:47 am
[…] Anne van Kesteren posted today on IE7 CSS hacks. If I am understanding correctly IE didn’t fix the parse errors on property hacks, they just banned certain ones. This explains why my post on the star property hack still works. […]
June 15th, 2007 at 5:10 am
We’ve been using this for a long time - very effective and reliable hack, and as you say, similar to the _ hack. I common use is:
margin-top:10px;
height:30px;
*height:20px;
(i.e. to compensate for the broken box model by subtracting the margin from the height and then overriding the previous rule, for IE only)
September 10th, 2007 at 9:42 pm
hi Vincent
shoudn’t that be
height:20px;
*height:30px;
as what i understant from author ” all verison of IE from 5.0-7b2 and they will all apply this rule “