Geek Answers Handbook

What is the purpose of creating repeating styles in css?

I saw some people in css write something like

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

not limited to just displaying the style, but tell me the background size or background image for example

What is the purpose of this? I mean the second will redefine the first, so why bother?

+4
source share
3 answers

It is likely that it is written in this way for compatibility with the browser. They probably want the element to have a display inline-block value, but not all browsers support it for all elements. Sitepoint has a good link for display property compatibility .

The background property is an abbreviation of all the properties associated with the background, so background is usually set to one selector and then only overwrite certain background properties later on with other selectors. Again, you may have several background declarations for browser compatibility.

+5
source

Typically, this type of behavior indicates browser compatibility. When browsers discover a property or value that they do not know, they ignore it. Thus, if you first place the most widely accepted properties, browsers will “revert” to this behavior if none of the latter properties is compatible.

+7
source

Let's look at 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 declared 2 fields. I checked and found that the 2nd declaration is accepted by the browser (FF, IE, Chrome). Therefore, I think that if we use this for browser compatibility, then the most browser-specific style should be declared. But there are other ways to define browser styles. Therefore, it is better to have one attribute.

-2
source

More articles:


All Articles