Saturday, April 14, 2012

Browser Specific Definitions - CSS


Read : How to define CSS in General HTML and Blogger and as tag?

Lets take the following example,
.textborder{-moz-border-radius:0.5px}

In the above code, I've mentioned something -moz- before border attribute. Why?
All browsers doesn't support basic codes. Each browser has their own attribute definition.
Attribute to be added BrowserExample
-moz-Mozilla-moz-border-radius:0.5px;
-o-Opera-o-border-radius:0.5px;
-ms-Internet Explorer-ms-border-radius:0.5px;
-webkit-Safari & Google Chrome-webkit-border-radius:0.5px;

So? What If my webpage will be viewed in all of these browsers? How will I define  for all browsers?
Yes! You can define for all browsers. You should define the CSS as follows,
.textborder{
border:0.5px solid black;
-moz-border-radius:0.5px;
-o-border-radius:0.5px;
-ms-border-radius:0.5px;
-webkit-border-radius:0.5px;
border-radius:0.5px;
}

I have mentioned border-radius at the end. Why?
When we've left any of the browser in browser specific definition, the one without browser specific definition may take effect.

Now, the CSS result can be viewed in all browsers as below.

For any suggestions for this article, feel free to suggest via comments.

No comments :

Post a Comment