Probably not new, but I can’t find mention of it anywhere so I’ll post it here:
#foo.bar,
#foo.baz {
background: blue;
}
In the CSS above, #foo.baz effectively neutralises #foo.bar in Internet Explorer 6. It will never be applied. The same happens even if you separate the grouped selector into two statements like this:
#foo.bar {
background: blue;
}
#foo.baz {
background: blue;
}
Anyone seen this before? It’s hard to think of a short description, or something to Google for. “IE6 grouped selector with combined id and class selector bug”.
I worked around it by removing the classes from the selector (which was fortunately possible in this case.)
And before you ask, one of our largest clients is a multinational corporation whose internal IT policy has standardised on IE6.
[Update: As usual, spelling out the problem helped me find other mentions of it here and here.]
Natalie Downe of Clearleft has written a very useful presentation entitled CSS Systems, or, “Writing Maintainable CSS”. These are principles and patterns for writing HTML and CSS that makes it easier to hand over to other people to maintain, and generally more robust. It’s very relevant for agencies like us, and I was pleased to find that the system we developed internally (documented on the company wiki) correspond with hers about 99%. This blog post consists of comments, additions, qualifications, agreements and occasional disagreements with her presentation.
Continue reading ‘CSS Systems’
Best Practices for Speeding Up Your Web Site — part of an excellent series of articles on the Yahoo Developer Network.
They mainly focus on the front end, as that is where you’ll get most bang for your buck. They make frequent reference to YSlow, a Firebug extension that looks extremely useful.
The presentation here is also strongly recommended, as it makes succinct arguments for all the techniques. (View on Slideshare to see it full-screen.)
Some things were familiar to me (and most are already standard practice for my colleagues), many weren’t (e.g. avoid @import for CSS), and some I know of but haven’t been convinced of before (e.g. CSS sprites). I was quite intrigued by this example of CSS sprites in use on Google. (When using CSS sprites, remember to consider their accessibility to screen readers, and don’t use if you want them to print.)
After the furious controversy and rationalisation unleashed by Microsoft’s embrace of version targeting from IE8 onwards, we were thrilled by their u-turn on the decision yesterday. Instead of acting like IE7 unless instructed otherwise, “IE8 will, by default, interpret web content in the most standards compliant way it can.” Big sigh of relief.
And today Microsoft released the first IE8 Beta. Thanks to John Resig for his excellent review, pointing out all the significant improvements as well as omissions. As Resig points out, it’s primarily my JavaScript-coding colleagues who’ll see the greatest leaps forward, but I’m amazed and happy to see support for ARIA, meaning we can finally improve the accessibility of Ajax-based web applications. And I love the Firebug-like integrated debugger — you can even use it when in IE7 mode!
In the review, Resig makes one comment that resonated with me: “I simultaneously feel both joy and anger in seeing these fixed. Happy that they’re being released and anger for the fact that I had to struggle through them and that they now consume some portion of my brain.” Joy and anger. That’s exactly what IE8 makes me feel. We’re made to feel grateful for the fixing of years-old bugs that on any normal software product wouldn’t have been tolerated for longer than a few months.
It’s always fun to find another bug in IE6. This XHTML/CSS kills IE6 out right. It is cut down from a real project and had us amused for a while.
This seems to be the minimal set that causes the crash. The negative margin is required too.
We swapped the <p> for a <span> in the end.
<head>
<style>
#inner DIV {
background: #cccccc;
}
#outer P:first-letter {
margin: -1px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div>
<p><a href="">ie6 breaks</a></p>
</div>
</div>
</div>
</body>
</html>
It’s a fairly common practice to specify a site’s primary font as { font-family: Helvetica, Arial, sans-serif; } That way, people with Helvetica installed (primarily Mac users) get the real thing you intend instead of Microsoft’s half-baked rip-off. Other people get Arial, and are none the wiser.
However, I got burned recently by some unintended side effects. Basically, Helvetica on the Mac has a much smaller line-height than Arial (which is identical cross-platform). On 11px sized text, the difference is 2px, more for larger text. This has ugly consequences wherever pixel amounts matter, which is most places except body text, for example navigation menus or when you’re trying to vertically align an icon with a text label.
Even worse, it’s impossible to work around without JavaScript-based platform detection. Since I draw the line at that, I have dumped Helvetica in most cases except headline sizes. To this typographical purist at least, the differences are invisible under ~18px.
Recent comments