CSS Levels

+Title: CSS Levels +Shortname: css-levels +Level: 1 +Previous Version: https://www.w3.org/TR/CSS/#css-level +Status: w3c/CG-DRAFT +Work Status: exploring +Group: cssnext +Repository: https://github.com/CSS-Next/css-next/ +ED: https://drafts.csswg.org/CSS/levels/ +Editor: Una Kravets, Google, https://una.im, w3cid 115525 +Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669 +Editor: Brecht De Ruyte, https://utilitybend.com +Editor: Quentin Albert, https://beyond-the-cascade.com +Abstract: + This document outlines where CSS levels have been and where they are going. + It categorizes CSS properties into distinct levels, namely CSS4, and CSS5, to + better organize and facilitate understanding of the evolving CSS landscape. +Markup Shorthands: markdown on +

Status of this document

This section describes the status of this document at the time of its publication. + A list of current W3C publications + and the latest revision of this technical report + can be found in the W3C technical reports index at https://www.w3.org/TR/.

The CSS Next CG and the CSSWG are still in the process of identifying and solidifying the following categorizations. Feedback is welcome, join the conversation on Github in the CSS Next RFC.

This document is governed by the 03 November 2023 W3C Process Document.

This specification was published by the CSS4 / CSS Next Community Group. + It is not a W3C Standard nor is it on the W3C Standards Track. + + Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. + + Learn more about W3C Community and Business Groups.

1. Introduction

Cascading Style Sheets does not have versions in the traditional sense, +instead it has levels. +Each level of CSS builds on the previous module, refining definitions and adding features. +On Oct 27, 2023, the CSS Working Group resolved to "support the definition of CSS4" and delegated the categorization of CSS properties to the CSS Next Community Group.

The term "CSS3" has been widely used to encompass various additions and enhancements +to Cascading Style Sheets (CSS) since around 2010. +The CSSWG defined CSS3 as "everything after CSS2.1". +As CSS continues to evolve with new features and specifications, +the blanket term "CSS3" has become insufficient and misleading. This RFC from the CSS Next Community Group +proposes the categorization of CSS properties into distinct levels; namely CSS3, CSS4, and CSS5.

It’s been helpful for people to call CSS3, CSS4, and CSS5 as "eras," as this helps +comparmentalize the intent of the categorizations. +These eras aim to improve adoption and ease of teaching, while not having a +direct impact on the CSS Working Group (CSSWG) or the Baseline initiative.

2. Categorization

Feature categorization is based on a variety of factors, such as when it was proposed, +when it was implemented, and when it stabilized. +The primary factor being the general timeline that a feature stabalized +in the CSS Working Group. The community group inspected each CSS feature’s specification, +looked at the date of inception and date of stability, and used this information +as a cornerstone attribute for categorization.

The primary focus is on CSS as a language; not CSS and its adoption in browsers. +When applicable though, implementer interest and browser adoption are taken into account +and used to resolve difficult to place features. For a robust CSS feature according to +browser support, see the Baseline initiative.

CSS3 +: +
Defined by the CSSWG when specs evolved at the same rate, and was designed to be open ended.
+
CSS4 +: +
Properties and features introduced in a spec around 2013 - 2018.
+
CSS5 +: +
Properties and features introduced in a spec around 2019 - 2024.
+
Future/Next +: +
2025 and beyond; to be determined by the CSS Next CG.
+

2.1. CSS4

Align

Animation

+
Animate grid tracks
+
+
offset
+
+
ray()
+
+
transform-box
+
+
will-change
+

At-rules

+
@forced-colors
+
+
@media range-syntax
+
+
@supports
+
+
forced-color-adjust
+

Blend Modes

+
isolation
+

Clipping, shapes & masking

Contain

+
contain
+

Counter

Flex

+
flex
+
+
flex_value#fr
+
+
flex-basis
+
+
flex-direction
+
+
flex-flow
+
+
flex-grow
+
+
flex-shrink
+
+
flex-wrap
+

Functions

Gradient

+
conic-gradient()
+

Grid

Image / Video

Logical Properties

Misc

+
all
+
+
caret
+
+
caret-color
+
+
caret-shape
+
+
touch-action
+
+
unset
+
+
user-select
+
+
revert
+

+
page-orientation (@page)
+
+
print-color-adjust
+

Pseudo-classes

Pseudo-elements

Relative units

Scroll

Typography

