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
Have some feedback? Leave a comment
Very interesting… but i would rather use head selectors like
<!--[if IE]> -->etc..Pingback: iGeek » jQuery:CSS Browser Selector
nice tip but I still prefer CSS hacks over Javascript solutions and this are Javascript solutions … but article goes to bookmarks…
“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
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!
Well yes, assuming everyone has JS enabled these days it’s good idea
Nice solution, but yes, mandatory JS makes it little hard for all-time usage
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.
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 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
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 .someclassin same style sheet than dragging new fileDejan, 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.
Why jquery 1.0a? I tried this with the latest version of jquery and I get an error.
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
Pingback: Best Of February 2008 | Best of the Month | Smashing Magazine
Pingback: Valontuoja » Blog Archive » LINKKEJÄ 29-02-2008 #2
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.
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.
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.
Pingback: mStudiosTALK | Simplicity and your style sheets.
Not bad at all, but this topic is rather little of interest. Please do not disappoint your readership.
Your blog is getting better and better! Previous posts were good, but this one is just FABULOUS.
very nice and useful
thank you
So the jquery selector won’t address browser versions?
%100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.
Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı
wooow I love using CSS