Features

A property for defining the reset of all properties of an element

/* all-property */
a {
 all: initial;
}

Relative alpha colors

/* alpha-function */
p {
 color: alpha(from red / calc(alpha * 0.5));
}

A pseudo-class for matching anchor elements independent of whether they have been visited

/* any-link-pseudo-class */
nav :any-link > span {
 background-color: yellow;
}

A pseudo-class for matching form elements when they are empty

/* blank-pseudo-class */
input:blank {
 background-color: yellow;
}

Properties for defining the break behavior between and within boxes

/* break-properties */
a {
 break-inside: avoid;
 break-before: avoid-column;
 break-after: always;
}

The @layer at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.

/* cascade-layers */
/* Un-layered styles have the highest priority */
a {
 color: mediumvioletred;
}

@layer defaults {
 a { color: maroon; }
}

An attribute selector matching attribute values case-insensitively

/* case-insensitive-attributes */
[frame=hsides i] {
 border-style: solid none;
}

The clamp() CSS function clamps a value between an upper and lower bound. It enables selecting a middle value within a range of values between a defined minimum and maximum.

/* clamp */
button {
 font-size: clamp(1rem, 2.5vw, 2rem);
}

A function that allows a color to be specified in a particular, specified color space rather than the implicit sRGB color space that most of the other color functions operate in.

/* color-function */
p {
 color: color(display-p3 1 0.5 0);
 color: color(display-p3 1 0.5 0 / .5);
}

The display-p3-linear predefined color space is the same as display-p3 except that the transfer function is linear-light.

/* color-function-display-p3-linear */
p {
 color: color(display-p3-linear 0.3081 0.014 0.0567);
}

A space and slash separated notation for specifying colors

/* color-functional-notation */
em {
 background-color: hsl(120deg 100% 25%);
 color: rgb(0 255 0);
}

A function for mixing colors

/* color-mix */
p {
 color: color-mix(in lch, purple 50%, plum 50%);
}

Mix any number of colors

/* color-mix-variadic-function-arguments */
p {
 color: color-mix(in lch, red, lime, blue);
}

Declare a list of container queries in a single @container rule

/* container-rule-prelude-list */
@container card (inline-size > 30em), style(--responsive: true) {
 /* styles */
}

Syntax that allows setting alternative text

/* content-alt-text */
.element {
 content: url(tree.jpg) / "image with a tree";
}

Dynamically specifying a text color with adequate contrast.

/* contrast-color-function */
p {
 color: contrast-color( purple );
}

An at-rule for defining aliases that represent media queries

/* custom-media-queries */
@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {}

A syntax for defining custom values accepted by all CSS properties

/* custom-properties */
:root {
 --some-length: 32px;

 height: var(--some-length);
 width: var(--some-length);
}

An at-rule for defining aliases that represent selectors

/* custom-selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

article :--heading + p {}

A pseudo-class for matching elements based on their directionality

/* dir-pseudo-class */
blockquote:dir(rtl) {
 margin-right: 10px;
}

blockquote:dir(ltr) {
 margin-left: 10px;
}

Syntax that allows definition of outer and inner displays types for an element

/* display-two-values */
.element {
 display: inline flow-root;
 display: inline flex;
 display: block grid;
}

A syntax for using two positions in a gradient.

/* double-position-gradients */
.pie_chart {
 background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}

Compute various exponential functions with their arguments

/* exponential-functions */
p {
 font-size: calc(pow(10, 12) * 1rem);
 font-size: calc(sqrt(100) * 1rem);
 font-size: calc(hypot(3, 4) * 1rem);
 font-size: calc(log(10) * 1rem);
 font-size: calc(exp(10) * 1rem);
}

Flow-relative (inline-start and inline-end) values for float and clear

/* float-clear-logical-values */
span:first-child {
 float: inline-start;
}

A pseudo-class for matching focused elements that indicate that focus to a user

/* focus-visible-pseudo-class */
:focus:not(:focus-visible) {
 outline: 0;
}

A pseudo-class for matching elements that are either focused or that have focused descendants

/* focus-within-pseudo-class */
form:focus-within {
 background: rgb(0 128 0);
}

A syntax for specifying font format as a keyword in @font-face rule’s format() function

/* font-format-keywords */
@font-face {
 src: url(file.woff2) format(woff2);
}

A property for defining the usage of alternate glyphs in a font

/* font-variant-property */
h2 {
 font-variant: small-caps;
}

Use the font-width property and descriptor

/* font-width-property */
p {
 font-width: 150%;
}

Gamut map css colors to fit display specific gamuts.

/* gamut-mapping */
@media (color-gamut: rec2020) {
	p {
		color: oklch(40% 0.234 0.39 / 0.5);
	}
}

Properties for defining gutters within a layout

/* gap-properties */
.grid-1 {
 gap: 20px;
}

.grid-2 {
 column-gap: 40px;
 row-gap: 20px;
}

Define the interpolation method for gradients

