CODEWITHSUNDEEP
.nethtmlcss
user576510
user576510

Reputation: 5905

how to write browser specific css properties?

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.

Upvotes: 2

Views: 2211

Answers (5)

Vidiya Prasanth Pappannan
Vidiya Prasanth Pappannan

Reputation: 723

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/

Upvotes: 2

Stichoza
Stichoza

Reputation: 4609

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/

Upvotes: 1

Joe Conlin
Joe Conlin

Reputation: 5994

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

Upvotes: 1

jackcogdill
jackcogdill

Reputation: 5122

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.

Upvotes: 3

user1877337
user1877337

Reputation:

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/

Upvotes: 0

Related Questions