Google Chrome obeys alternate CSS
So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.
Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine - for now).
I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).
At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.
However, there are (naturally!) problems with each method…
Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.
On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in - which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).
For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.
Btw, for those who need it, here’s the User Agent string i captured:
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.
I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others - well, i do what i can!)
And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.
[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.
[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.
Posted on Wednesday, 3rd September, 2008 at 1:13 am and filed under these topics: internets, uncategorized, web design
You can leave a response, or trackback from your own site.
Follow responses via the RSS 2.0 feed.
| 
|
September 3rd, 2008 at 9:13 am ::
[...] here’s an important early bug report from Jeremy Jarratt: Google Chrome wrongly displays alternate styles as if active, thus “breaking” websites that use them. (Here’s more about [...]
September 3rd, 2008 at 10:04 am ::
It’s the same bug that Safari has had on my site for years, and continues to have - the on-screen display is completely littered with print-style amends (like placing the URL as generated content after each hyperlink). It’s not unique to Chrome (but highly annoying anyway) - try viewing my site with Chrome or Safari, both will screw up: http://mattwilcox.net/
September 3rd, 2008 at 10:15 am ::
Matt, you’re awesome! I had a nagging feeling that something was amiss. You’re 100% correct, this is a Safari leftover.
September 3rd, 2008 at 1:46 pm ::
I have also noticed another bug. I tried this in safari, opera, ie, ff and I only see it in Chrome. So far it is only on *gasp* MySpace Pages.
For an example - http://www.myspace.com/rubblerats
The text is doubled.. or over emphasized.. I am not sure how to explain it. I cannot remember if that profile is private or not, so I have taken a screenshot and put it on my site http://www.aleeya.net . But, until I get the database back up in about an hour, it will not be up (sorry!).
And, it is not just on one page.. hundreds of them so far on MySpace seem to have this problem. But then again MySpace code is *cough* something left to be desired and not always correct code.. but the point being all the other browsers read it right including Windows version of Safari.
September 3rd, 2008 at 10:07 pm ::
[...] itself, but Mozilla’s been documenting and fixing them for a decade. Chrome isn’t even fully compliant with CSS yet. For more on why Chrome lacks polish, see Peter Svensson’s [...]
September 4th, 2008 at 3:59 am ::
[...] points out this isn’t without bugs (as you’d expect). As Jeremy Jarratt discovered Chrome stuffs up alternate stylesheets because 38 page Google Chrome comic that launched the browser. Yes I did say comic. One question [...]
September 4th, 2008 at 11:00 am ::
@erica:
Thanks! That’s pretty weird. I thought it was maybe changing the font-weight, but the closer i look, the more weirded out i get. It does look like the text is doubled! Natch, i reported it too.
Btw, cool site(s), you seem like a really cool geek!
September 5th, 2008 at 6:57 am ::
I have also found that both safari and chrome have a problem with nested tables using 100% width. I have a 3 column inner table that gets displayed well in FF and IE but what happens when I see it in Chrome and Safari is utter dismay, there is a javascript that changes content in column 3 based on clicks in column one using innerHMLT. What happens is that the columns are resized and the third column takes the max width. But this does not happen when I use width in pixcel…
September 5th, 2008 at 9:58 am ::
@Uday: wow, another weird Webkit bug! It’s a good thing the other 99% of this renderer rocks….
September 5th, 2008 at 2:18 pm ::
[...] to Jeremy Jarratt for the heads [...]
September 5th, 2008 at 8:20 pm ::
[...] o el detector de malware deben ser comprobados más a fondo. Del mismo modo, ya han aparecido los primeros bugs, vulnerabilidades y fallos (teclear :% en la barra produce un crash total, bastante escandaloso) [...]
September 16th, 2008 at 6:41 pm ::
there are so many advantages and features with Chrome, such as it’s speed, for example; now if only they would take care it’s flighty cookie management…
October 11th, 2008 at 1:11 am ::
@Jeremy thank you! hehehe me a geek? nah never