what is the purpose of having duplicate styles in css?

Question

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?

Answer 1

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.

Answer 2

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.