Different styles for a class in a external stylesheet

I have a css for a class in Extrenal stylesheet. I have to differentiate a css for that class in different browsers. how can i write different attributes for that class in external stylesheet for different browsers. I can do this by maintaining the different stylesheets. but I don't want to take extra stylesheets.

Upvotes: 0

Views: 97

Answers (1)

Jason
Jason

Reputation: 3360

Two of the ways that you can make sure to have browser specific styles are using vendor prefixes and conditional comments.

Vendor prefixes involve prefixing your styles with the appropriate vendor tag. An example would be:

.button {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px; 
   -o-border-radius: 5px; 
   border-radius: 5px;
}

There are lots of other ways to deal with these though, many explained in this CSS-Tricks article.

Conditional Comments are blocks of code between comment tags, that the older browsers will recognize and implement into the stylesheet if the appropriate browser is being used.

An example of this would be something like:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Upvotes: 2

Related Questions