/CSS/ Manage multiple browsers
03/06/2008 | Filed under Develop > CSS
Browser compatibility continues to improve, but each browser still has its quirks. Craig Grannell shows you how to target specific browsers with override style sheets
Web designers with long memories will no doubt remember a time when, if you wanted to do anything fancy, you were pretty much resigned to writing a version of a website for each browser on each major platform. Those times are now long gone, but anyone considering the browser landscape a perfect garden of joy and happiness is either delusional, mad or lying through their teeth. Yes, web standards have improved things, meaning that if you create compliant code, you’re more likely to get consistent results across browsers. But the fact remains that every browser out there has its quirks, and while problems should generally be dealt with by amending your design on a global basis, sometimes that’s not possible or practical.
Hack attack!
Ever since CSS broke through in a major way, there have been hacks designed to cater for browser shortcomings. Most of these target Internet Explorer for Windows, since that browser’s support for web standards has typically lagged behind its contemporaries. However, other hacks have attempted to target Opera, Safari and Gecko-based browsers with varying degrees of success. The reason for them not working better is that most hacks exploit bugs in browser engines, and by exploiting a bug to enable or disable a rule or set of rules, you’re relying on the bug not being squashed, and also other browsers not suffering from the same problem.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Rainer Feike / 04/06/2008 / 07:35 / http://www.anwalt-seiten.de
In the end of the day, all hacks are just hacks. Imho the CSS Consortium (or whoever specs CSS) should implement a top-level selector for the browser.
Should be possible to target an element in ie6 like "ie6 div#content ul.list" etc. and in more modern browsers like "moz3>html>body..." - that would be cool - and it would lower the risk of upgrades to browsers.
Cheers Rainer
Awarnach / 04/06/2008 / 09:17 / http://awarnach.deviantart.com/
Why do we still 'need to' design/use hacks for correct use in IE5.5? We've got IE6 and IE7, beta IE8 is out. Here in the Netherlands and I even think global, the percentage of web surfers that use IE5.5 or less is nihil.
Craig Grannell / 05/06/2008 / 19:38 / http://www.reverttosaved.com
"Why do we still 'need to' design/use hacks for correct use in IE5.5?"
To be fair, the article here was written almost a year ago, and at that point, IE 5.5 use was way higher than it is today. That said, I still test sites in IE 5.5 and ensure they work in a basic level. Most hacks for that browser are pretty easy to add globally anyway.
As for hacks in general, I think conditional comments are a great way to deal with IE's inadequacies. I'm not sure browser-specific selectors would be any more useful. In fact, such things might encourage browser manufacturers to be less standards-aware.
R.J. Adams / 06/06/2008 / 21:23 / http://linkbuildingbible.com
Yah, being a designer, when creating websites, it sucks to see silly errors in one browser, especially one that is rarely still being used. But, in order to get the maximum readership, you need to have most, if not all, of your bases covered. Thanks for these hacks!
Wallace / 08/06/2008 / 02:16 / http://www.iwanted.ca
What inadequacies are you referring to? I personally haven't experienced any problems with browser compatibility, while I do prefer Firefox over IE.
Can you elaborate?
Henry / 08/06/2008 / 10:20 / http://www.unmannedsystem.com/
Great ideas for overrides but at this point in time why even bother, like you said this over a year old.
Gerardo / 24/06/2008 / 01:31 / http://www.volkdefense.com
"Why do we still 'need to' design/use hacks for correct use in IE5.5?"
This is a reply to that, And what i say to that is I agree with that. Mainly everyone (the world bascially) is using Firefox, Opera, or Safari. IE no longer matters, it is too vulnerable in too many places and can put your system at risk as well as your data and websites if an Exploit should hit IE.
Pete / 19/07/2008 / 18:53 / http://www.orangepeelstudios.net
If your going to produce a successful website, especially a commercial one you need to make sure it looks right on most browsers (IE6, IE7, Firefox, Opera, Safari - these are the ones we test on both Mac and PC). We only develop down as low as IE6 since this still seems to be kicking around especially amongst larger organisations/networks where the IT manager just doesn't want to deal with updating them all.
Using these hacks gets the job done but it's not ideal since if they use javascript then you need to be sure that's going to be turned on in the clients browser and its messy etc. I try where possible to design sites that use a layout that is likely to only throw minimal problems with regards to CSS 'quirks' and I think this is the best way, avoid getting into the 'hack' situation through better education of your designers about these quirks/just working together before getting a client all hyped up.
I don't think these quirks will ever end until the whole world only uses one browser, but if it was too easy we would all be looking for new jobs!
Craig Grannell / 24/07/2008 / 16:04 / http://www.reverttosaved.com
OK, some quick responses.
@Gerardo: IE no longer matters? Tell that to the 70%+ of the web-surfing public using it. IE remains the most popular browser, so ignore it at your peril.
@Wallace: The inadequacies I refer to are IE's lack of support for chunks of the CSS spec, or its incorrect application thereof. This was severe with 5.5, problematic with 6, but still remains for 7. Do a web search for something like IE CSS support.
@Henry: Yeah, some of the article's out of date, but some of the bits are worth noting, and conditional comments are still relevant, not least for dealing with IE7 and IE6's flaws.
Tom / 29/08/2008 / 05:37 / http://charitii.com
IE definitely matters. It's not a great browser, but there are simply too many people using it to ignore.
Getting the different versions of IE and firefox to play nice on my last website was a complete nightmare... :(
Mike / 24/09/2008 / 20:32 / http://www.youngcomposers.com/forum/notation-software.php
I know that people generally target IE, but what about Firefox? Now that Firefox has been gaining popularity and it has been out for awhile now, I would assume that it would eventually become a target for hackers.
alex / 23/06/2009 / 14:08
Gotta love that Firefox winning formula. See what Opera does...then do exactly that. For a moment I thought Firefox was innovating with its "awesome bar" and even read several books on this problem ( http://www.ebook-search-queen.com/ ) But upon inspection, I found that typing "awesome bar" in opera displays...this page.
