What is the initial value of display property of tr element's style?

Viewed 4238

I have the following HTML page:

<table>
  <tr id="tr"></tr>
</table>

In Chrome DevTools' Console, I wrote the following code:

var tr = document.getElementById('tr');
var cs = getComputedStyle(tr);
cs.display;
"table-row"

As expected, the display defaults to 'table-row'.

I then set the display to none:

tr.style.display = 'none';
"none"
cs.display;
"none"

Again, that works as expected.

I then used 'unset' to unset the display style:

tr.style.display = 'unset';
"unset"
cs.display;
"inline"

I expected display to be 'table-row' again, but it becomes 'inline'.

I tried using 'revert' but got the same results:

tr.style.display = 'revert';
"revert"
cs.display;
"inline"

'inherit' doesn't work either:

tr.style.display = 'inherit';
"inherit"
cs.display;
"inline"

My question is: is this a bug? Shouldn't 'revert', 'initial', and 'unset' all set the display property back to its initial value?

Edit based on Danield's response @Danield is right that revert is supposed to do what I had expected, but is not yet well supported. Safari does support revert: The revert value in Safari

2 Answers

In CSS, the 'initial' value is per property, i.e. it doesn't refer to the value which the user agent applied to it based on the type of element.

The initial value of the display property is inline.

See display - MDN :

Initial value inline

So no matter which element you are styling display: initial means display: inline.

Here's a simple example:

div {
  display: initial;
  width: 200px;
  height: 200px;
  background-color: red;
}
<div>hello</div>

In the above example we apply display: initial; to the div.

Even though the user agent applies display: block to a div, the result is display: inline (notice how the width and height is not applied) because the initial value of the display element is inline.

This also explains the why display: unset results in display: inline because

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not.(MDN)

Now since display isn't an inherited property -

Inherited no

display: unset is actually equivalent to display: initial


Now, regarding the revert value - this is the functionality which I believe the OP was looking for... see the spec regarding revert - one of the CSS-wide property values:

Rolls back the cascaded value to the user level, so that the specified value is calculated as if no author-level rules were specified for this property on this element. ...

However the problem is that revert value is currently not (well) supported.

Caniuse on revert actually nicely summarizes:

A CSS keyword value that resets a property's value to the default specified by the browser in its UA stylesheet, as if the webpage had not included any CSS. For example, display:revert on a <div> would result in display:block. This is in contrast to the initial value, which is simply defined on a per-property basis, and for display would be inline.

"inline" is always the default property value for display in CSS regardless of the selector.

But read on...

I will now show you what happens when you apply the following property "reset" values on the display property, regardless of element selector in CSS. Keep in mind, except for "inherit", most versions of Internet Explorer (v.1-11) do not support these:

display:revert
display:unset
display:inherit
display:initial

Below are the results you should see applying various CSS "reset" property values to a "tr" element using the "display" property.

First or all, understand that every web browser and web agent comes with its own CSS style sheet, called a UA style sheet. HTML elements by default have NO styling whatsoever until you or your website assigns default values. However, all CSS properties still must default to a default value. That is where these new "reset" CSS property values come in...

This display: table-row style below is usually what browsers provide by default in their UA style sheets that come with the browser on install. You shouldn't have to assign this and why "tr" works as it does correctly in most browsers with no additional styles:

tr {
  display: table-row;
}

Use "revert" if you want to remove whatever values your own styles might have applied to "tr" elements and default back to the CSS applied by the browser's UA style sheet shown above. In most cases this is what you want. Note: This only works in non-IE browsers, though, and what is worse, does not work in many versions of browsers prior to roughly 2018. But for those it does work in, it is helpful as it returns you to the browser's default styles for your table rows:

tr {
  display: revert;
}

This style below would set "display" back to its "initial" setting or the default property value (regardless of the element and web browser). In most cases the default value for "display" in user-agents is "inline". BAD IDEA! Once you do that, you lose the browser's default values forever in the HTML render tree. This trips up most developers as it doesn't fall back to the browsers UA default style sheet as "revert" does above. Only works in non-IE browsers:

tr {
  display: unset;
}

This style below is an atypical use of "display", as the property is not an inheritable property (like font, color, etc). This might have very weird consequences in the display as it would inherit any parent's cascade value for "display", which likely would be "table" in the case of "tr". "inherit" should work in IE and non-IE browsers, though. That is the only good quality of this property. Keep in mind many selectors default to inherit anyway, so its use is often redundant:

tr {
  display: inherit;
}
  • Do NOT ever use "inherit" on non-inheritable CSS properties like "display" which affect HTML structure, design, layout, etc.

As above for "unset", this style below defaults to "inline" for the "display" property. Notice this overrides or rather erases the browser's typical set style for table rows which is "display:table-row". Once you use "initial", you have erased the browser's defaults and your own! Note: Unlike "revert", you cannot recover the browser's original UA style sheet when you use "initial". It is erased from the DOM tree that is painted and rendered in memory. Again, BAD IDEA! Not a wise choice to use unless you want to completely erase the browser's defaults for some reason. Again, this property value below only works in non-IE browsers:

tr {
  display: initial;
}
Related