flexbox: set Baseline status
#450
Conversation
| @@ -2,13 +2,16 @@ spec: https://drafts.csswg.org/css-flexbox-1/ | |||
| caniuse: flexbox | |||
| usage_stats: https://chromestatus.com/metrics/feature/timeline/popularity/1692 | |||
| status: | |||
| is_baseline: true | |||
| since: "2020-10-20" | |||
| baseline: low | |||
There was a problem hiding this comment.
What features do we need to break out to make Flexbox Baseline high? I think it will not match developer expectations that using Flexbox overall requires carefully thinking about browser support.
There was a problem hiding this comment.
(It might be helpful to revisit #149 (comment) too.)
css.properties.flex-basis.{min,max}-content are the holdouts (appearing in Safari 16). If you drop those two, then the high status prevails.
The top-line summary would look like this:
| Key | Baseline | Low since date | Versions |
|---|---|---|---|
| flexbox | ✅ High | 2020-09-22 | Chrome 57 Chrome Android 57 Edge 79 Firefox 81 🔑💎 Firefox for Android 81 Safari 9 Safari on iOS 9 |
There was a problem hiding this comment.
Leaving my two pence: I was a little surprised to see flexbox as baseline low, however I had no idea/had never checked to see that flex-basis: min/max-content were only supported since Safari 16, so perhaps in this case developer expectations are wrong? (Though I'm not sure I've ever used them - and flexbox certainly retains a lot of usefulness without them.)
Longer term, I think we'll need some solution for "the majority of this page is baseline high, but these specific bits are baseline low/not", but for now, perhaps baseline low is the appropriate status here? Developers should check to see if their use of flexbox (with or without flex-basis: min/max-content) supports their target browsers.
There was a problem hiding this comment.
I agree we'll need a solution for this very common problem, but so far we've mostly handled it by excluding the newer features and punting on how to handle them. I'd prefer to take that path here too, unless we have reason to think the min/max-content are common pitfalls.
There was a problem hiding this comment.
OK, since we already have a bunch of features of Flexbox commented out, two more won't be that bad. Done with a116ccb.
I suspect the answer to the display problems is to define related groups, then:
- Design a way to note the existence of "minor" groups on pages that cover higher-level groups at the top of the page
- Show Baseline icons in-line in the body text (e.g., replace/amend the "experimental" beaker with a Baseline icon)
- Update the compat table to provide a list of Baseline statuses that relate to the table
Using the script from web-platform-dx/web-features#473. This syncs BCD with these web-features changes: web-platform-dx/web-features#450 web-platform-dx/web-features#464
Using the script from web-platform-dx/web-features#473. This syncs BCD with these web-features changes: web-platform-dx/web-features#450 web-platform-dx/web-features#464
flexbox
Chrome Android 57
Edge 79
Firefox 81 🔑💎
Firefox for Android 81
Safari 9
Safari on iOS 9
css.properties.align-content.flex_contextChrome Android 25
Edge 12
Firefox 28
Firefox for Android 28
Safari 9 🔑💎
Safari on iOS 9
css.properties.align-content.flex_context.stretchChrome Android 57
Edge 79 🔑💎
Firefox 52
Firefox for Android 52
Safari 9
Safari on iOS 9
css.properties.align-items.flex_contextChrome Android 52 🔑💎
Edge 12
Firefox 20
Firefox for Android 20
Safari 7
Safari on iOS 7
css.properties.align-items.flex_context.baselineChrome Android 25
Edge 79 🔑💎
Firefox 28
Firefox for Android 28
Safari 7
Safari on iOS 7
css.properties.align-self.flex_contextChrome Android 36
Edge 12 🔑💎
Firefox 20
Firefox for Android 20
Safari 7
Safari on iOS 7
css.properties.align-self.flex_context.baselineChrome Android 25
Edge 79 🔑💎
Firefox 28
Firefox for Android 28
Safari 7
Safari on iOS 7
css.properties.align-self.flex_context.stretchChrome Android 57
Edge 79 🔑💎
Firefox 52
Firefox for Android 52
Safari 9
Safari on iOS 9
css.properties.display.flexChrome Android 29
Edge 12
Firefox 20
Firefox for Android 20
Safari 9 🔑💎
Safari on iOS 9
css.properties.display.inline-flexChrome Android 29
Edge 12
Firefox 20
Firefox for Android 20
Safari 9 🔑💎
Safari on iOS 9
css.properties.flexChrome Android 29
Edge 12
Firefox 20
Firefox for Android 20
Safari 9 🔑💎
Safari on iOS 9
css.properties.flex-basisChrome Android 29
Edge 12
Firefox 22
Firefox for Android 22
Safari 9 🔑💎
Safari on iOS 9
css.properties.flex-basis.autoChrome Android 25
Edge 12
Firefox 22
Firefox for Android 22
Safari 9 🔑💎
Safari on iOS 9
css.properties.flex-directionChrome Android 29
Edge 12
Firefox 81 🔑💎
Firefox for Android 81
Safari 9
Safari on iOS 9
css.properties.flex-flowChrome Android 29
Edge 12
Firefox 28
Firefox for Android 28
Safari 9 🔑💎
Safari on iOS 9
css.properties.flex-growChrome Android 29
Edge 12
Firefox 20
Firefox for Android 20
Safari 9 🔑💎
Safari on iOS 9
css.properties.flex-shrinkChrome Android 29
Edge 12
Firefox 20
Firefox for Android 20
Safari 9 🔑💎
Safari on iOS 9
css.properties.flex-wrapChrome Android 29
Edge 12
Firefox 28
Firefox for Android 52 🔑💎
Safari 9
Safari on iOS 9
css.properties.justify-content.flex_contextChrome Android 52 🔑💎
Edge 12
Firefox 20
Firefox for Android 20
Safari 7
Safari on iOS 7
css.properties.justify-content.flex_context.stretchChrome Android 57
Edge 79 🔑💎
Firefox 52
Firefox for Android 52
Safari 9
Safari on iOS 9
css.properties.orderChrome Android 29
Edge 12
Firefox 20
Firefox for Android 20
Safari 9 🔑💎
Safari on iOS 9
🔑💎 marks a release that contributes to the Baseline low date.