1. Introduction
+The term "CSS3" has been widely used to encompass various additions and enhancements +to Cascading Style Sheets (CSS) since around 2010. However, 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) proposes +the categorization of CSS properties into distinct groups, namely CSS3, CSS4, and CSS5, +to better organize and facilitate understanding of the evolving CSS landscape. +This categorization aims to improve adoption and ease of teaching, while not having a +direct impact towards the CSS Working Group (CSSWG) operations or the +[Baseline initiative](https://github.com/web-platform-dx/web-features/blob/main/docs/baseline.md).
+2. Categorization
+Categorization is based on a variety of factors with the primary factor being the +general timeline that an API was initially specified in the CSS Working Group. +Additionally, implementer interest and adoption were moderately taken into account +in the categorization process.
+-
+
-
+
**CSS3:** This category was established before this community group began articulating levels and was defined by the CSSWG, and was designed to be open ended. It serves as a historical reference point for CSS advancements up to a certain point.
+ -
+
**CSS4:** Properties and features introduced in a spec around 2013 - 2018.
+ -
+
**CSS5:** Properties and features introduced in a spec around 2019 - 2024.
+ -
+
**Future/Next**: This category is a placeholder for properties and features that are currently in development or proposed for future versions of CSS beyond CSS5.
+
3. List of CSS4 and CSS5 features
+This list should be handled as a work in progress.
+4. CSS4
+Align
+| Property | Notes | +|-------------------------------------------------------------------------------------|-------| +| [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) | | +| [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | | +| [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) | | +| [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) | | +| [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | | +| [justify-items](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) | | +| [justify-self](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) | | +| [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) | | +| [place-content](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content) | | +| [place-items](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) | | +| [place-self](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) | | +| [row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) | |
+Animation
+| Property | Notes | +|---------------------------------------------------------------------------------|-------------| +| Animate grid tracks | CSS feature | +| [offset](https://developer.mozilla.org/en-US/docs/Web/CSS/offset) | | +| [ray()](https://developer.mozilla.org/en-US/docs/Web/CSS/ray) | | +| [transform-box](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box) | | +| [will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) | |
+At-rules
+| Property | Notes | +|---------------------------------------------------------------------------------------------|-------| +| [@forced-colors](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors) | | +| @media range-syntax | | +| [@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) | | +| [forced-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust) | |
+Blend Modes
+| Property | Notes | +|-------------------------------------------------------------------------|-------| +| [isolation](https://developer.mozilla.org/en-US/docs/Web/CSS/isolation) | |
+Clipping, shapes & masking
+| Property | Notes | +|-------------------------------------------------------------------------------------------------|-------| +| [circle()](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/circle) | | +| [clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) | | +| [ellipse()](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/ellipse) | | +| [mask-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode) | | +| [shape-image-threshold](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold) | | +| [shape-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin) | | +| [shape-outside](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside) | |
+Contain
+| Property | Notes | +|---------------------------------------------------------------------|-------| +| [contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) | |
+Counter
+| Property | Notes | +|-------------------------------------------------------------------------------------------------------|-------| +| [@counter-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style) | | +| [counter-set](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set) | | +| [fallback (@counter-style)](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/fallback) | | +| [suffix (@counter-style)](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/suffix) | | +| [symbols (@counter-style)](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/symbols) | | +| [symbols()](https://developer.mozilla.org/en-US/docs/Web/CSS/symbols) | | +| [system (@counter-style)](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/system) | |
+Flex
+| Property | Notes | +|-----------------------------------------------------------------------------------|-------| +| [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | | +| flex_value#fr | | +| [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) | | +| [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) | | +| [flex-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow) | | +| [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) | | +| [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) | | +| [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | |
+Functions
+| Property | Notes | +|----------------------------------------------------------------------------------------|-------| +| [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) | | +| [env()](https://developer.mozilla.org/en-US/docs/Web/CSS/env) | | +| [fit-content](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content) | | +| [fit-content()](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function) | | +| [max()](https://developer.mozilla.org/en-US/docs/Web/CSS/max) | | +| [min()](https://developer.mozilla.org/en-US/docs/Web/CSS/min) | | +| [minmax()](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax) | | +| [repeat()](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat) | | +| [var(), --*](https://developer.mozilla.org/en-US/docs/Web/CSS/var) | |
+Gradient
+| Property | Notes | +|----------------------------------------------------------------------------------------------|-------| +| [conic-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient) | |
+Grid
+| Property | Notes | +|-------------------------------------------------------------------------------------------------|-------| +| [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) | | +| [grid-area](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) | | +| [grid-auto-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) | | +| [grid-auto-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) | | +| [grid-auto-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) | | +| [grid-column](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) | | +| [grid-column-end](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) | | +| [grid-column-start](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) | | +| [grid-row](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) | | +| [grid-row-end](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) | | +| [grid-row-start](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) | | +| [grid-template](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) | | +| [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) | | +| [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) | | +| [grid-template-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) | | +| [Subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) | |
+Image / Video
+| Property | Notes | +|----------------------------------------------------------------------------------------|-------| +| [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) | | +| [cross-fade()](https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade) | | +| [image-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation) | | +| [image-resolution](https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution) | | +| [image-set()](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set) | |
+Logical Properties
+| Property | Notes | +|-----------------------------------------------------------------------------------------------------------|-------------| +| [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size) | | +| [border-block](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block) | | +| [border-block-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color) | | +| [border-block-end](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end) | | +| [border-block-end-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color) | | +| [border-block-end-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style) | | +| [border-block-end-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width) | | +| [border-block-start](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start) | | +| [border-block-start-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color) | | +| [border-block-start-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style) | | +| [border-block-start-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width) | | +| [border-block-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-style) | | +| [border-block-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-width) | | +| [border-end-end-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius) | | +| [border-end-start-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius) | | +| [border-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline) | | +| [border-inline-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color) | | +| [border-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end) | | +| [border-inline-end-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color) | | +| [border-inline-end-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style) | | +| [border-inline-end-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width) | | +| [border-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start) | | +| [border-inline-start-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color) | | +| [border-inline-start-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style) | | +| [border-inline-start-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width) | | +| [border-inline-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-style) | | +| [border-inline-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width) | | +| [border-start-end-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius) | | +| [border-start-start-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius) | | +| [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) | start / end | +| [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size) | | +| [margin-block](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block) | | +| [margin-block-end](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end) | | +| [margin-block-start](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start) | | +| [margin-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline) | | +| [margin-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end) | | +| [margin-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start) | | +| [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size) | | +| [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size) | | +| [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size) | | +| [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size) | | +| [overflow-block](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block) | | +| [overflow-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline) | | +| [overscroll-behavior-block](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block) | | +| [overscroll-behavior-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-inline) | | +| [padding-block](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block) | | +| [padding-block-end](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end) | | +| [padding-block-start](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start) | | +| [padding-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline) | | +| [padding-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end) | | +| [padding-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start) | | +| [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) | start / end | +| [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) | |
+Misc
+| Property | Notes | +|-------------------------------------------------------------------------------|-------| +| [all](https://developer.mozilla.org/en-US/docs/Web/CSS/all) | | +| caret | | +| [caret-color](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color) | | +| caret-shape | | +| [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) | | +| [unset](https://developer.mozilla.org/en-US/docs/Web/CSS/unset) | | +| [user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) | | +| [revert](https://developer.mozilla.org/en-US/docs/Web/CSS/revert) | |
+| Property | Notes | +|-----------------------------------------------------------------------------------------------------|-------| +| [page-orientation (@page)](https://developer.mozilla.org/en-US/docs/Web/CSS/@page/page-orientation) | | +| [print-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust) | |
+Pseudo-classes
+| Property | Notes | +|-----------------------------------------------------------------------------------|-------| +| [:current](https://developer.mozilla.org/en-US/docs/Web/CSS/:current) | | +| [:defined](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) | | +| [:dir](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) | | +| [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) | | +| [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) | | +| [:fullscreen](https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen) | | +| [:future](https://developer.mozilla.org/en-US/docs/Web/CSS/:future) | | +| [:host-context()](https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context) | | +| [:host()](https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function) | | +| [:paused](https://developer.mozilla.org/en-US/docs/Web/CSS/:paused) | | +| [:playing](https://developer.mozilla.org/en-US/docs/Web/CSS/:playing) | | +| [:user-invalid](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid) | | +| [:user-valid](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid) | |
+Pseudo-elements
+| Property | Notes | +|-------------------------------------------------------------------------------|-------| +| [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop) | | +| [::cue](https://developer.mozilla.org/en-US/docs/Web/CSS/::cue) | | +| [::cue-region](https://developer.mozilla.org/en-US/docs/Web/CSS/::cue-region) | | +| [::part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) | | +| [::slotted](https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted) | |
+Relative units
+| Property | Notes | +|----------------------------------------------------------------------------------------------------------------|-------| +| [length#vb](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport) | | +| [length#vh](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport) | | +| [length#vi](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport) | | +| [length#vmax](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport) | | +| [length#vmin](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport) | | +| [length#vw](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport) | |
+Scroll
+| Property | Notes | +|-------------------------------------------------------------------------------------------------------------|-------| +| [overflow-anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor) | | +| [overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) | | +| [overscroll-behavior-x](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x) | | +| [overscroll-behavior-y](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y) | | +| [scroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) | | +| [scroll-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin) | | +| [scroll-margin-block](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block) | | +| [scroll-margin-block-end](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-end) | | +| [scroll-margin-block-start](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-start) | | +| [scroll-margin-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-bottom) | | +| [scroll-margin-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline) | | +| [scroll-margin-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-end) | | +| [scroll-margin-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-start) | | +| [scroll-margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-left) | | +| [scroll-margin-right](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-right) | | +| [scroll-margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top) | | +| [scroll-padding](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding) | | +| [scroll-padding-block](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block) | | +| [scroll-padding-block-end](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-end) | | +| [scroll-padding-block-start](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-start) | | +| [scroll-padding-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom) | | +| [scroll-padding-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline) | | +| [scroll-padding-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-end) | | +| [scroll-padding-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-start) | | +| [scroll-padding-left](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left) | | +| [scroll-padding-right](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right) | | +| [scroll-padding-top](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top) | | +| [scroll-snap-align](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align) | | +| [scroll-snap-stop](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop) | | +| [scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) | |
+Typography
+| Property | Notes | +|---------------------------------------------------------------------------------------------------------------------------|-------| +| @annotation | | +| @character-variant | | +| [@font-feature-values](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values) | | +| [@font-palette-values](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values) | | +| @ornaments | | +| @styleset | | +| @stylistic | | +| @swash | | +| [-webkit-line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) | | +| annotation() | | +| [base-palette (@font-palette-values)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values/base-palette) | | +| character-variant() | | +| [local()](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) | | +| [font-family (@font-palette-values)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values) | | +| [font-optical-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing) | | +| [font-palette](https://developer.mozilla.org/en-US/docs/Web/CSS/font-palette) | | +| [font-synthesis](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis) | | +| [font-synthesis-small-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis-small-caps) | | +| [font-synthesis-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis-style) | | +| [font-synthesis-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis-weight) | | +| [font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) | | +| [font-variant (@font-face)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) | | +| [font-variant-alternates](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates) | | +| [font-variant-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps) | | +| [font-variant-east-asian](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian) | | +| [font-variant-emoji](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji) | | +| [font-variant-ligatures](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) | | +| [font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric) | | +| [font-variant-position](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position) | | +| [font-variation-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) | | +| [font-variation-settings (@font-face)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) | | +| [hanging-punctuation](https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation) | | +| [hyphens](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens) | | +| [line-gap-override (@font-face)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) | | +| styleset() | | +| stylistic() | | +| swash() | | +| [text-combine-upright](https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright) | | +| [text-decoration-color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color) | | +| [text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) | | +| [text-decoration-skip](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip) | | +| [text-decoration-skip-ink](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink) | | +| [text-decoration-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style) | | +| [text-decoration-thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) | | +| [text-emphasis](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis) | | +| [text-emphasis-color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color) | | +| [text-emphasis-position](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position) | | +| [text-emphasis-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style) | | +| [text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation) | | +| [text-underline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset) | | +| [text-underline-position](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position) | | +| ornaments() | |
+5. CSS5
+Animation
+| Property | Notes | +|-------------------------------------------------------------------------------------------------|-------| +| [animation-composition](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition) | | +| [offset-anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-anchor) | | +| [offset-distance](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance) | | +| [offset-path](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path) | | +| [offset-position](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-position) | | +| [offset-rotate](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-rotate) | |
+At-rules
+| Property | Notes | +|---------------------------------------------------------------------------------------------------------------------------------|-------| +| @custom-media | | +| [@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) | | +| [@scope](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope) | | +| [@scope :scope](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope) | | +| [@starting-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) | | +| [@supports selector()](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) | | +| [override-colors (@font-palette-values)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values/override-colors) | | +| [syntax (@property)](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) | |
+Cascade Layers
+| Property | Notes | +|-------------------------------------------------------------------------------|-------| +| [layer()](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) | | +| [layer() (@import)](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) | | +| [revert-layer](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer) | |
+Colors & theming
+| Property | Notes | +|---------------------------------------------------------------------------------------------------------------------------------------------|-------| +| [accent-color](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) | | +| [color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) | | +| [color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) | | +| [color() - display-p3, rec2020, a98, prophoto, xyz, xyz-d50, xyz-d65](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color) | | +| [color(from ...) - relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color) | | +| [Hue interpolation (gradients "in" syntax, "hue longer" syntax)](https://developer.mozilla.org/en-US/docs/Web/CSS/hue-interpolation-method) | | +| [hwb()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb) | | +| [oklab()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab) | | +| [oklch()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) | | +| [lab()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab) | | +| [lch()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch) | |
+Container Queries
+| Property | Notes | +|------------------------------------------------------------------------------------------------------------------------------------------------------------|-------| +| [length#cqw, cqi, cqb, cqh, cqmax, cqmin](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units) | | +| [contain-intrinsic-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-block-size) | | +| [contain-intrinsic-height](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-height) | | +| [contain-intrinsic-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-inline-size) | | +| [contain-intrinsic-size](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size) | | +| [contain-intrinsic-width](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-width) | | +| [container](https://developer.mozilla.org/en-US/docs/Web/CSS/container) | | +| [container-name](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name) | | +| [container-type](https://developer.mozilla.org/en-US/docs/Web/CSS/container-type) | |
+Logical Properites
+| Property | Notes | +|-------------------------------------------------------------------------------------------|-------| +| [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) | | +| [inset-block](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) | | +| [inset-block-end](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) | | +| [inset-block-start](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) | | +| [inset-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) | | +| [inset-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) | | +| [inset-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) | |
+Math Functions
+| Property | Notes | +|-------------------------------------------------------------------|-------| +| [abs()](https://developer.mozilla.org/en-US/docs/Web/CSS/abs) | | +| [acos()](https://developer.mozilla.org/en-US/docs/Web/CSS/acos) | | +| [asin()](https://developer.mozilla.org/en-US/docs/Web/CSS/asin) | | +| [atan()](https://developer.mozilla.org/en-US/docs/Web/CSS/atan) | | +| [atan2()](https://developer.mozilla.org/en-US/docs/Web/CSS/atan2) | | +| [cos()](https://developer.mozilla.org/en-US/docs/Web/CSS/cos) | | +| [exp()](https://developer.mozilla.org/en-US/docs/Web/CSS/exp) | | +| [hypot()](https://developer.mozilla.org/en-US/docs/Web/CSS/hypot) | | +| [log()](https://developer.mozilla.org/en-US/docs/Web/CSS/log) | | +| [mod()](https://developer.mozilla.org/en-US/docs/Web/CSS/mod) | | +| [pow()](https://developer.mozilla.org/en-US/docs/Web/CSS/pow) | | +| [rem()](https://developer.mozilla.org/en-US/docs/Web/CSS/rem) | | +| [round()](https://developer.mozilla.org/en-US/docs/Web/CSS/round) | | +| [sin()](https://developer.mozilla.org/en-US/docs/Web/CSS/sin) | | +| [sign()](https://developer.mozilla.org/en-US/docs/Web/CSS/sign) | | +| [sqrt()](https://developer.mozilla.org/en-US/docs/Web/CSS/sqrt) | | +| [tan()](https://developer.mozilla.org/en-US/docs/Web/CSS/tan) | |
+Pseudo-classes
+| Property | Notes | +|-----------------------------------------------------------------------------------------------------------|-------| +| [:has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) | | +| [:is()](https://developer.mozilla.org/en-US/docs/Web/CSS/:is) | | +| [:nth-child(An+B [of S]?)](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#using_of_selector) | | +| [:picture-in-picture](https://developer.mozilla.org/en-US/docs/Web/CSS/:picture-in-picture) | | +| [:popover-open](https://developer.mozilla.org/en-US/docs/Web/CSS/:popover-open) | | +| [:where()](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | |
+Pseudo-elements
+| Property | Notes | +|---------------------------------------------------------------------------------------|-------| +| [::grammar-error](https://developer.mozilla.org/en-US/docs/Web/CSS/::grammar-error) | | +| [::marker](https://developer.mozilla.org/en-US/docs/Web/CSS/::marker) | | +| [::spelling-error](https://developer.mozilla.org/en-US/docs/Web/CSS/::spelling-error) | |
+Relative Units
+| Property | Notes | +|--------------------------------------------------------------------------------------------------------------------------------------------|-------| +| [Dynamic Viewport Units (dvh, lvh & svh)](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport) | | +| [length#cap](https://developer.mozilla.org/en-US/docs/Web/CSS/length#cap) | | +| [length#ex, length#rex](https://developer.mozilla.org/en-US/docs/Web/CSS/length#ex) | | +| [length#ic, length#ric](https://developer.mozilla.org/en-US/docs/Web/CSS/length#ic) | | +| [length#lh, length#rlh](https://developer.mozilla.org/en-US/docs/Web/CSS/length#lh) | |
+Scroll
+| Property | Notes | +|-----------------------------------------------------------------------------------------------|------------| +| [content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) | | +| [overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) | clip value | +| [overflow-clip-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin) | | +| [scrollbar-color](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color) | | +| [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) | | +| [scrollbar-width](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width) | |
+Scroll-driven animations
+| Property | Notes | +|-------------------------------------------------------------------------------------------------|-------| +| [animation-range](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-range) | | +| [animation-range-end](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-range-end) | | +| [animation-range-start](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-range-start) | | +| [animation-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) | | +| [scroll-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline) | | +| [scroll-timeline-axis](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-axis) | | +| [scroll-timeline-name](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-name) | | +| [scroll()](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll) | | +| [timeline-scope](https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope) | | +| [view-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline) | | +| [view-timeline-axis](https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-axis) | | +| [view-timeline-inset](https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-inset) | | +| [view-timeline-name](https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-name) | |
+Transition & Transforms
+| Property | Notes | +|---------------------------------------------------------------------------------------------|-------| +| [overlay](https://developer.mozilla.org/en-US/docs/Web/CSS/overlay) | | +| [rotate](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate) | | +| [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/scale) | | +| [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) | | +| [translate](https://developer.mozilla.org/en-US/docs/Web/CSS/translate) | |
+Typography
+| Property | Notes | +|---------------------------------------------------------------------------------------------------------------|------------------| +| [ascent-override (@font-face)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override) | | +| [descent-override (@font-face)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override) | | +| [font-size-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust) | | +| [font-synthesis-position](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis-position) | | +| [hyphenate-character](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character) | | +| [hyphenate-limit-chars](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars) | | +| [initial-letter](https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter) | | +| [initial-letter-align](https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter-align) | | +| Text-box trim | | +| [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) | balance / pretty |
+View transitions
+| Property | Notes | +|---------------------------------------------------------------------------------------------------------------|-------| +| [::view-transition](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition) | | +| [::view-transition-group](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group) | | +| [::view-transition-image-pair](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-image-pair) | | +| [::view-transition-new](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-new) | | +| [::view-transition-old](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old) | | +| @view-transition | | +| view-transition-class | | +| [view-transition-name](https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name) | | +| view-transition-type | |
+6. Future (Uncategorized, out of scope for CSS4/5)
+Align
+| Property | Notes | +|-----------------------------------------------------------------------------------|-------| +| [align-tracks](https://developer.mozilla.org/en-US/docs/Web/CSS/align-tracks) | | +| [justify-tracks](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-tracks) | |
+Anchoring
+| Property | Notes | +|----------|-------| +| anchor() | |
+Aural CSS
+| Property | Notes | +|-------------------------------------------------------------------------------------------------------|-------| +| [speak-as (@counter-style)](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as) | |
+Color
+| Property | Notes | +|-------------------------------------------------------------------------------------------------|-------| +| [contrast-color()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast) | |
+Container Queries
+| Property | Notes | +|------------------------------------------------------------------------------------------------------|-------| +| [Style queries](https://developer.mozilla.org/en-US/docs/Web/CSS/@container#container_style_queries) | |
+Functions
+| Property | Notes | +|-------------------------------------------------------------------------|-------| +| [element()](https://developer.mozilla.org/en-US/docs/Web/CSS/element) | | +| [image()](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image) | |
+Grid
+| Property | Notes | +|-----------------------------------------------------------------------------------------|-------| +| [masonry-auto-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/masonry-auto-flow) | |
+Pseudo-classes
+| Property | Notes | +|-----------------------------------------------------------------------------------|-------| +| [:modal](https://developer.mozilla.org/en-US/docs/Web/CSS/:modal) | | +| [:target-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:target-within) | | +| :top-layer | |
+Pseudo-elements
+| Property | Notes | +|---------------------------------------------------------------------------------|-------| +| [::target-text](https://developer.mozilla.org/en-US/docs/Web/CSS/::target-text) | |
+Scroll
+| Property | Notes | +|---------------|-------| +| target-text() | |
+Text Fragmentation
+| Property | Notes | +|---------------------------------------------------------------------|-------| +| [orphans](https://developer.mozilla.org/en-US/docs/Web/CSS/orphans) | |
+Typography
+| Property | Notes | +|-----------------------------------------------------------------------------------------------|------------------------------| +| [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) | Currently -webkit-line-clamp | +| [line-height-step](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height-step) | | +| [margin-trim](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim) | | +| [text-size-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust) | | +| [white-space-collapse](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse) | | +| white-space-trim | |
+Units
+| Property | Notes | +|----------------------------------------------------------------------------|-------| +| [frequency#Hz](https://developer.mozilla.org/en-US/docs/Web/CSS/frequency) | |
+