Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is use of 'initial' value in CSS?

Tags:

html

browser

css

I thought that the initial value would restore initially rendered styles (as applied by a browser's internal user-agent stylesheet).

Example:

div.inline {   display: inline; }  div.initial {   display: initial; } 

I expected the div.inline rule would display <div class="inline"> in inline mode, and the div.initial rule would display <div class="initial"> using a div's original display value of block.

But when I explore this, <div class="initial"> displays inline. Am I wrong? Can anyone elaborate more on this?

like image 666
NkS Avatar asked Aug 30 '13 13:08

NkS


People also ask

What is the use of initial in CSS?

The initial CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property, including the CSS shorthand property all .

What is initial value CSS?

The initial value of a CSS property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not: For inherited properties, the initial value is used on the root element only, as long as no specified value is supplied.

What is initial position in CSS?

position: initial means that it will catch the default(initial) value so it will catch position: static . You have to use position: initial when you have changed the default value of the position of an element and you want to back to the default CSS position property for this element.

What is initial and inherit in CSS?

inherit : Get the property from the parent element. initial : The default value for the property (the browser default). unset : Acts as either inherit or initial. It'll act as inherit if the parent has a value that matches, or else it will act as initial.


2 Answers

The initial value (not attribute) denotes the initial value of the property, as defined in CSS specifications: “The ‘initial’ keyword represents the specified value that is designated as the property's initial value.” Thus, its meaning depends on the property, but not on anything else, e.g. not on the browser or on the element that the property is being applied to. So it does not mean browser default.

For example, for the display property, initial always means inline, because that’s the designated initial value of the property. In the example case, the browser default is block, since the element is div.

Thus, the initial value is of limited usefulness. Its main effect seems to be to confuse people, due to misunderstandings. A possible use case is for the color property, since its initial value is browser-dependent (mostly black, as we know, but not necessarily). For it, initial means browser default, since that’s how the property has been defined, A similar use case is for font-family: by declaring font-family: initial, you get browser’s default font (which may depend on browser settings).

The usefulness is further limited by lack of support on IE (even IE 10).

like image 164
Jukka K. Korpela Avatar answered Oct 02 '22 10:10

Jukka K. Korpela


Source

The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.

/* give headers a green border */  h2 { border: medium solid green }   /* but make those in the sidebar use the value of the "color" property */  #sidebar h2 { border-color: initial; } <p style="color:red">      this text is red         <em style="color:initial">            this text is in the initial color (e.g. black)        </em>     this is red again  </p>  
like image 33
John Conde Avatar answered Oct 02 '22 10:10

John Conde