Targeting Chrome with Javascript
Disclaimer: Do not use a javascript hack to fix each browser rather than adjusting your style sheets or using a reset style sheet first to solve the big stuff. This is last resort stuff here.
I managed to find a way to have Chrome show styles only set for Internet Explorer. Don’t ask me how but it has something to do with pulling Twitter updates via a js file into a custom WordPress template. The updates themselves already have styles attached to them before I pull them in so I have to undo/override them on my side.
This worked for all browsers using a conditional statement for IE and that straightened it all out – except Chrome. I know what you’re thinking. It can’t be broken in Chrome if it works in Safari. They’re both based on Webkit so they have to obey the same rules. Well, I found one they don’t agree on.
Anyway, here’s a last resort solution for you that will target any browser you want to via the style sheets by just adding the browser name to the selector like .chrome. I was led to the solution via Nathan Rice’s post on the subject but I used the one described in the contents since I couldn’t get his to play nice with the rest of what was going on. Here’s that solution:
Just upload this file to your server, call the script in the header of the page like this:
<script src="css_browser_selector.js" type="text/javascript"></script>
and then just set your trouble maker selectors using the browser name as a class. So let’s say you want links to be red for IE 6, black for Chrome and blue for Firefox 3.5. You’d do this in your style sheet:
.ie7 a { color: red; }
.chrome a { color: black; }
.ff3_5 a { color: blue; }
Pretty snazzy and works like a charm. Again, don’t use unless you have to but it’s great to know this is out there. There are tons more usage examples and all the browser class titles here.
Related articles by Zemanta
- Is Google Chrome Usage Soaring at Firefox’s Expense? [STATS] (mashable.com)
- From Zero to Almost Ten Percent: How Chrome Surpassed Safari (thechromesource.com)
- Chrome Gains More Converts, Edges Out Safari (wired.com)
- Chrome Passes Safari To Become #3 Most Used Browser In U.S. [Browsers] (gizmodo.com)
- Chase Bank Fail: “Use IE6? (lockergnome.com)
