Reset CSS display property to default value

Question

Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.

Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...

Bodega

It's now possible using unset. – Batt

display test: unset, initial, inherit, revert – Etam

I know this question only asks about display being reset to browser defaults but for the many people who will visit this page looking to reset all the attributes back to browser defaults use: .myclass { all: unset; } div { all: unset; } etc. – Huppert

Answer 1

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

Masonite

Ah, why must browsers always be so slow to get in the good and useful stuff :p And why must users be so slow upgrading... anyways, that is exactly what I wanted! – Bodega

@Svish: Turns out I misinterpreted what initial actually does. I've updated my answer. – Masonite

But doesn't that end up being kind of the same thing? Doesn't matter if it's the browser or me through CSS who set it to something initially as long as I can get it back to that after hiding something? Would perhaps be problematic if I initially set it to display:none though... if I understand this correctly... – Bodega

@Svish: CSS defines initial values on the property level, not on a per-element basis as I originally thought. In this example, the initial value of display is always inline (w3.org/TR/CSS21/visuren.html#display-prop), regardless of whether it's on a div or a span. A div element is display: block by default according to HTML, and not CSS, so it's up to the browser's UA stylesheet to say div { display: block; }. – Masonite

There is in general no way “to look up the default value”, because browsers may have different default values. – Guardroom

"CSS defines initial values on the property level, not on a per-element basis as I originally thought." -- I actually had to re-read it a few times to believe it. (Since CSS seems always be applied in (some sort of) element context, not supporting it here suggests something non-trivial to learn -- does anyone know the rationale?) – Gormless

@lunakid: The initial value of a property gives it a starting point for the cascade - if no value is resolved for a given property for an element, then that element must use the initial value for that property per the spec; otherwise, the browser isn't going to know how to render the element. Browser assign different default values for different elements depending on each element, but those browser defaults are a step above the initial value in terms of the CSS cascade. For elements that don't have any browser default (this includes unknown elements), the initial value provides a fallback. – Masonite

@lunakid: While the cascade happens on a per-element basis, this cascade affects any and all elements in a document tree, regardless of what type of element is being rendered, so CSS has to be type-agnostic in that sense. I'm not sure why CSS couldn't define some sort of UA default level for the purposes of cascading and then introduce a keyword for reverting to that UA default, though. – Masonite

Thanks. I'm not sure I understand if this indeed justifies defining PROPERTY_NAME:DEFAULT_VALUE kind of items instead of {ELEMENT_NAME,PROPERTY_NAME}:DEFAULT_VALUE items. But I can accept that (handling) such a matrix is a scalability nightmare. If that's the reason, fair enough for me. :) – Gormless

default was renamed to revert. – Trinh

@Oriol: Thanks. Wow, that is a very good change. I'm really liking where things are going. – Masonite

According to this post, https://mcmap.net/q/65917/-how-to-revert-back-to-normal-after-display-none-for-table-row, you can reset the value by setting to an empty string. – Vmail

@1.21 gigawatts: That's in JavaScript, though, not CSS. See thetallweeks's answer below. – Masonite

Answer 2

If using javascript is allowed, you can set the display property to an empty string. This will cause it to use the default for that particular element.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

Here is a link to a jsbin.

This is nice because you don't have to worry about the different types of display to revert to (block, inline, inline-block, table-cell, etc).

But, it requires javascript, so if you are looking for a css-only solution, then this is not the solution for you.

Note: This overrides inline styles, but not styles set in css

Adscititious

Note that this only works if the style was set using JavaScript or an inline style attribute in the first place. You cannot override or remove a declaration from a stylesheet using this method. – Masonite

@Masonite I disagree. Here is a jsfiddle that I think disproves what you are saying. jsfiddle.net/g45qagt3 – Adscititious

Sorry, my use of the word override was confusing. I mean setting a style to the empty string will only remove a style that was applied through the style attribute or the JavaScript setter. You can still override a stylesheet declaration if you set a specific value through JS, but setting it to empty is equivalent to not setting it at all - the stylesheet declaration will remain intact. See the modified fiddle: jsfiddle.net/BoltClock/g45qagt3/1 – Masonite

It's worth noting, that empty string works for any property, not just "display" – Albarran

2021: im pretty sure I had to go back to old code and fix thss as it no longer assumes the default... – Cq

Answer 3

Unset display:

You can use the value unset which works in both Firefox and Chrome.

display: unset;

---

.foo     { display: none;  }
.foo.bar { display: unset; }

Increasing

unset has the same problems as initial. The value of display will become inline. See codepen.io/Gidgidonihah/pen/mwWxEq – Blackshear

The OP clearly wants to reset to the default per element, e.g. to reset span to inline and a div to block. unset won't help with that since its per property and will always reset the display to inline. Please consider updating your answer. – Shavonneshaw

Answer 4

What worked for me was revert!

revert resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet.

Malena

Answer 5

No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value.

It is of course possible to set a property a value that you expect to be the default value. This may work rather widely if you check the Rendering section of HTML5 CR, mostly reflecting what browsers actually do.

Still, the answer is “No”, because browsers may have whatever default values they like. You should analyze what was the reason for wanting to reset to defaults; the original problem may still be solvable.

Guardroom

Answer 6

If you have access to JavaScript, you can create an element and read its computed style.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

Reine

Appeared you have to actually append the generated element to the <body> tag in order to get the computed style, at least in Chrome. – Azoth

Answer 7

Concerning the answer by BoltClock and John, I personally had issues with the initial keyword when using IE11. It works fine in Chrome, but in IE it seems to have no effect.

According to this answer IE does not support the initial keyword: Div display:initial not working as intended in ie10 and chrome 29

I tried setting it blank instead as suggested here: how to revert back to normal after display:none for table row

This worked and was good enough for my scenario. Of course to set the real initial value the above answer is the only good one I could find.

Agnola

Answer 8

According to my understanding to your question, as an example: you had a style at the beginning in style sheet (ex. background-color: red), then using java script you changed it to another style (ex. background-color: green), now you want to reset the style to its original value in style sheet (background-color: red) without mentioning or even knowing its value (ex. element.style.backgroundColor = 'red')...!

If I'm correct, I have a good solution for you which is using another class name for the element:

steps:

1. set the default styles in style sheet as usual according to your desire.
2. define a new class name in style sheet and add the new style you want.
3. when you want to trigger between styles, add the new class name to the element or remove it.

if you want to edit or set a new style, get the element by the new class name and edit the style as desired.

I hope this helps. Regards!

Haihaida