What is use of ‘initial’ value in CSS?

by

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

More Related Contents:

  1. Why do browsers match CSS selectors from right to left?
  2. css ‘pointer-events’ property alternative for IE
  3. Browser Caching of CSS files
  4. issue with CSS media queries(scrollbar)
  5. How to disable CSS in Browser for testing purposes
  6. Force browsers to load CSS before showing the page
  7. How do I make Firefox auto-refresh on file change?
  8. Is there a way to tell browsers to honor the jpeg exif orientation?
  9. How to always show the vertical scrollbar in a browser?
  10. Which browsers support data URIs and since which version?
  11. Specific order of inline-block elements on mobile and desktop devices
  12. Put icon inside input element in a form
  13. Can I change the checkbox size using CSS?
  14. How to blur(css) div without blur child element [duplicate]
  15. Should I specify height and width attributes for my IMGs in HTML?
  16. Preventing double borders in CSS Grid
  17. CSS ”background-color” attribute not working on checkbox inside
  18. How to center an element in the middle of the browser window?
  19. Turn off iPhone/Safari input element rounding
  20. How do I center list items inside a UL element?
  21. Styling an anchor tag to look like a submit button
  22. Why does CSS not support negative padding?
  23. CSS data attribute new line character & pseudo-element content value
  24. How can I create a row-based masonry layout using CSS?
  25. Why using absolute position causes the div to be on top?
  26. How to put img inline with text
  27. How to flatten nested divs to display them in a CSS grid?
  28. How to place Text and an Image next to each other in HTML?
  29. How to make input autofocus in internet explorer?
  30. Image center align vertically and horizontally [duplicate]

Leave a Comment