The Flipside of Star-HTML
… is star-pipe-html
I was trying to work around a small Firefox bug today, which involved block elements which should have automatically filled the whole viewport but weren’t, due to some perfectly ordinaly right-floated images. (More investigation into this is required, but that’s a side-issue here.) Luckily, this is a fixed-width layout, so I tried feeding the width in, which cured the problem in FF, but blew up everything in both IE6 and 7. Opera carried on working just fine.
I could have just lived with the blemish in FF, but it would have bugged the hell out of me, so I started looking for a hack that could filter out all versions of IE. (I refuse to use conditional comments. I will not pollute my HTML.)
I came across this very useful Wikipedia page detailing CSS support in all major browser engines. Studying the Gecko and Trident columns I was surprised how much IE has caught up in selector support, but there are small differences, and one was an attribute selector I’d not come across before, the Namespace Selector. In fact the Wikipedia table gets the syntax wrong, but some further Googling turned up the syntax that Firefox (and Opera, Konqueror) accept:
ns|elt (where ns is an XML namespace and elt is an XHTML element).
I tried leaving the namespace blank (which is permitted), but
|html #secondaryContent li { width:660px }
wasn’t read by FF. First I thought I had the wrong day, the wrong browser or the wrong profession for my idea, but then I realised that this selects elements whose namespace is not specified. I had picked the very worst html element of all for that selector, the one which does carry a namespace. (At least it does in my doc, which begins:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">…etc, etc.)
The correct selector to select a body element with a namespace attribute (any namespace attribute) was…
*|html
So this is it; a nice, easy-to-remember filter to EXCLUDE ALL EXPLORER VERSIONS up to and including IE7. And not to be confused with our old favourite * html (space, not pipe), which we all know selects for IE6 and below. You could combine the two to make a high and low pass filter for IE7, thus:
p.styleme { color:red } /* IE7 */
* html p.styleme { color:blue } /* other IE */
*|html p.styleme { color:pink } /* FF, Opera, Konqueror, Safari */
According to the table, KHTML understands the namespace attribute selector, but WebCore does not, so it is an open question whether this filter will be seen by Safari. Can anyone confirm this? (Don’t have a Mac around here.)
As with all CSS hacks filters, caution is advised. In this case, I wanted to fix a small blemish in FF while avoiding a blow-up in the IE minefield. I’m comfortable in not knowing the exact behaviour in Safari, iCab and other minority browsers: it’s unlikely that feeding an element the width it ought to have anyway is going to have an adverse effect. But without careful thought, havoc could easily be wreaked. Nevertheless, I thought I’d share this, as in the right circumstances it could be quite useful.
UPDATE: The hack has been confirmed to work in Safari.
Nice discovery, though by not “polluting your html with conditional comments”, you pollute your css instead.
Personally i prefer the conditional comments as i know what it will target now an in the future.
Comment by james — January 23, 2007 @ 1:44 pm
Your <code> is a bit misleading - what you mean by
IE7is in facteverything.For all those interested in affecting all versions of IE without having to specify filters for them later on, may I recommend:
p.styleme, { color:red } /* all versions of IE */
Comment by Barney — January 23, 2007 @ 5:01 pm
Why do you say that CCs “pollute” HTML?
Comment by Dan Storm — January 24, 2007 @ 8:04 pm
Barney, quite apart from the appalling ugliness of your hack, that trailing comma could easily be missed when you come back later, or when an extra selctor is added to the line.
James and Dan, I acknowledge that it’s a matter of choice whether to pollute the HTML or the CSS: I go for the CSS every time. I posted about this here.
Comment by frontend — April 13, 2007 @ 12:20 pm
Actually the xmlns attribute is for the html node and every childnode in its subtree (which does not specify another namespace).
Comment by Jonte — May 9, 2007 @ 9:13 pm
These comments have been invaluable to me as is this whole site. I thank you for your comment.
Comment by Annerose — June 3, 2007 @ 3:10 pm