2

Please guide me how to write browser specific css properties (not classes or ids) ? I can't manage different css files for different browsers. I want to use same css file and classes but in case of differences I will mention browser pacific properties.

Please guide me how to do that.

1
  • Sounds like you want vendor specific prefixes (eg -webkit, -moz), but those only work on certain properties. Regardless you will be writing separate code for different browsers. Why not use different CSS files or apply a browser specific tag to the body of your html?
    – Enrico
    Dec 5, 2012 at 2:53

5 Answers 5

3

Please be more specific, but when you're generally writing css you want it compatible with all browsers.

Things like webkit vary, (in firefox it's moz) but usually if you look up certain things in css there's a way to do it in every browser.

background-image: -webkit-linear-gradient(left, #cccccc, #333333, #cccccc);
background-image: -moz-linear-gradient(left, #cccccc, #333333, #cccccc);
background-image: -ms-linear-gradient(left, #cccccc, #333333, #cccccc);
background-image: -o-linear-gradient(left, #cccccc, #333333, #cccccc);

For example, the above code should work in most modern browsers, and if all of them fail then just have a fallback (plain black for this example).

Also, you can always just use different css files, it's not very difficult.

2
  • yentup please guide how to write for IE6 or IE7 ? What about Safari ?
    – user576510
    Dec 5, 2012 at 3:26
  • Safari uses webkit like Chrome, and you have to look up the compatibilities for IE, but you can do things like: <!--[if IE 8]> <style></style> <![endif]--> Dec 5, 2012 at 12:16
2

You can use jquery to apply different css classes

if($.browser.msie){
$("#someDiv").addclass("SomeClass");
}

$.browser.msie is for Internet Explorer
$.browser.chrome for chrome
$.browser.mozilla for mozilla
$.browser.safari for safari
$.browser.opera for opera

This way would give you flexibility when it comes to problems based on positioning

reference : http://api.jquery.com/jQuery.browser/

1

Very simply, you either have to write out each vendor prefix as needed OR use a CSS preprocessor such as LESS.

Prefixr also works as a plugin for Sublime Text, if you happen to be using it (which I do except I use LESS).

1

I guess you mean Vendor Specific Prefixes. I've found something interesting you might like: http://css3please.com/.

Check this out for other related tools: http://css-tricks.com/tldr-on-vendor-prefix-drama/

0

If I may could I recommend a different approach. Instead of writing for each browser could you test for the feature and then modify your code according to that? If so this project will be helpful:

http://modernizr.com/

1
  • again after testing I will need to fix the code. For this I will need to know how to write broswer spacific CSS :)
    – user576510
    Dec 5, 2012 at 3:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.