CSS Updates for 2023

[JohnRiv]

We currently reference CSS Snapshot 2018. CSS Snapshot 2020 was published after that. CSS Snapshot 2021 is the most current available CSS snapshot, and there also is a draft of CSS Snapshot 2022

We should review to see if it makes sense to update WMAS2023 to a more recent CSS Snapshot, and if any of the individual CSS specifications from CSS Snapshot 2022 that have full browser support now need to be added to WMAS2023 as well.

Similar to how we have done in years past (2022, 2021, 2020, 2019), this issue will track that research.

[JohnRiv]

Research results:

CSS Snapshot 2022

❌ CSS Snapshot 2022 includes CSS Counter Styles Level 3, which is not supported by Safari according to caniuse.com, so we cannot require CSS Snapshot 2022 in WMAS2023.

CSS Snapshot 2021

❌ CSS Snapshot 2021 also references CSS Counter Styles Level 3

CSS Snapshot 2020

❌ CSS Snapshot 2020 also references CSS Counter Styles Level 3

Individual changes in CSS Snapshot 2022

Individual changes in CSS Snapshot 2022 are potentially worth updating in WMAS2023:

Official Definition

• ❌ CSS Box Model Level 3 replaces CSS2§8.1, §8.2, §8.3 (but not §8.3.1), and §8.4.
  • WPT tests for some of the new box-edge keywords are failing
• ✅ CSS Color Level 4.
  • Outside of deprecated color names, very few WPT tests fail, so I'm inclined to include this in 2023.
  • Changes from Level 3 are:
  • The primary change, compared to CSS Color 3, is that CSS colors are no longer restricted to the narrow gamut of sRGB. To support this, several brand new features have been added:
    • predefined, wide color gamut RGB color spaces
    • lab(), lch(), oklab() and oklch() functions, for device-independent color
  • Other technical changes:
    • Serialization of is now specified here, rather than in the CSS Object Model
    • hwb() function, for specifying sRGB colors in the HWB notation.
    • Addition of named color rebeccapurple.
  • In addition, there have been some syntactic changes:
    • rgb() and rgba() functions now accept number rather than integer.
    • hsl() and hsla() functions now accept angle as well as number for hues.
    • rgb() and rgba(), and hsl() and hsla() are now aliases of each other (all of them have an optional alpha). rgb(), rgba(), hsl(), and hsla() have all gained a new syntax consisting of space-separated arguments and an optional slash-separated opacity. All the color functions use this syntax form now, in keeping with CSS’s functional-notation design principles.
    • All uses of alpha-value now accept percentage as well as number.
    • 4 and 8-digit hex colors have been added, to specify transparency.
    • The none value has been added, to represent powerless components.

Fairly Stable Modules with limited implementation experience

• ❌ Media Queries Level 4. Features added in Level 4 are:
  • Boolean-context media features are now additionally false if they would be true for the keyword none.
  • Media features with numeric values can now be written in a range context.
  • The pointer, any-pointer, hover, any-hover, update, color-gamut, overflow-block, and overflow-inline media features were added.
  • At a minimum, 'update', 'overflow-block', and 'overflow-inline' have not shipped in Safari yet.
  • or, and, only and not are disallowed from being recognized as media types, even invalid ones. (They’ll trigger a syntax error instead.)
  • All media types except for screen, print, speech, and all are deprecated.
  • Deprecated device-width, device-height, device-aspect-ratio, and made them refer to the Web-exposed screen area instead of the screen for privacy and security reasons.
  • Mediaqueries may depend on the evaluation of style sheets in some cases
• ❌ CSS Display Module Level 3.
  • Replaces CSS2§9.1.2, §9.2.1 (but not §9.2.1.1), §9.2.2 (but not §9.2.2.1), §9.2.3, and §9.2.4 (and lays the foundations for replacing §9.7), defining how the CSS formatting box tree is generated from the document element tree and defining the display property that controls it.
  • At a minimum, display: run-in has no UA support yet according to caniuse.com.
• ❌ CSS Writing Modes Level 4. Features added in Level 4 are:
  • Re-introduced sideways-lr and sideways-rl values of writing-mode
  • At a minimum, this only works in Firefox per caniuse.com, MDN, and wpt
  • Re-introduced the digits value of text-combine-upright.
  • Re-introduced automatic multi-column behavior of orthogonal flows.
  • Clarified the conditions for bidi reordering-induced fragmentation.
• ❌ CSS Fragmentation Module Level 3
  • At a minimum, full spec support for break-after is not yet implemented by any browser per MDN
• ❌ CSS Box Alignment Module Level 3
  • Does not have full UA support yet per W3C CSS WG Tests
• ❌ CSS Text Module Level 3
  • Does not have full UA support yet per wpt
• ❌ CSS Masking Level 1
  • Does not have full UA support yet per wpt
• ❌ CSS Speech Module Level 1
  • Tests are manual, and since it went to Candidate Rec this year and is not yet at Proposed Rec, it is likely not fully implemented by all UAs at this point
• ❌ CSS Scrollbars Styling Module Level 1
  • Does not have full UA support yet per wpt

Modules with Rough Interoperability

• ❌ CSS Grid Layout Module Level 2
  • Does not have full UA support yet per wpt
• ❌ CSS Box Sizing Level 3
  • The fit-content() function does not have any UA support yet per caniuse.com
• ❌ CSS Transforms Level 2
  • Reviewing the recent changes, it seems the first issue (specification no longer requires maintaining state for whether individual transform properties have 2D or 3D values, but instead requires that any value that can be expressed as 2D is treated as 2D) is still being worked out
• ❌ CSS Lists and Counters Module Level 3
  • Per caniuse.com, Safari supports the CSS ::marker pseudo-element definition in the CSS Pseudo-Elements Module Level 4 instead of one in the List module due to the flux definition in it.
• ❌ CSS Positioned Layout Module Level 3
  • Looking at the changes, some of the issues mentioned have WPT tests (that pass!), but others are still Open, so the spec isn't ready to reference yet
• ❌ CSS Fonts Module Level 4
  • @font-feature-values is not supported by Chrome per MDN. (It appears work to add it was started a few years back and then was removed)
• ❌ CSS Color Adjustment Module Level 1
  • Forced colors mode is not supported by Webkit per MDN

[JohnRiv]

I also realize that CSS Snapshot 2018 references CSS Color Level 3, while we're ready to include CSS Color Level 4, so the wording for the first line of our CSS Specifications description should probably change from

Devices MUST be conforming implementations of the following specifications (CSS Snapshot 2018 [CSS-2018]):

to something along the lines of

Devices MUST be conforming implementations of the following specifications, which are derived from the official Cascading Style Sheets definition from CSS Snapshot 2018 [CSS-2018] as well as more recent revisions to CSS specifications as appropriate:

[JohnRiv]

Closed via #323