/* gradients-interpolation-method */
.pie_chart {
 background-image: conic-gradient(in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}

A pseudo-class for matching ancestor and sibling elements

/* has-pseudo-class */
a:has(> img) {
 display: block;
}

A 4 & 8 character hex color notation for specifying the opacity level

/* hexadecimal-alpha-notation */
section {
 background-color: #f3f3f3f3;
 color: #0003;
}

A function for specifying colors by hue and then a degree of whiteness and blackness to mix into it

/* hwb-function */
p {
 color: hwb(120 44% 50%);
}

Equal to the used advance measure of the "水" (CJK water ideograph, U+6C34) glyph found in the font used to render it

/* ic-unit */
p {
 text-indent: 2ic;
}

Generate a solid-color image from any color.

/* image-function */
div {
 background-image: image( purple );
}

A function for specifying image sources based on the user’s resolution

/* image-set-function */
p {
 background-image: image-set(
 "foo.png" 1x,
 "foo-2x.png" 2x,
 "foo-print.png" 600dpi
 );
}

A pseudo-class for matching elements in a selector list

/* is-pseudo-class */
p:is(:first-child, .special) {
 margin-top: 1em;
}

A function for specifying colors expressed in the CIE Lab color space

/* lab-function */
body {
 color: lab(80% 50 20);
}

React to the current used color-scheme value

/* light-dark-function */
body {
 color: light-dark(cyan, magenta);
}

Flow-relative overflow properties

/* logical-overflow */
div {
 overflow-block: scroll;
}

Flow-relative overscroll-behavior properties

/* logical-overscroll-behavior */
div {
 overscroll-behavior-block: scroll;
}

Flow-relative (left-to-right or right-to-left) properties and values

/* logical-properties-and-values */
span:first-child {
 margin-inline-start: 10px;
}

Flow-relative (block or inline) values in resize

/* logical-resize */
area {
 resize: inline;
}

Flow-relative (horizontal or vertical) Viewport Units

/* logical-viewport-units */
span:first-child {
 width: 5vi; height: 10vb; 
}

Support <ratio> values with <number> components in @media

/* media-queries-aspect-ratio-number-values */
@media (aspect-ratio: 1.77) {
 html {
 background-color: cyan;
 }
}

A syntax for defining media query ranges using ordinary comparison operators

/* media-query-ranges */
@media (width < 480px) {}

@media (480px <= width < 768px) {}

@media (width >= 768px) {}

Use @mixin and @apply

/* mixins */
@mixin --foo() {
 color: green;
 }

.foo {
 @apply --foo;
}

Nest calc functions with the calc function name

/* nested-calc */
p {
 padding: calc(1px + calc(4 / 3));
}

A syntax for nesting relative rules within rules

/* nesting-rules */
article {
 & p {
 color: #333;
 }
}

A pseudo-class for ignoring elements in a selector list

/* not-pseudo-class */
p:not(:first-child, .special) {
 margin-top: 1em;
}

Functions that allow colors to be expressed in OKLab and OKLCH.

/* oklab-function */
p {
 color: oklab(72.322% -0.0465 -0.1150);
 color: oklch(72.322% 0.12403 247.996);
}

Syntactic sugar to use percentages instead of a float between 0 and 1.

/* opacity-percentage */
img {
 opacity: 90%;
}

A property for defining overflow-x and overflow-y

/* overflow-property */
html {
 overflow: hidden auto;
}

A property for defining whether to insert line breaks within words to prevent overflowing

/* overflow-wrap-property */
p {
 overflow-wrap: break-word;
}

Properties for defining alignment within a layout

/* place-properties */
.example {
 place-content: flex-end;
 place-items: center / space-between;
 place-self: flex-start / center;
}

The position-area property offers a convenient grid-based concept for positioning relative to the default anchor box.

/* position-area-property */
div {
 position-area: start end;
}

A media query to detect if the user has requested the system use a light or dark color theme

/* prefers-color-scheme-query */
body {
 background-color: white;
 color: black;
}

@media (prefers-color-scheme: dark) {
 body {
 background-color: black;
 color: white;
 }
}

Declare a list of custom properties in a single @property rule

/* property-rule-prelude-list */
@property --color-a, --color-b {
 inherits: true;
 initial-value: black;
 syntax: "<color>";
}

Represents a random value between a minimum and maximum value, drawn from a uniform distribution, optionally limiting the possible values to a step between those limits

/* random-function */
div {
 color: oklch(0.7, 0.2, random(120deg, 240deg));
}

A particularly lovely shade of purple in memory of Rebecca Alison Meyer

/* rebeccapurple-color */
html {
 color: rebeccapurple;
}

Modify existing colors using color functions

/* relative-color-syntax */
p {
 color: lch(from peru calc(l * 0.8) c h);
}

A pseudo-class for matching one or more scoping roots

/* scope-pseudo-class */
:scope {
 background-color: pink;
}

The sign-related functions—abs() and sign()—compute various functions related to the sign of their argument

/* sign-functions */
div {
 order: abs(-10);
 order: sign(-10);
}

The stepped-value functions, round(), mod(), and rem(), all transform a given value according to another "step value", in different ways

/* stepped-value-functions */
div {
 left: mod(18px, 5px);
 top: rem(18px, 5px);
 right: round(2.5px, 1px);
 bottom: round(up, 15px, 7px);
}

Use the <syntax> production in syntax descriptors

/* syntax-descriptor-syntax-production */
@property --color {
 inherits: true;
 initial-value: black;
 syntax: <color>;
}

A generic font used to match the user’s interface

/* system-ui-font-family */
body {
 font-family: system-ui;
}

A property for defining text-decoration-line, text-decoration-thickness, text-decoration-style and text-decoration-color

/* text-decoration-shorthand */
p {
 text-decoration: green wavy underline 2px;
}

Functions to calculate various basic trigonometric relationships

/* trigonometric-functions */
body {
 left: sin(45deg);
 left: cos(45deg);
 left: tan(45deg);
 left: asin(0.5);
 left: acos(0.5);
 left: atan(10);
 left: atan2(-1, 1);
}

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

/* unset-value */
div {
 border-color: unset;
 color: unset;
}