Research results:
CURRENTLY A WORK IN PROGRESS
❌ CSS Snapshot 2021 includes CSS Counter Styles Level 3, which is not supported by Safari according to caniuse.com, so we cannot require CSS Snapshot 2021 in WMAS2022.
❌ CSS Snapshot 2020 also references CSS Counter Styles Level 3, so we cannot require CSS Snapshot 2020 either in WMAS2022.
Individual changes in CSS Snapshot 2021 are potentially worth updating in WMAS2022:
Official Definition
- ✅ CSS Cascading and Inheritance Level 4. Features added in Level 4 are:
- Introduced revert keyword, for rolling back the cascade. Full UA support according to caniuse.com
- Introduced supports() syntax for supports-conditional @import rules. Full UA support according to caniuse.com
- Added encapsulation context to the cascade sort criteria to accommodate Shadow DOM. This appears to be essentially defining how Shadow DOM has worked.
- Defined the property two aliasing mechanisms CSS uses to support legacy syntaxes. Tested on all current UAs
- ❌ CSS Box Model Level 3 replaces CSS2§8.1, §8.2, §8.3 (but not §8.3.1), and §8.4. Changes since CSS Level 2:
- Adapting the prose slightly to account for vertical writing modes.
- Cross-linking to relevant concepts in [css-break-3] and [css-backgrounds-3].
- Defining the non-applicability of margin, padding and their longhands to ruby base containers and ruby annotation containers (at risk). All WPT tests fail for this
- Providing a centralized common definition of keywords that reference the various box edges for use in properties defined outside this spec (e.g. background-clip) to avoid repetition (and the resulting inevitable synchronization errors).
- ✅ CSS Containment Module Level 1.
- Introduces the contain property, which enforces the independent CSS processing of an element’s subtree in order to enable heavy optimizations by user agents when used well. Full UA support according to caniuse.com
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, 'color-gamut' has not shipped in Firefox yet according to MDN and confirmed by testing.
- 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 Color Level 4. 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
- At a minimum,
oklab()has only shipped in Safari according to MDN and caniuse.com.
- At a minimum,
- 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 rather than .
- hsl() and hsla() functions now accept as well as 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 now accept as well as .
- 4 and 8-digit hex colors have been added, to specify transparency.
- The none value has been added, to represent powerless components.
- 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:
- ❌ 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-inhas no UA support yet according to caniuse.com.
- At a minimum,
- 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.
- ❌ 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.
- Re-introduced sideways-lr and sideways-rl values of writing-mode
- ❌ CSS Fragmentation Module Level 3
- At a minimum, full spec support for
break-afteris not yet implemented by any browser per MDN
- At a minimum, full spec support for
- ❌ 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 given it is in the "limited implementation experience", likely not fully implemented by all UAs
- ❌ CSS Scrollbars Styling Module Level 1
- Only supported by Firefox per MDN
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
- The
- ❌ 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
::markerpseudo-element definition in the CSS Pseudo-Elements Module Level 4 instead of one in the List module due to the flux definition in it.
- Per caniuse.com, Safari supports the CSS
- ✅ CSS Logical Properties and Values Level 1
- Full UA support according to caniuse.com
- ❌ 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
- Looking at the changes, some of the issues mentioned have WPT tests (that pass!), but others are still
- ✅ Resize Observer
- Full UA support according to MDN
- ✅ Web Animations
- Full UA support according to caniuse.com
- ❌ CSS Fonts Module Level 4
@font-feature-valuesis 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
- CSS Text Decoration Module Level 3, Exception: emphasis marks properties are not yet widely supported.
- ✅ Full UA support according to caniuse.com, so we can remove this exception
- TBD