1

Time and time again I'm reading about a very interesting CSS property on MDN only to see that MDN considers some values it can take "experimental", recommends against using it in production and warns that its behavior may change in the future.

Two examples: width: max-content and display: contents.

  • What does it precisely mean that a property or value is 'experimental'? Is it a status given to such a keyword by MDN or is it an official status given to this keyword by an appropriate standarization body (W3C perhaps?)
  • Where can I find if MDN's warnings are not out-of-date? For example for max-content, MDN links to this standard document, but I can see no warnings about the experimental nature in the paragraph about max-content - perhaps the whole document MDN linked to is experimental?

Context: I'm asking because I'd dearly like to use both width: max-contents and display: contents, both seem to make my life so much simpler, and I'm wondering if (a) it's OK to use them, (b) I shouldn't use them, (c) I really really shouldn't use them?

  • they are still in *draft* mode. You can check here: https://developer.mozilla.org/en-US/docs/Web/CSS/width#Specifications ... you can use what is defined in the green but the red one is still in progress – Temani Afif Jul 09 '19 at 16:10
  • and to have an idea about the support in case you want to use it check this: https://caniuse.com/#feat=intrinsic-width ... some properties are still in Draft but implemented in the last version of some browsers – Temani Afif Jul 09 '19 at 16:12
  • Related: https://stackoverflow.com/questions/1992396/experimental-css-and-old-fashioned-browsers – TylerH Jul 09 '19 at 16:19
  • @TemaniAfif Heh you were yourself recommending me to use `display: contents;` a while ago ( https://stackoverflow.com/a/53346538/4385532 ) - might I ask why did you think it was OK to use it, despite its 'experimental' nature? I'd just like to learn more about when I may and when I may not use something. –  Jul 09 '19 at 16:20
  • 1
    because I know it will soon become a standard and it will be supported by all the browser in the future. I said you can use what is in green as it's safe but I never said you have to not use what is in the red. I use a lot of new feature that are only implemented in Chrome/Fifrefox and lack support in old browser, IE, Edge,etc ... that's why I gave you the second link which is important in order to know the support of the property that you will use. If there is 0 support: don't use it. If some new browser already support it, it's up to you to decide based on your audience – Temani Afif Jul 09 '19 at 18:37

2 Answers2

1

Basically what this means is that the developers that make it so that CSS works are creating new functions that aren't available in every major browser and very-well could be removed as they continue to develop. Think of it as an alpha test of new CSS declarations. In theory, every CSS identifier was 'experimental' at some point and was then moved to 'stable.' Eventually if it falls out of favor, it turns to 'deprecated.'

You can find more info here: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions

Here is a site that allows you to see cross-browser compatibility as well: https://caniuse.com/

adr5240
  • 364
  • 1
  • 2
  • 13
  • 1
    If this answers your question, can you mark this as solved for visibility? (slash pull it off the question board) – adr5240 Jul 09 '19 at 16:24
  • 1
    Two great answers, complementing each other. I have a tough problem here, I can't split this green tick in two, however hard I'd try ☺ Upvotes, however, I can cast w/o limits ☺ –  Jul 09 '19 at 16:29
1

At the very beginning of your linked document (CSS Box Sizing Module Level 3 Editor’s Draft, 5 June 2019), there is this paragraph

[...]This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.[...].

So as long as a css property is only listed in the draft of the specification it has to be considered as experimental, as it is not even guaranteed that it will be finalized ever. Drafts have been completely rejected or had a major rewrite in the past if they were not practicable.

And if you look at this link https://www.w3.org/TR/css-sizing-3/ you can see that the current version of CSS Intrinsic & Extrinsic Sizing Module Level 3 is still W3C Working Draft, 22 May 2019.

[...]This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress[...].

So to figure out if a property or value is still experimental you need to check where it is defined and if those specs are final.

If those specs are final then the property/value is not experimental anymore and you only need to check if it is available in the browsers using e.g. caniuse.com

t.niese
  • 32,069
  • 7
  • 56
  • 86