Reset CSS display property to default value

by

A browser’s default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn’t settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.

While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:

For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.

This can be useful for the root element of a “widget” included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any “default” style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.

So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)

More Related Contents:

  1. Browsers’ default CSS stylesheets
  2. Working with CSS in React [closed]
  3. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  4. Hiding the scroll bar on an HTML page
  5. CSS3 background image transition
  6. Is there a CSS selector by class prefix?
  7. Position Relative vs Absolute?
  8. CSS selector for “foo that contains bar”? [duplicate]
  9. CSS reset – What exactly does it do?
  10. Font Awesome 5 shows empty square when using the JS+SVG version
  11. What is difference between justify-self, justify-items and justify-content in CSS grid?
  12. Why does `overflow:hidden` prevent `position:sticky` from working?
  13. Style disabled button with CSS
  14. What’s the difference between `all: unset` and `all: revert’
  15. Slanted Corner on CSS box
  16. How to specify an element after which to wrap in css flexbox? [duplicate]
  17. How to link a CSS file from HTML file?
  18. Build list of selectors with LESS
  19. Changing an input’s HTML5 placeholder color with CSS does not work on Chrome
  20. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  21. how to rotate text left 90 degree and cell size is adjusted according to text in html
  22. CSS fill remaining width
  23. Set div height equal to screen size
  24. What CSS3 features still need vendor prefixes?
  25. How to fix unexpected column order in bootstrap 4?
  26. Is it possible to give one CSS class priority over another?
  27. In outlook html email, float does not work
  28. Why magin:auto is not enough to center position absolute or fixed?
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. How to extend css class with another style?

Leave a Comment