What is use of 'initial' value in CSS?
browser, css, html
Solution
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).
Problem
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?