CODEWITHSUNDEEP
htmlcssweb
user1233587
user1233587

Reputation: 2093

what is the purpose of having duplicate styles in css?

i have seen some people in css write something like

.together
 {
display:inline;
display:inline-block;
 }

not just restricted to display style, but say background-size or background-image for an example

what is the purpose of this? i mean the second one is going to override the first one, so why bother?

Upvotes: 4

Views: 1677

Answers (3)

Narendra
Narendra

Reputation: 3117

Lets take the following example.

<html> 
<head>      
<style>
.carlist
{
    background-color: red;
    height: 30px;
    margin: 10px;
    margin: 20px;
}
</style>
</head>

<body  onload="loadCars()">

Check div style.
<div  id="mydiv" class="carlist"></div>

</body>
</html>

In the above example we have 2 margins declared. I checked and found that the 2nd declaration is accepted by browser(FF,IE,Chrome). So I think if we use this for browser compatibility then the most browser specific style should be declared at last. But there are other ways to define browser specific styles. So its better to have single attribute defined.

Upvotes: -2

HaleFx
HaleFx

Reputation: 857

There's a possibility that it's written that way for browser-compatibility. They probably want the element to have a display value of inline-block, but not all browsers support it on all elements. Sitepoint has a good reference for compatibility of the display property.

The background property is a shorthand for all of the background-related properties, so it's common to set background on one selector and then only overwrite specific background properties later on other selectors. And again, you might have multiple background declarations for browser compatibility.

Upvotes: 6

Jon Newmuis
Jon Newmuis

Reputation: 26530

Usually this type of behavior indicates a browser hack for compatibility. When browsers detect a property or value they do not know, they ignore it. Thus, if you place the most widely-accepted properties first, browsers will "fall back" to that behavior if none of the latter properties are compatible.

Upvotes: 7

Related Questions