What Is Use of 'Initial' Value in Css

What is use of 'initial' value in CSS?

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).

What is the difference between initial & default in CSS?

The initial state doesn't necessarily pull from the browser's stylesheet.

If the color property, in this instance, is not defined within the element's spec table or there is no definition for that element then it will have an initial property of nothing or in the case of a color value, rgb(0,0,0) - or black.

Anchor (<a>) tags, do not have a defined initial color property, so it will render as rgb(0,0,0);

Here you can see in the dev inspector in the computed tab:

Sample Image

Here you can see an <a> tag is not defined in the spec table.

https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

Here's the browser styles being set on the anchor with no color property being defined, so the browser uses it's stylesheet:

Sample Image

What is position initial in CSS

initial is not only used for position, it is a generic value which you can set it for any property in CSS.

From MDN:

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.

When using initial value, it will pick the value as defined in the spec as properties default.

Worth noting that this is not supported in IE at all as of now, not even in IE 11, so don't use it unless you dumping support for IE users.

How this works?

Think of it that you have an element p with nested span with color set to orange, and later you use initial for span it will fall to a default value as mentioned in w3c spec.

Demo

span {
  color: red; 
  /* won't make any difference */
}

p {
  color: orange;
}

p span {
  color: initial; 
  /* sets to initial value defined in spec/user-agent */
}

Do not confuse it with inherit

inherit is something different all-together compared to initial. Where initial will pick the value from :root, inherit will take the value from it's parent. :root here am talking about initial values defined in the spec and is adapted by browsers.

Demo

p {
  margin-left: 20px;
}

p span {
  margin-left: inherit;
}

inherit is useful when the parent property value is not inherited by default, for example margin. Here, it will pick the value from it's parent declaration and not the :root

all: initial vs. using CSS resets

You are correct that initial resets to initial values for a given CSS property, but note that CSS properties have no initial value for each element-- they only have an initial value for that property, which will be the same for any and all elements it is applied to. For instance, the color property spec has a single initial value defined-- not a list of initial values to which it should be set for every element. So when you use it in conjunction with all, using:

* {
  all: initial
}

...you are telling the browser to take every property of every single element and reset it to the property's default value. So, for instance, the display property spec defines its initial value as inline-- so every single element on your page will be displayed as inline.

What is the difference between the initial and unset values?

According to your link:

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

Here is an example:

pre {  color: #f00;}.initial {  color: initial;}.unset {  color: unset;}

<pre>  <span>This text is red because it is inherited.</span>  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span></pre>

Initial color... how's it work?

As stated in the documenation:

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

And

The initial value of a CSS property is its default value, as listed in
its definition table.^ref

So unlike you think, initial will put the initial value before you set your background-color and it's not the value you set.

Since JS add inline style you can simply delete that style to get back to the yellow color without extra variable as your style remain defined but is simply overridden:

testDiv.style.backgroundColor = "red";
//empty the style attributetestDiv.style="";/*ORtestDiv.style.backgroundColor="";*/

#testDiv{  background-color: yellow;  width:40px;  height:40px;}

<div id="testDiv"></div>

What's the difference between CSS inherit and initial?

The initial value given in the summary of the definition of each CSS property has different meaning for inherited and non-inherited properties.

For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.

For non-inherited properties the initial value is used, for any element, when no value is specified for the element.

An initial keyword is being added in CSS3 to allow authors to explicitly specify this initial value.

The inherit keyword means use whatever value is assigned to my parent.

Source : https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value

CSS default value of a property

Yes, display: normal is invalid.

The default value of display may depend on what you mean with "default".

Initial value:

Each property has an initial value, defined in the property’s
definition table. If the property is not an inherited property,
and the cascade does not result in a value, then the specified
value of the property is its initial value.
The initial value of display is inline.
Inherited value, in case the property is inheritable

Inheritance propagates property values from parent elements to
their children. The inherited value of a property on an element
is the computed value of the property on the element’s parent element.
display in not inheritable, so this is not relevant.
User agents style sheets:

Conforming user agents must apply a default style sheet (or
behave as if they did). A user agent’s default style sheet should
present the elements of the document language in ways that satisfy
general presentation expectations for the document language (e.g., for
visual browsers, the EM element in HTML is presented using an italic
font). See e.g. the HTML user agent style sheet.
In that stylesheet, browsers style some elements with display: block, display: table, etc.
User style sheets,

The user may be able to specify style information for a particular
document.
Author stylesheets
These are your stylesheets.

The cascade will result in the latest applicable (in fact it's more complicated because there are things like specificity, scoping and !important).

When you want to set some property to a default value, you can use

initial (introduced in CSS Cascade 3)

the property’s initial value becomes its specified value.
Then, display: initial will be equivalent to display: inline.
inherit (introduced in CSS2)

the inherited value becomes the property’s specified and
computed values
Then, display: inherit will use the value of the parent element (or the initial value for the root element).
unset (introduced in CSS Cascade 3)

if it is an inherited property, this is treated as inherit,
and if it is not, this is treated as initial.
Since display is not inheritable, display: unset will be equivalent to display: initial, that is, display: inline.
revert (introduced in CSS Cascade 4)
When used in an author stylesheet,

Rolls back the cascade to the user level, so that the specified
value is calculated as if no author-level rules were specified
for this property.
This is probably what you want.

Understanding how initial values work with inherited and non-inherited properties

Initial Value

The initial value of a property is the value assigned to the property in the W3C specification definition.

For example:

Sample Image

If the author or browser do not define this property, then CSS will refer to the initial value.

Inherited Properties

For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.

Some CSS properties can inherit their value. Others can not. This behavior is also established in the property definition (see Inherited in image above).

If a property can inherit, that means the property will – in cases where the value has not been specified – take the computed value of that property from the parent.

Because a property that can inherit will always look to the parent for a value when it is not specified, there is no need for the initial value of the property to appear anywhere in the document, except on the root element.

An inheritable property anywhere in the document, no matter how deeply nested, will keep looking up one level for a value, until it reaches the root element. That's why an initial value only needs to exist on the root element.

Non-Inherited Properties

For non-inherited properties the initial value is used, for any element, when no value is specified for the element.

Properties that don't inherit will not look to their parent for guidance. Hence, the initial value is applied in all cases when it is not specified.

What Is Use of 'Initial' Value in Css