As anyone meddling with CSS on a daily basis knows, one of the biggest headaches is how to handle the subtle differences in how different browsers like to render your pages. Naming no names but far the worst offenders seem to be the earlier versions of Internet Explorer... but every now and again other browsers have their moments too. And as more and more browser versions and devices are becoming available, this issue could still be around for a long time yet.
You can get a copy of the source code here.
Our site has just been through a redesign and this problem reared it's head once again so rather than try and get around issues with the different hacks people have written about before (prefixing IE specific CSS with an asterisk etc etc), I came up with a simple but reasonably elegant way of doing this, without the need for the browser to be requesting it's own style sheet to override the main style sheet.
First of all we need to determine the browser making the request. I chose to do this by creating an Html Extension Method so we can encapsulate all this logic behind a nice clean method to use in our Razor view.
The GetBrowserDetails method is a little messy but anyone who has messed around with the user agent string will know it's a little confusing and even though it looks like a browser can be one type, it's actually another (this is mainly around Safari for some reason). The main thing is it works across IE(6-9), Firefox, Chrome and Safari (including iPad and iPhone). It can obviously be amended and extended as anyone sees fit.
But essentially that is it, I just need to use the string returned as my class in my Razor views. I have added it right at the top to my <body> tag, this way it only needs to be used once and we can override anything in our page from here. So in my _Layout.cshtml...
And now when you browse your site your <body> tag should have a class relating to the browser you are using.
Now all that is left to do is override these styles to get the desired affect, for example if you wanted to change all the <h2> tags in your site to different colours according to it's browser type...
Obviously I would expect people would use this to help with more serious rendering issues (paddings and margins etc) but you get the point, I can target any element on the page and change it according to how I want a certain browser to render it. And once the simple foundations are in place, it's very easy to do in my CSS.
Not only that, but since it's all based around CSS selectors, you can now easily target browser specific elements in jQuery too, just in case you want to disable that pop out menu that doesn't work properly in IE 6!
You can get a copy of the source code here.
If you have any thoughts or comments then please let me know.
Thanks
Jason
