Enteries RSS (1017) 02
2008
11:57 am
The basic idea for this comes from this question “What if you won’t have to code those ugly CSS hacks for those browsers that just won’t show you what you want them to?”. Again writing about cross browser problems and solutions like on “IE7 JS library review“.
I’ve ran into two solutions for this. I personally haven’t tried this but, on the demos it seems to be working and i think it’s very good idea.
Using jQuery
First one is using jQuery library, and will present how to do these browser selectors so easily with jQuery. First thing you need to do, is to get the jQuery library, version 1.0a, if you don’t have it yet.
Now all you have to do is include the jQuery file, and the following piece of code
$(document).ready(function(){
$(’html’).addClass($.browser);
});
Now you can preprend your styles with .msie, .mozilla, .opera, .safari or .other depending on the targeted browser. Written by Valentin Agachi
Demo
Pure Javascript
In this case all you have to do is to add small Javascript in your tag which you can download directly here . Written by Rafael Lima
html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
Available OS Codes [os]:
- win - Microsoft Windows
- linux - Linux (x11 and linux)
- mac - Mac OS
Browser Codes [browser]:
- ie - Internet Explorer (All versions)
- ie6 - Internet Explorer 6.x
- ie5 - Internet Explorer 5.x
- gecko - Mozilla, Firefox, Camino
- opera - Opera (All versions)
- opera8 - Opera 8.x
- opera9 - Opera 9.x
- konqueror - Konqueror
- webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira
Demo
del.icio.us (
StumbleUpon
Digg
Wong it
22 Responses, Not bad at all, but this topic is rather little of interest. Please do not disappoint your readership.
There-in lies the problem as many people have posted. This is *one* more way to fix it when you know you’re just going to have a “few lines” of CSS to fix - and not a separate stylesheet’s worth of code.
I’d use this exactly as you intended - when IE needs just one or two lines of CSS, and I’d use conditional commenting if it grows beyond that to save non-IE users the suffering of a useless download.
March 3rd
2008
10:14 am
I really don’t like this idea at all, like many of the post written here it’s a lazy way of coding CSS. First of all, you should use Eric Meyer’s “reset CSS” styling, it will help you to reset all the browser’s stylesheets and create less painful CSS coding for Internet Explorer.
The title of this article should change as it is really misleading to the readers.
I’m not a fan of this idea either if for no other reason than that it promotes lazy CSS coding. I often see questions being asked by CSS newbies about how to serve up different stylesheets to different browsers when the real answer lies in getting the CSS & HTML right in the first place.
February 27th
2008
18:24 pm
Frederik, I’m not saying it’s worse alternative, I’m just saying what i would prefer and that’s one master CSS instead usually 3 - main style, IE6 and IE7 fix…
Kristin, well it’s written by Valentin Agachi and as i said i haven’t tried it yet so i don’t know 
Why jquery 1.0a? I tried this with the latest version of jquery and I get an error.
Dejan, why would existing “hacks” for IE that are based on it’s misinterpretation of CSS selectors be a worse alternative? Read my comment underneath yours.
February 27th
2008
9:39 am
I have to say that I agree with Bryan Migliorisi, if i have just 2-3 hacks for IE i would rather use few lines of .ie .someclass in same style sheet than dragging new file
I dislike this idea.
Pretty much the only browser that needs hacks is IE6, and rarely IE7. Conditional comments should suffice in both cases. I’m even an advocate for the * html hack and *+html or whetever the IE7 equivalent is (it’s not invalid css, just an invalid interpretations of the css spec of IE).
Some people browsing the web haven’t got Javascript enabled (~5-10% depending on the demographics of your users). Breaking the layout for those users seem stupid to me since there are other ways to solve the initial problem that works for everyone 
First of all; Javascript isn’t enabled everywhere, so there’s a chance your code will never get executed by a browser.
Second; I’m sure the jQuery guys have done their homework, but browser detection is never a good idea since the navigator information is unreliable and in some browsers even under the user’s control.
Conditional comments for IE work fine for me and hacks for other browsers I rarely need.
I think this is a great idea actually. Its perfect for those situations where you have very few browser hacks, and you dont want to make your CSS invalid.
February 26th
2008
17:00 pm
Nice solution, but yes, mandatory JS makes it little hard for all-time usage
February 26th
2008
16:26 pm
Well yes, assuming everyone has JS enabled these days it’s good idea
Good idea, but falls over if no javascript enabled. I still feel the best approach is to design without using hacks (adjust design and build technique so that hacks are not needed!), with maybe the exception being to use conditional statements for our old foe ie6.
However like I said this is a great approach with jquery and i would use it if 100% browsers had JS enabled…ah if only!
“red + 10px border - javascript enabled in IE”
on IE 7 I see the box yellow with no border, and JS is enabled
also with all other browsers, because of using $(document).ready the right styles are applied only once all the document is loaded… not the best solution is some cases
nice tip but I still prefer CSS hacks over Javascript solutions and this are Javascript solutions … but article goes to bookmarks…
February 26th
2008
12:08 pm
Very interesting… but i would rather use head selectors like
<!--[if IE]> --> etc..
- Mar 13, 2008: mStudiosTALK | Simplicity and your style sheets.
- Feb 29, 2008: Valontuoja » Blog Archive » LINKKEJÄ 29-02-2008 #2
- Feb 29, 2008: Best Of February 2008 | Best of the Month | Smashing Magazine
- Feb 26, 2008: iGeek » jQuery:CSS Browser Selector
Ivrfszvk:
April 9th
2008
11:39 am
Your blog is getting better and better! Previous posts were good, but this one is just FABULOUS.