+
@annotation
+
+
@character-variant
+
+
@font-feature-values
+
+
@font-palette-values
+
+
@ornaments
+
+
@styleset
+
+
@stylistic
+
+
@swash
+
+
-webkit-line-clamp
+
+
annotation()
+
+
base-palette (@font-palette-values)
+
+
character-variant()
+
+
local()
+
+
font-family (@font-palette-values)
+
+
font-optical-sizing
+
+
font-palette
+
+
font-synthesis
+
+
font-synthesis-small-caps
+
+
font-synthesis-style
+
+
font-synthesis-weight
+
+
font-variant
+
+
font-variant (@font-face)
+
+
font-variant-alternates
+
+
font-variant-caps
+
+
font-variant-east-asian
+
+
font-variant-emoji
+
+
font-variant-ligatures
+
+
font-variant-numeric
+
+
font-variant-position
+
+
font-variation-settings
+
+
font-variation-settings (@font-face)
+
+
hanging-punctuation
+
+
hyphens
+
+
line-gap-override (@font-face)
+
+
styleset()
+
+
stylistic()
+
+
swash()
+
+
text-combine-upright
+
+
text-decoration-color
+
+
text-decoration-line
+
+
text-decoration-skip
+
+
text-decoration-skip-ink
+
+
text-decoration-style
+
+
text-decoration-thickness
+
+
text-emphasis
+
+
text-emphasis-color
+
+
text-emphasis-position
+
+
text-emphasis-style
+
+
text-orientation
+
+
text-underline-offset
+
+
text-underline-position
+
+
ornaments()
+

2.2. CSS5

Animation

At-rules

+
@custom-media
+
+
@layer
+
+
@scope
+
+
@scope :scope
+
+
@starting-style
+
+
@supports selector()
+
+
override-colors (@font-palette-values)
+
+
syntax (@property)
+

Cascade Layers

Colors & theming

+
accent-color
+
+
color-scheme
+
+
color-mix()
+
+
color() - display-p3, rec2020, a98, prophoto, xyz, xyz-d50, xyz-d65
+
+
color(from ...) - relative color syntax
+
+
Hue interpolation (gradients "in" syntax, "hue longer" syntax)
+
+
hwb()
+
+
oklab()
+
+
oklch()
+
+
lab()
+
+
lch()
+

Container Queries

+
length#cqw, cqi, cqb, cqh, cqmax, cqmin
+
+
contain-intrinsic-block-size
+
+
contain-intrinsic-height
+
+
contain-intrinsic-inline-size
+
+
contain-intrinsic-size
+
+
contain-intrinsic-width
+
+
container
+
+
container-name
+
+
container-type
+

Logical Properites

Math Functions

+
abs()
+
+
acos()
+
+
asin()
+
+
atan()
+
+
atan2()
+
+
cos()
+
+
exp()
+
+
hypot()
+
+
log()
+
+
mod()
+
+
pow()
+
+
rem()
+
+
round()
+
+
sin()
+
+
sign()
+
+
sqrt()
+
+
tan()
+

Pseudo-classes

Pseudo-elements

Relative Units

+
Dynamic Viewport Units (dvh, lvh & svh)
+
+
length#cap
+
+
length#ex, length#rex
+
+
length#ic, length#ric
+
+
length#lh, length#rlh
+

Scroll

Scroll-driven animations

Transition & Transforms

Typography

View transitions

+
::view-transition
+
+
::view-transition-group
+
+
::view-transition-image-pair
+
+
::view-transition-new
+
+
::view-transition-old
+
+
@view-transition
+
+
view-transition-class
+
+
view-transition-name
+
+
view-transition-type
+

2.3. Future (Uncategorized, out of scope for CSS4/5)

Align

+
align-tracks
+
+
justify-tracks
+

Anchoring

+
anchor()
+

Aural CSS

+
speak-as (@counter-style)
+

Color

+
contrast-color()
+

Container Queries

+
Style queries
+

Functions

+
element()
+
+
image()
+

Grid

+
masonry-auto-flow
+

Pseudo-classes

+
:modal
+
+
:target-within
+
+
:top-layer
+

Pseudo-elements

+
::target-text
+

Scroll

+
target-text()
+

Text Fragmentation

+
orphans
+

Typography

Units

+
frequency#Hz
+

Conformance

Document conventions

Conformance requirements are expressed + with a combination of descriptive assertions + and RFC 2119 terminology. + The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” + in the normative parts of this document + are to be interpreted as described in RFC 2119. + However, for readability, + these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative + except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” + or are set apart from the normative text + with class="example", + like this:

+ +

This is an example of an informative example.

Informative notes begin with the word “Note” + and are set apart from the normative text + with class="note", + like this:

Note, this is an informative note.

CSS Levels

Abstract

Status of this document

1. Introduction

2. Categorization

2.1. CSS4

2.2. CSS5

2.3. Future (Uncategorized, out of scope for CSS4/5)

Conformance

Document conventions

References

Normative References