4

I need to know what value/ css would be set when I use display: initial on non CSS3 compliant browsers ?

I'm hiding the class using display:none & need to show back, for which I intend to use display: initial (I dont want to use display:block if previously it was display:inline) but the hidden element must be shown on all browsers.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Rajat Gupta
  • 25,853
  • 63
  • 179
  • 294

3 Answers3

5

What happens by CSS 2.1 rules on error handling as well as in practice is that the declaration display: initial is ignored, without affecting the rest of the style sheet. The display property thus gets its value from other rules. In the absence of any setting on it in any style sheet (including browser default style sheet), the initial value inline is used.

The “fallback” code in the edit of your question means that the value of display would be inline in browsers that support the value inline, and block in other browsers. This does not sound safe.

The value initial does not mean “the previous value set in a style sheet” or anything like that, as the question seems to postulate. Instead, it means the value that is designated as the property’s initial value in CSS specifications. For display, this is inline.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
1

Ok, I found that providing a fallback would be a safer option. So I use like below:

{
display: block;// just as fallback
display: initial;
}
Rajat Gupta
  • 25,853
  • 63
  • 179
  • 294
1

there is "run-in" value for display property explained in W3C Schools page

EDIT: run-in value is supported by Internet Explorer, and interpret the element whether it is block-level or inline-level.

I made an example jsFiddle Example .

Halil Kayer
  • 350
  • 3
  • 8
  • Please, explain your approach in the answer itself. Link-only answers are discouraged on Stackoverflow. – default locale Jun 17 '15 at 08:09
  • Of Course! I was dealing with same issue, I wanted to hiding elements using `display:none` and want them visible back. That's painful part. I needed to use something sets element display settings as is. Using `display:initial` could not solve the problem because some elements displays overriden from block to inline-block or other display settings. Then I found `run-in` value. It says ** Displays an element as either block or inline, depending on context** So it seems promising and what's more important is it is CSS2.1 spec and supported by IE8 IE9 etc. I went for `run-in` and it made helpful – Halil Kayer Sep 28 '17 at 13:40
  • 1
    Bu sadly today, nor Chrome, neither Firefox or Safari supported this value. So my answer obsoleted. :/ – Halil Kayer Sep 28 '17 at 13:41