StylizedWeb is a web design trends and tutorials blog, maintained by Ross Johnson who also runs a web design company and design blog.

Categories Archive

Popular Posts
Advertisement
Premium WordPress Themes, Theme Galaxy Basecamp
Najbolje ponuda IT poslova u Srbiji na itposlovi.info Advertise on Stylized Web

CSS Browser Selector

add to Save to Delicious Save to Stumble Save to Digg

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.

example

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

View demo page

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

View demo page

Have some feedback? Leave a comment



What do you think?





24 Responses so far

By Rebecca
on October 15, 2008

So the jquery selector won’t address browser versions?

By Orides Tomkiel
on May 28, 2008

very nice and useful
thank you

By nik888
on April 9, 2008

Your blog is getting better and better! Previous posts were good, but this one is just FABULOUS.

By Lin
on April 6, 2008

Not bad at all, but this topic is rather little of interest. Please do not disappoint your readership.

By baker
on March 3, 2008

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.

By John K
on March 3, 2008

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.

By John Faulds
on March 1, 2008

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.

By Dejan
on February 27, 2008

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 ;)

By kristin
on February 27, 2008

Why jquery 1.0a? I tried this with the latest version of jquery and I get an error.

By Fredrik W
on February 27, 2008

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.

By Dejan
on February 27, 2008

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 ;)

By Fredrik W
on February 27, 2008

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 :)

By Harmen Janssen
on February 26, 2008

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.

By Bryan Migliorisi
on February 26, 2008

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.

By Ivan
on February 26, 2008

Nice solution, but yes, mandatory JS makes it little hard for all-time usage ;)

By Dejan
on February 26, 2008

Well yes, assuming everyone has JS enabled these days it’s good idea ;)

By Dave
on February 26, 2008

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! ;)

By Martin
on February 26, 2008

“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

By nikola
on February 26, 2008

nice tip but I still prefer CSS hacks over Javascript solutions and this are Javascript solutions … but article goes to bookmarks… ;-)

By Stan
on February 26, 2008

Very interesting… but i would rather use head selectors like
<!--[if IE]> –> etc..

  1. Mar 13, 2008: mStudiosTALK | Simplicity and your style sheets.
  2. Feb 29, 2008: Valontuoja » Blog Archive » LINKKEJÄ 29-02-2008 #2
  3. Feb 29, 2008: Best Of February 2008 | Best of the Month | Smashing Magazine
  4. Feb 26, 2008: iGeek » jQuery:CSS Browser Selector