diff --git a/csswg/levels/index.bs b/csswg/levels/index.bs new file mode 100644 index 0000000..38d29ad --- /dev/null +++ b/csswg/levels/index.bs @@ -0,0 +1,762 @@ +
+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
+
+ + + +Introduction {#intro} +===================== + +Cascading Style Sheets does not have versions in the traditional sense, +instead it has [levels](https://www.w3.org/TR/CSS/#css-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"](https://github.com/w3c/csswg-drafts/issues/4770#issuecomment-1802342332) +and delegated the categorization of CSS properties to the [CSS Next Community Group](https://github.com/CSS-Next/css-next). + +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"](https://www.w3.org/TR/CSS2/about.html#:~:text=CSS%202.1%20is%20derived%20from,in%20a%20future%20CSS3%20specification.). +As CSS continues to evolve with new features and specifications, +the blanket term "CSS3" has become insufficient and misleading. +[This RFC](https://github.com/CSS-Next/css-next/discussions/92) 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](https://github.com/web-platform-dx/web-features/blob/main/docs/baseline.md). + +Categorization {#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](https://github.com/web-platform-dx/web-features/blob/main/docs/baseline.md). + +: **CSS3** +:: [Defined by the CSSWG](https://www.w3.org/TR/CSS/#css-levels) 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. + +CSS4 {#css-4} +------------- + +
+ Align + + - [align-content](https://developer.mozilla.org/docs/Web/CSS/align-content) + - [align-items](https://developer.mozilla.org/docs/Web/CSS/align-items) + - [align-self](https://developer.mozilla.org/docs/Web/CSS/align-self) + - [gap](https://developer.mozilla.org/docs/Web/CSS/gap) + - [justify-content](https://developer.mozilla.org/docs/Web/CSS/justify-content) + - [justify-items](https://developer.mozilla.org/docs/Web/CSS/justify-items) + - [justify-self](https://developer.mozilla.org/docs/Web/CSS/justify-self) + - [order](https://developer.mozilla.org/docs/Web/CSS/order) + - [place-content](https://developer.mozilla.org/docs/Web/CSS/place-content) + - [place-items](https://developer.mozilla.org/docs/Web/CSS/place-items) + - [place-self](https://developer.mozilla.org/docs/Web/CSS/place-self) + - [row-gap](https://developer.mozilla.org/docs/Web/CSS/row-gap) + +
+ +
+ Animation + + - Animate grid tracks + - [offset](https://developer.mozilla.org/docs/Web/CSS/offset) + - [ray()](https://developer.mozilla.org/docs/Web/CSS/ray) + - [transform-box](https://developer.mozilla.org/docs/Web/CSS/transform-box) + - [will-change](https://developer.mozilla.org/docs/Web/CSS/will-change) + +
+ +
+ At-rules + + - [@forced-colors](https://developer.mozilla.org/docs/Web/CSS/@media/forced-colors) + - @media range-syntax + - [@supports](https://developer.mozilla.org/docs/Web/CSS/@supports) + - [forced-color-adjust](https://developer.mozilla.org/docs/Web/CSS/forced-color-adjust) + +
+ +
+ Blend Modes + + - [isolation](https://developer.mozilla.org/docs/Web/CSS/isolation) + +
+ +
+ Clipping, shapes & masking + + - [circle()](https://developer.mozilla.org/docs/Web/CSS/basic-shape/circle) + - [clip-path](https://developer.mozilla.org/docs/Web/CSS/clip-path) + - [ellipse()](https://developer.mozilla.org/docs/Web/CSS/basic-shape/ellipse) + - [mask-mode](https://developer.mozilla.org/docs/Web/CSS/mask-mode) + - [shape-image-threshold](https://developer.mozilla.org/docs/Web/CSS/shape-image-threshold) + - [shape-margin](https://developer.mozilla.org/docs/Web/CSS/shape-margin) + - [shape-outside](https://developer.mozilla.org/docs/Web/CSS/shape-outside) + +
+ +
+ Contain + + - [contain](https://developer.mozilla.org/docs/Web/CSS/contain) + +
+ +
+ Counter + + - [@counter-style](https://developer.mozilla.org/docs/Web/CSS/@counter-style) + - [counter-set](https://developer.mozilla.org/docs/Web/CSS/counter-set) + - [fallback (@counter-style)](https://developer.mozilla.org/docs/Web/CSS/@counter-style/fallback) + - [suffix (@counter-style)](https://developer.mozilla.org/docs/Web/CSS/@counter-style/suffix) + - [symbols (@counter-style)](https://developer.mozilla.org/docs/Web/CSS/@counter-style/symbols) + - [symbols()](https://developer.mozilla.org/docs/Web/CSS/symbols) + - [system (@counter-style)](https://developer.mozilla.org/docs/Web/CSS/@counter-style/system) + +
+ +
+ Flex + + - [flex](https://developer.mozilla.org/docs/Web/CSS/flex) + - flex_value#fr + - [flex-basis](https://developer.mozilla.org/docs/Web/CSS/flex-basis) + - [flex-direction](https://developer.mozilla.org/docs/Web/CSS/flex-direction) + - [flex-flow](https://developer.mozilla.org/docs/Web/CSS/flex-flow) + - [flex-grow](https://developer.mozilla.org/docs/Web/CSS/flex-grow) + - [flex-shrink](https://developer.mozilla.org/docs/Web/CSS/flex-shrink) + - [flex-wrap](https://developer.mozilla.org/docs/Web/CSS/flex-wrap) + +
+ +
+ Functions + + - [clamp()](https://developer.mozilla.org/docs/Web/CSS/clamp) + - [env()](https://developer.mozilla.org/docs/Web/CSS/env) + - [fit-content](https://developer.mozilla.org/docs/Web/CSS/fit-content) + - [fit-content()](https://developer.mozilla.org/docs/Web/CSS/fit-content_function) + - [max()](https://developer.mozilla.org/docs/Web/CSS/max) + - [min()](https://developer.mozilla.org/docs/Web/CSS/min) + - [minmax()](https://developer.mozilla.org/docs/Web/CSS/minmax) + - [repeat()](https://developer.mozilla.org/docs/Web/CSS/repeat) + - [var(), --*](https://developer.mozilla.org/docs/Web/CSS/var) + +
+ +
+ Gradient + + - [conic-gradient()](https://developer.mozilla.org/docs/Web/CSS/gradient/conic-gradient) + +
+ +
+ Grid + + - [grid](https://developer.mozilla.org/docs/Web/CSS/grid) + - [grid-area](https://developer.mozilla.org/docs/Web/CSS/grid-area) + - [grid-auto-columns](https://developer.mozilla.org/docs/Web/CSS/grid-auto-columns) + - [grid-auto-flow](https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow) + - [grid-auto-rows](https://developer.mozilla.org/docs/Web/CSS/grid-auto-rows) + - [grid-column](https://developer.mozilla.org/docs/Web/CSS/grid-column) + - [grid-column-end](https://developer.mozilla.org/docs/Web/CSS/grid-column-end) + - [grid-column-start](https://developer.mozilla.org/docs/Web/CSS/grid-column-start) + - [grid-row](https://developer.mozilla.org/docs/Web/CSS/grid-row) + - [grid-row-end](https://developer.mozilla.org/docs/Web/CSS/grid-row-end) + - [grid-row-start](https://developer.mozilla.org/docs/Web/CSS/grid-row-start) + - [grid-template](https://developer.mozilla.org/docs/Web/CSS/grid-template) + - [grid-template-areas](https://developer.mozilla.org/docs/Web/CSS/grid-template-areas) + - [grid-template-columns](https://developer.mozilla.org/docs/Web/CSS/grid-template-columns) + - [grid-template-rows](https://developer.mozilla.org/docs/Web/CSS/grid-template-rows) + - [Subgrid](https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Subgrid) + +
+ +
+ Image / Video + + - [aspect-ratio](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) + - [cross-fade()](https://developer.mozilla.org/docs/Web/CSS/cross-fade) + - [image-orientation](https://developer.mozilla.org/docs/Web/CSS/image-orientation) + - [image-resolution](https://developer.mozilla.org/docs/Web/CSS/image-resolution) + - [image-set()](https://developer.mozilla.org/docs/Web/CSS/image/image-set) + +
+ +
+ Logical Properties + + - [block-size](https://developer.mozilla.org/docs/Web/CSS/block-size) + - [border-block](https://developer.mozilla.org/docs/Web/CSS/border-block) + - [border-block-color](https://developer.mozilla.org/docs/Web/CSS/border-block-color) + - [border-block-end](https://developer.mozilla.org/docs/Web/CSS/border-block-end) + - [border-block-end-color](https://developer.mozilla.org/docs/Web/CSS/border-block-end-color) + - [border-block-end-style](https://developer.mozilla.org/docs/Web/CSS/border-block-end-style) + - [border-block-end-width](https://developer.mozilla.org/docs/Web/CSS/border-block-end-width) + - [border-block-start](https://developer.mozilla.org/docs/Web/CSS/border-block-start) + - [border-block-start-color](https://developer.mozilla.org/docs/Web/CSS/border-block-start-color) + - [border-block-start-style](https://developer.mozilla.org/docs/Web/CSS/border-block-start-style) + - [border-block-start-width](https://developer.mozilla.org/docs/Web/CSS/border-block-start-width) + - [border-block-style](https://developer.mozilla.org/docs/Web/CSS/border-block-style) + - [border-block-width](https://developer.mozilla.org/docs/Web/CSS/border-block-width) + - [border-end-end-radius](https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius) + - [border-end-start-radius](https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius) + - [border-inline](https://developer.mozilla.org/docs/Web/CSS/border-inline) + - [border-inline-color](https://developer.mozilla.org/docs/Web/CSS/border-inline-color) + - [border-inline-end](https://developer.mozilla.org/docs/Web/CSS/border-inline-end) + - [border-inline-end-color](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-color) + - [border-inline-end-style](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-style) + - [border-inline-end-width](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width) + - [border-inline-start](https://developer.mozilla.org/docs/Web/CSS/border-inline-start) + - [border-inline-start-color](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-color) + - [border-inline-start-style](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-style) + - [border-inline-start-width](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width) + - [border-inline-style](https://developer.mozilla.org/docs/Web/CSS/border-inline-style) + - [border-inline-width](https://developer.mozilla.org/docs/Web/CSS/border-inline-width) + - [border-start-end-radius](https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius) + - [border-start-start-radius](https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius) + - [float: start](https://developer.mozilla.org/docs/Web/CSS/float) + - [inline-size](https://developer.mozilla.org/docs/Web/CSS/inline-size) + - [margin-block](https://developer.mozilla.org/docs/Web/CSS/margin-block) + - [margin-block-end](https://developer.mozilla.org/docs/Web/CSS/margin-block-end) + - [margin-block-start](https://developer.mozilla.org/docs/Web/CSS/margin-block-start) + - [margin-inline](https://developer.mozilla.org/docs/Web/CSS/margin-inline) + - [margin-inline-end](https://developer.mozilla.org/docs/Web/CSS/margin-inline-end) + - [margin-inline-start](https://developer.mozilla.org/docs/Web/CSS/margin-inline-start) + - [max-block-size](https://developer.mozilla.org/docs/Web/CSS/max-block-size) + - [max-inline-size](https://developer.mozilla.org/docs/Web/CSS/max-inline-size) + - [min-block-size](https://developer.mozilla.org/docs/Web/CSS/min-block-size) + - [min-inline-size](https://developer.mozilla.org/docs/Web/CSS/min-inline-size) + - [overflow-block](https://developer.mozilla.org/docs/Web/CSS/overflow-block) + - [overflow-inline](https://developer.mozilla.org/docs/Web/CSS/overflow-inline) + - [overscroll-behavior-block](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-block) + - [overscroll-behavior-inline](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-inline) + - [padding-block](https://developer.mozilla.org/docs/Web/CSS/padding-block) + - [padding-block-end](https://developer.mozilla.org/docs/Web/CSS/padding-block-end) + - [padding-block-start](https://developer.mozilla.org/docs/Web/CSS/padding-block-start) + - [padding-inline](https://developer.mozilla.org/docs/Web/CSS/padding-inline) + - [padding-inline-end](https://developer.mozilla.org/docs/Web/CSS/padding-inline-end) + - [padding-inline-start](https://developer.mozilla.org/docs/Web/CSS/padding-inline-start) + - [text-align: start | end](https://developer.mozilla.org/docs/Web/CSS/text-align) + - [writing-mode](https://developer.mozilla.org/docs/Web/CSS/writing-mode) + +
+ +
+ Misc + + - [all](https://developer.mozilla.org/docs/Web/CSS/all) + - caret + - [caret-color](https://developer.mozilla.org/docs/Web/CSS/caret-color) + - caret-shape + - [touch-action](https://developer.mozilla.org/docs/Web/CSS/touch-action) + - [unset](https://developer.mozilla.org/docs/Web/CSS/unset) + - [user-select](https://developer.mozilla.org/docs/Web/CSS/user-select) + - [revert](https://developer.mozilla.org/docs/Web/CSS/revert) + +
+ +
+ Print + + - [page-orientation (@page)](https://developer.mozilla.org/docs/Web/CSS/@page/page-orientation) + - [print-color-adjust](https://developer.mozilla.org/docs/Web/CSS/print-color-adjust) + +
+ +
+ Pseudo-classes + + - [:current](https://developer.mozilla.org/docs/Web/CSS/:current) + - [:defined](https://developer.mozilla.org/docs/Web/CSS/:defined) + - [:dir](https://developer.mozilla.org/docs/Web/CSS/:dir) + - [:focus-visible](https://developer.mozilla.org/docs/Web/CSS/:focus-visible) + - [:focus-within](https://developer.mozilla.org/docs/Web/CSS/:focus-within) + - [:fullscreen](https://developer.mozilla.org/docs/Web/CSS/:fullscreen) + - [:future](https://developer.mozilla.org/docs/Web/CSS/:future) + - [:host-context()](https://developer.mozilla.org/docs/Web/CSS/:host-context) + - [:host()](https://developer.mozilla.org/docs/Web/CSS/:host_function) + - [:paused](https://developer.mozilla.org/docs/Web/CSS/:paused) + - [:playing](https://developer.mozilla.org/docs/Web/CSS/:playing) + - [:user-invalid](https://developer.mozilla.org/docs/Web/CSS/:user-invalid) + - [:user-valid](https://developer.mozilla.org/docs/Web/CSS/:user-valid) + +
+ +
+ Pseudo-elements + + - [::backdrop](https://developer.mozilla.org/docs/Web/CSS/::backdrop) + - [::cue](https://developer.mozilla.org/docs/Web/CSS/::cue) + - [::cue-region](https://developer.mozilla.org/docs/Web/CSS/::cue-region) + - [::part](https://developer.mozilla.org/docs/Web/CSS/::part) + - [::slotted](https://developer.mozilla.org/docs/Web/CSS/::slotted) + +
+ +
+ Relative units + + - [length#vb](https://developer.mozilla.org/docs/Web/CSS/length#relative_length_units_based_on_viewport) + - [length#vh](https://developer.mozilla.org/docs/Web/CSS/length#relative_length_units_based_on_viewport) + - [length#vi](https://developer.mozilla.org/docs/Web/CSS/length#relative_length_units_based_on_viewport) + - [length#vmax](https://developer.mozilla.org/docs/Web/CSS/length#relative_length_units_based_on_viewport) + - [length#vmin](https://developer.mozilla.org/docs/Web/CSS/length#relative_length_units_based_on_viewport) + - [length#vw](https://developer.mozilla.org/docs/Web/CSS/length#relative_length_units_based_on_viewport) + +
+ +
+ Scroll + + - [overflow-anchor](https://developer.mozilla.org/docs/Web/CSS/overflow-anchor) + - [overscroll-behavior](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior) + - [overscroll-behavior-x](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-x) + - [overscroll-behavior-y](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-y) + - [scroll-behavior](https://developer.mozilla.org/docs/Web/CSS/scroll-behavior) + - [scroll-margin](https://developer.mozilla.org/docs/Web/CSS/scroll-margin) + - [scroll-margin-block](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block) + - [scroll-margin-block-end](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-end) + - [scroll-margin-block-start](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-start) + - [scroll-margin-bottom](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom) + - [scroll-margin-inline](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline) + - [scroll-margin-inline-end](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-end) + - [scroll-margin-inline-start](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-start) + - [scroll-margin-left](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left) + - [scroll-margin-right](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right) + - [scroll-margin-top](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top) + - [scroll-padding](https://developer.mozilla.org/docs/Web/CSS/scroll-padding) + - [scroll-padding-block](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block) + - [scroll-padding-block-end](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-end) + - [scroll-padding-block-start](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-start) + - [scroll-padding-bottom](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-bottom) + - [scroll-padding-inline](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline) + - [scroll-padding-inline-end](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-end) + - [scroll-padding-inline-start](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-start) + - [scroll-padding-left](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-left) + - [scroll-padding-right](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-right) + - [scroll-padding-top](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-top) + - [scroll-snap-align](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align) + - [scroll-snap-stop](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop) + - [scroll-snap-type](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type) + +
+ +
+ Typography + + - @annotation + - @character-variant + - [@font-feature-values](https://developer.mozilla.org/docs/Web/CSS/@font-feature-values) + - [@font-palette-values](https://developer.mozilla.org/docs/Web/CSS/@font-palette-values) + - @ornaments + - @styleset + - @stylistic + - @swash + - [-webkit-line-clamp](https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp) + - annotation() + - [base-palette (@font-palette-values)](https://developer.mozilla.org/docs/Web/CSS/@font-palette-values/base-palette) + - character-variant() + - [local()](https://developer.mozilla.org/docs/Web/CSS/@font-face) + - [font-family (@font-palette-values)](https://developer.mozilla.org/docs/Web/CSS/@font-palette-values) + - [font-optical-sizing](https://developer.mozilla.org/docs/Web/CSS/font-optical-sizing) + - [font-palette](https://developer.mozilla.org/docs/Web/CSS/font-palette) + - [font-synthesis](https://developer.mozilla.org/docs/Web/CSS/font-synthesis) + - [font-synthesis-small-caps](https://developer.mozilla.org/docs/Web/CSS/font-synthesis-small-caps) + - [font-synthesis-style](https://developer.mozilla.org/docs/Web/CSS/font-synthesis-style) + - [font-synthesis-weight](https://developer.mozilla.org/docs/Web/CSS/font-synthesis-weight) + - [font-variant](https://developer.mozilla.org/docs/Web/CSS/font-variant) + - [font-variant (@font-face)](https://developer.mozilla.org/docs/Web/CSS/@font-face) + - [font-variant-alternates](https://developer.mozilla.org/docs/Web/CSS/font-variant-alternates) + - [font-variant-caps](https://developer.mozilla.org/docs/Web/CSS/font-variant-caps) + - [font-variant-east-asian](https://developer.mozilla.org/docs/Web/CSS/font-variant-east-asian) + - [font-variant-emoji](https://developer.mozilla.org/docs/Web/CSS/font-variant-emoji) + - [font-variant-ligatures](https://developer.mozilla.org/docs/Web/CSS/font-variant-ligatures) + - [font-variant-numeric](https://developer.mozilla.org/docs/Web/CSS/font-variant-numeric) + - [font-variant-position](https://developer.mozilla.org/docs/Web/CSS/font-variant-position) + - [font-variation-settings](https://developer.mozilla.org/docs/Web/CSS/font-variation-settings) + - [font-variation-settings (@font-face)](https://developer.mozilla.org/docs/Web/CSS/@font-face) + - [hanging-punctuation](https://developer.mozilla.org/docs/Web/CSS/hanging-punctuation) + - [hyphens](https://developer.mozilla.org/docs/Web/CSS/hyphens) + - [line-gap-override (@font-face)](https://developer.mozilla.org/docs/Web/CSS/@font-face) + - styleset() + - stylistic() + - swash() + - [text-combine-upright](https://developer.mozilla.org/docs/Web/CSS/text-combine-upright) + - [text-decoration-color](https://developer.mozilla.org/docs/Web/CSS/text-decoration-color) + - [text-decoration-line](https://developer.mozilla.org/docs/Web/CSS/text-decoration-line) + - [text-decoration-skip](https://developer.mozilla.org/docs/Web/CSS/text-decoration-skip) + - [text-decoration-skip-ink](https://developer.mozilla.org/docs/Web/CSS/text-decoration-skip-ink) + - [text-decoration-style](https://developer.mozilla.org/docs/Web/CSS/text-decoration-style) + - [text-decoration-thickness](https://developer.mozilla.org/docs/Web/CSS/text-decoration-thickness) + - [text-emphasis](https://developer.mozilla.org/docs/Web/CSS/text-emphasis) + - [text-emphasis-color](https://developer.mozilla.org/docs/Web/CSS/text-emphasis-color) + - [text-emphasis-position](https://developer.mozilla.org/docs/Web/CSS/text-emphasis-position) + - [text-emphasis-style](https://developer.mozilla.org/docs/Web/CSS/text-emphasis-style) + - [text-orientation](https://developer.mozilla.org/docs/Web/CSS/text-orientation) + - [text-underline-offset](https://developer.mozilla.org/docs/Web/CSS/text-underline-offset) + - [text-underline-position](https://developer.mozilla.org/docs/Web/CSS/text-underline-position) + - ornaments() + +
+ +CSS5 {#css-5} +------------- + +
+ Animation + + - [animation-composition](https://developer.mozilla.org/docs/Web/CSS/animation-composition) + - [offset-anchor](https://developer.mozilla.org/docs/Web/CSS/offset-anchor) + - [offset-distance](https://developer.mozilla.org/docs/Web/CSS/offset-distance) + - [offset-path](https://developer.mozilla.org/docs/Web/CSS/offset-path) + - [offset-position](https://developer.mozilla.org/docs/Web/CSS/offset-position) + - [offset-rotate](https://developer.mozilla.org/docs/Web/CSS/offset-rotate) + +
+ +
+ At-rules + + - @custom-media + - [@layer](https://developer.mozilla.org/docs/Web/CSS/@layer) + - [@scope](https://developer.mozilla.org/docs/Web/CSS/@scope) + - [@scope :scope](https://developer.mozilla.org/docs/Web/CSS/:scope) + - [@starting-style](https://developer.mozilla.org/docs/Web/CSS/@starting-style) + - [@supports selector()](https://developer.mozilla.org/docs/Web/CSS/@supports) + - [override-colors (@font-palette-values)](https://developer.mozilla.org/docs/Web/CSS/@font-palette-values/override-colors) + - [syntax (@property)](https://developer.mozilla.org/docs/Web/CSS/@property) + +
+ +
+ Cascade Layers + + - [layer()](https://developer.mozilla.org/docs/Web/CSS/@layer) + - [layer() (@import)](https://developer.mozilla.org/docs/Web/CSS/@layer) + - [revert-layer](https://developer.mozilla.org/docs/Web/CSS/revert-layer) + +
+ +
+ Colors & theming + + - [accent-color](https://developer.mozilla.org/docs/Web/CSS/accent-color) + - [color-scheme](https://developer.mozilla.org/docs/Web/CSS/color-scheme) + - [color-mix()](https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix) + - [color() - display-p3, rec2020, a98, prophoto, xyz, xyz-d50, xyz-d65](https://developer.mozilla.org/docs/Web/CSS/color_value/color) + - [color(from ...) - relative color syntax](https://developer.mozilla.org/docs/Web/CSS/color_value/color) + - [Hue interpolation (gradients "in" syntax, "hue longer" syntax)](https://developer.mozilla.org/docs/Web/CSS/hue-interpolation-method) + - [hwb()](https://developer.mozilla.org/docs/Web/CSS/color_value/hwb) + - [oklab()](https://developer.mozilla.org/docs/Web/CSS/color_value/oklab) + - [oklch()](https://developer.mozilla.org/docs/Web/CSS/color_value/oklch) + - [lab()](https://developer.mozilla.org/docs/Web/CSS/color_value/lab) + - [lch()](https://developer.mozilla.org/docs/Web/CSS/color_value/lch) + +
+ +
+ Container Queries + + - [length#cqw, cqi, cqb, cqh, cqmax, cqmin](https://developer.mozilla.org/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units) + - [contain-intrinsic-block-size](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-block-size) + - [contain-intrinsic-height](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-height) + - [contain-intrinsic-inline-size](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-inline-size) + - [contain-intrinsic-size](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size) + - [contain-intrinsic-width](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-width) + - [container](https://developer.mozilla.org/docs/Web/CSS/container) + - [container-name](https://developer.mozilla.org/docs/Web/CSS/container-name) + - [container-type](https://developer.mozilla.org/docs/Web/CSS/container-type) + +
+ +
+ Logical Properites + + - [inset](https://developer.mozilla.org/docs/Web/CSS/inset) + - [inset-block](https://developer.mozilla.org/docs/Web/CSS/inset-block) + - [inset-block-end](https://developer.mozilla.org/docs/Web/CSS/inset-block-end) + - [inset-block-start](https://developer.mozilla.org/docs/Web/CSS/inset-block-start) + - [inset-inline](https://developer.mozilla.org/docs/Web/CSS/inset-inline) + - [inset-inline-end](https://developer.mozilla.org/docs/Web/CSS/inset-inline-end) + - [inset-inline-start](https://developer.mozilla.org/docs/Web/CSS/inset-inline-start) + +
+ +
+ Math Functions + + - [abs()](https://developer.mozilla.org/docs/Web/CSS/abs) + - [acos()](https://developer.mozilla.org/docs/Web/CSS/acos) + - [asin()](https://developer.mozilla.org/docs/Web/CSS/asin) + - [atan()](https://developer.mozilla.org/docs/Web/CSS/atan) + - [atan2()](https://developer.mozilla.org/docs/Web/CSS/atan2) + - [cos()](https://developer.mozilla.org/docs/Web/CSS/cos) + - [exp()](https://developer.mozilla.org/docs/Web/CSS/exp) + - [hypot()](https://developer.mozilla.org/docs/Web/CSS/hypot) + - [log()](https://developer.mozilla.org/docs/Web/CSS/log) + - [mod()](https://developer.mozilla.org/docs/Web/CSS/mod) + - [pow()](https://developer.mozilla.org/docs/Web/CSS/pow) + - [rem()](https://developer.mozilla.org/docs/Web/CSS/rem) + - [round()](https://developer.mozilla.org/docs/Web/CSS/round) + - [sin()](https://developer.mozilla.org/docs/Web/CSS/sin) + - [sign()](https://developer.mozilla.org/docs/Web/CSS/sign) + - [sqrt()](https://developer.mozilla.org/docs/Web/CSS/sqrt) + - [tan()](https://developer.mozilla.org/docs/Web/CSS/tan) + +
+ +
+ Pseudo-classes + + - [:has()](https://developer.mozilla.org/docs/Web/CSS/:has) + - [:is()](https://developer.mozilla.org/docs/Web/CSS/:is) + - [:nth-child(An+B of S)](https://developer.mozilla.org/docs/Web/CSS/:nth-child#using_of_selector) + - [:picture-in-picture](https://developer.mozilla.org/docs/Web/CSS/:picture-in-picture) + - [:popover-open](https://developer.mozilla.org/docs/Web/CSS/:popover-open) + - [:where()](https://developer.mozilla.org/docs/Web/CSS/:where) + +
+ +
+ Pseudo-elements + + - [::grammar-error](https://developer.mozilla.org/docs/Web/CSS/::grammar-error) + - [::marker](https://developer.mozilla.org/docs/Web/CSS/::marker) + - [::spelling-error](https://developer.mozilla.org/docs/Web/CSS/::spelling-error) + +
+ +
+ Relative Units + + - [Dynamic Viewport Units (dvh, lvh & svh)](https://developer.mozilla.org/docs/Web/CSS/length#relative_length_units_based_on_viewport) + - [length#cap](https://developer.mozilla.org/docs/Web/CSS/length#cap) + - [length#ex, length#rex](https://developer.mozilla.org/docs/Web/CSS/length#ex) + - [length#ic, length#ric](https://developer.mozilla.org/docs/Web/CSS/length#ic) + - [length#lh, length#rlh](https://developer.mozilla.org/docs/Web/CSS/length#lh) + +
+ +
+ Scroll + + - [content-visibility](https://developer.mozilla.org/docs/Web/CSS/content-visibility) + - [overflow: clip](https://developer.mozilla.org/docs/Web/CSS/overflow) + - [overflow-clip-margin](https://developer.mozilla.org/docs/Web/CSS/overflow-clip-margin) + - [scrollbar-color](https://developer.mozilla.org/docs/Web/CSS/scrollbar-color) + - [scrollbar-gutter](https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter) + - [scrollbar-width](https://developer.mozilla.org/docs/Web/CSS/scrollbar-width) + +
+ +
+ Scroll-driven animations + + - [animation-range](https://developer.mozilla.org/docs/Web/CSS/animation-range) + - [animation-range-end](https://developer.mozilla.org/docs/Web/CSS/animation-range-end) + - [animation-range-start](https://developer.mozilla.org/docs/Web/CSS/animation-range-start) + - [animation-timeline](https://developer.mozilla.org/docs/Web/CSS/animation-timeline) + - [scroll-timeline](https://developer.mozilla.org/docs/Web/CSS/scroll-timeline) + - [scroll-timeline-axis](https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-axis) + - [scroll-timeline-name](https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-name) + - [scroll()](https://developer.mozilla.org/docs/Web/CSS/animation-timeline/scroll) + - [timeline-scope](https://developer.mozilla.org/docs/Web/CSS/timeline-scope) + - [view-timeline](https://developer.mozilla.org/docs/Web/CSS/view-timeline) + - [view-timeline-axis](https://developer.mozilla.org/docs/Web/CSS/view-timeline-axis) + - [view-timeline-inset](https://developer.mozilla.org/docs/Web/CSS/view-timeline-inset) + - [view-timeline-name](https://developer.mozilla.org/docs/Web/CSS/view-timeline-name) + +
+ +
+ Transition & Transforms + + - [overlay](https://developer.mozilla.org/docs/Web/CSS/overlay) + - [rotate](https://developer.mozilla.org/docs/Web/CSS/rotate) + - [scale](https://developer.mozilla.org/docs/Web/CSS/scale) + - [transition-behavior](https://developer.mozilla.org/docs/Web/CSS/transition-behavior) + - [translate](https://developer.mozilla.org/docs/Web/CSS/translate) + +
+ +
+ Typography + + - [ascent-override (@font-face)](https://developer.mozilla.org/docs/Web/CSS/@font-face/ascent-override) + - [descent-override (@font-face)](https://developer.mozilla.org/docs/Web/CSS/@font-face/descent-override) + - [font-size-adjust](https://developer.mozilla.org/docs/Web/CSS/font-size-adjust) + - [font-synthesis-position](https://developer.mozilla.org/docs/Web/CSS/font-synthesis-position) + - [hyphenate-character](https://developer.mozilla.org/docs/Web/CSS/hyphenate-character) + - [hyphenate-limit-chars](https://developer.mozilla.org/docs/Web/CSS/hyphenate-limit-chars) + - [initial-letter](https://developer.mozilla.org/docs/Web/CSS/initial-letter) + - [initial-letter-align](https://developer.mozilla.org/docs/Web/CSS/initial-letter-align) + - text-box-trim + - [text-wrap: balance | pretty](https://developer.mozilla.org/docs/Web/CSS/text-wrap) + +
+ +
+ View transitions + + - [::view-transition](https://developer.mozilla.org/docs/Web/CSS/::view-transition) + - [::view-transition-group](https://developer.mozilla.org/docs/Web/CSS/::view-transition-group) + - [::view-transition-image-pair](https://developer.mozilla.org/docs/Web/CSS/::view-transition-image-pair) + - [::view-transition-new](https://developer.mozilla.org/docs/Web/CSS/::view-transition-new) + - [::view-transition-old](https://developer.mozilla.org/docs/Web/CSS/::view-transition-old) + - @view-transition + - view-transition-class + - [view-transition-name](https://developer.mozilla.org/docs/Web/CSS/view-transition-name) + - view-transition-type + +
+ +Future (Uncategorized, out of scope for CSS4/5) {#css-uncategorized} +-------------------------------------------------------------------- + +
+ Align + + - [align-tracks](https://developer.mozilla.org/docs/Web/CSS/align-tracks) + - [justify-tracks](https://developer.mozilla.org/docs/Web/CSS/justify-tracks) + +
+ +
+ Anchoring + + - anchor() + +
+ + +
+ Aural CSS + + - [speak-as (@counter-style)](https://developer.mozilla.org/docs/Web/CSS/@counter-style/speak-as) + +
+ +
+ Color + + - [contrast-color()](https://developer.mozilla.org/docs/Web/CSS/color_value/color-contrast) + +
+ +
+Container Queries + + - [Style queries](https://developer.mozilla.org/docs/Web/CSS/@container#container_style_queries) + +
+ +
+ Functions + + - [element()](https://developer.mozilla.org/docs/Web/CSS/element) + - [image()](https://developer.mozilla.org/docs/Web/CSS/image/image) + +
+ +
+ Grid + + - [masonry-auto-flow](https://developer.mozilla.org/docs/Web/CSS/masonry-auto-flow) + +
+ +
+ Pseudo-classes + + - [:modal](https://developer.mozilla.org/docs/Web/CSS/:modal) + - [:target-within](https://developer.mozilla.org/docs/Web/CSS/:target-within) + - :top-layer + +
+ +
+ Pseudo-elements + + - [::target-text](https://developer.mozilla.org/docs/Web/CSS/::target-text) + +
+
+ Scroll + + - target-text() + +
+ +
+ Text Fragmentation + + - [orphans](https://developer.mozilla.org/docs/Web/CSS/orphans) + +
+ +
+ Typography + + - [line-clamp](https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp) + - [line-height-step](https://developer.mozilla.org/docs/Web/CSS/line-height-step) + - [margin-trim](https://developer.mozilla.org/docs/Web/CSS/margin-trim) + - [text-size-adjust](https://developer.mozilla.org/docs/Web/CSS/text-size-adjust) + - [white-space-collapse](https://developer.mozilla.org/docs/Web/CSS/white-space-collapse) + - white-space-trim + +
+ +
+ Units + + - [frequency#Hz](https://developer.mozilla.org/docs/Web/CSS/frequency) + +
\ No newline at end of file diff --git a/csswg/levels/index.html b/csswg/levels/index.html new file mode 100644 index 0000000..e752142 --- /dev/null +++ b/csswg/levels/index.html @@ -0,0 +1,1574 @@ + + + + + CSS Levels + + + + + + + + + + + + + + + +
+

+

CSS Levels

+

Draft Community Group Report,

+
+ More details about this document +
+
+
This version: +
https://drafts.csswg.org/CSS/levels/ +
Previous Versions: +
+
Issue Tracking: +
GitHub +
Editors: +
Una Kravets (Google) +
Adam Argyle (Google) +
Brecht De Ruyte +
Quentin Albert +
+
+
+
+ +
+
+
+

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.

+
+

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 + +
+
+ At-rules + +
+
+ Blend Modes + +
+
+ Clipping, shapes & masking + +
+
+ Contain + +
+
+ Counter + +
+
+ Flex + +
+
+ Functions + +
+
+ Gradient + +
+
+ Grid + +
+
+ Image / Video + +
+
+ Logical Properties + +
+
+ Misc + +
+
+ Print + +
+
+ Pseudo-classes + +
+
+ Pseudo-elements + +
+
+ Relative units + +
+
+ Scroll + +
+
+ Typography + +
+

2.2. CSS5

+
+ Animation + +
+
+ At-rules + +
+
+ Cascade Layers + +
+
+ Colors & theming + +
+
+ Container Queries + +
+
+ Logical Properites + +
+
+ Math Functions + +
+
+ Pseudo-classes + +
+
+ Pseudo-elements + +
+
+ Relative Units + +
+
+ Scroll + +
+
+ Scroll-driven animations + +
+
+ Transition & Transforms + +
+
+ Typography + +
+
+ View transitions + +
+

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

+
+ Align + +
+
+ Anchoring + +
+
+ Aural CSS + +
+
+ Color + +
+
+ Container Queries + +
+
+ Functions + +
+
+ Grid + +
+
+ Pseudo-classes + +
+
+ Pseudo-elements + +
+
+ Scroll + +
+
+ Text Fragmentation + +
+
+ Typography + +
+
+ Units + +
+
+
+

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.

+
+ +

References

+

Normative References

+
+
[RFC2119] +
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119 +
\ No newline at end of file