Features
all property
Stage 3 Specification PluginA property for defining the reset of all properties of an element
a {
all: initial;
}
:any-link pseudo-class
Stage 2 Specification PluginA pseudo-class for matching anchor elements independent of whether they have been visited
nav :any-link > span {
background-color: yellow;
}
:blank empty-value pseudo-class
Stage 1 Specification PluginA pseudo-class for matching form elements when they are empty
input:blank {
background-color: yellow;
}
break properties
Stage 3 Specification PluginProperties for defining the break behavior between and within boxes
a {
break-inside: avoid;
break-before: avoid-column;
break-after: always;
}
case-insensitive attributes
Stage 2 Specification PluginAn attribute selector matching attribute values case-insensitively
[frame=hsides i] {
border-style: solid none;
}
functional color notation
Stage 1 Specification PluginA space and slash separated notation for specifying colors
em {
background-color: hsl(120deg 100% 25%);
box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);
color: rgb(0 255 0);
}
custom media queries
Stage 1 Specification PluginAn at-rule for defining aliases that represent media queries
@custom-media --narrow-window (max-width: 30em); @media (--narrow-window) {}
custom properties
Stage 3 Specification PluginA syntax for defining custom values accepted by all CSS properties
img {
--some-length: 32px;
height: var(--some-length);
width: var(--some-length);
}
custom selectors
Stage 1 Specification PluginAn at-rule for defining aliases that represent selectors
@custom-selector :--heading h1, h2, h3, h4, h5, h6; article :--heading + p {}
:dir pseudo-class
Stage 2 Specification PluginA pseudo-class for matching elements based on their directionality
blockquote:dir(rtl) { margin-right: 10px; } blockquote:dir(ltr) { margin-left: 10px; }
double position gradients
Stage 2 Specification PluginA syntax for using two positions in a gradient.
.pie_chart {
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}
custom environment variables
Stage 0 Specification PluginA syntax for using custom values accepted by CSS globally
@media (max-width: env(--brand-small)) {
body {
padding: env(--brand-spacing);
}
}
:focus-visible pseudo-class
Stage 2 Specification PluginA pseudo-class for matching focused elements that indicate that focus to a user
:focus:not(:focus-visible) {
outline: 0;
}
:focus-within pseudo-class
Stage 2 Specification PluginA pseudo-class for matching elements that are either focused or that have focused descendants
form:focus-within {
background: rgba(0, 0, 0, 0.3);
}
font-variant property
Stage 3 Specification PluginA property for defining the usage of alternate glyphs in a font
h2 {
font-variant: small-caps;
}
gap properties
Stage 3 Specification PluginProperties for defining gutters within a layout
.grid-1 { gap: 20px; } .grid-2 { column-gap: 40px; row-gap: 20px; }
gray() function
Stage 2 Specification PluginA function for specifying fully desaturated colors
p {
color: gray(50);
}
alpha hex colors
Stage 2 Specification PluginA 4 & 8 character hex color notation for specifying the opacity level
section {
background-color: #f3f3f3f3;
color: #0003;
}
hwb() function
Stage 2 Specification PluginA function for specifying colors by hue and then a degree of whiteness and blackness to mix into it
p {
color: hwb(120 44% 50%);
}
image-set() function
Stage 2 Specification PluginA function for specifying image sources based on the user’s resolution
p {
background-image: image-set(
"foo.png" 1x,
"foo-2x.png" 2x,
"foo-print.png" 600dpi
);
}
lab() function
Stage 2 Specification PluginA function for specifying colors expressed in the CIE Lab color space
body {
color: lab(240 50 20);
}
lch() function
Stage 2 Specification PluginA function for specifying colors expressed in the CIE Lab color space with chroma and hue
body {
color: lch(53 105 40);
}
logical properties and values
Stage 2 Specification PluginFlow-relative (left-to-right or right-to-left) properties and values
span:first-child {
float: inline-start;
margin-inline-start: 10px;
}
:matches pseudo-class
Stage 2 Specification PluginA pseudo-class for matching elements in a selector list
p:matches(:first-child, .special) {
margin-top: 1em;
}
media query ranges
Stage 3 Specification PluginA syntax for defining media query ranges using ordinary comparison operators
@media (width < 480px) {} @media (480px <= width < 768px) {} @media (width >= 768px) {}
nesting rules
Stage 1 Specification PluginA syntax for nesting relative rules within rules
article {
& p {
color: #333;
}
}
:not pseudo-class
Stage 2 Specification PluginA pseudo-class for ignoring elements in a selector list
p:not(:first-child, .special) {
margin-top: 1em;
}
overflow shorthand property
Stage 2 Specification PluginA property for defining `overflow-x` and `overflow-y`
html {
overflow: hidden auto;
}
overflow-wrap property
Stage 2 Specification PluginA property for defining whether to insert line breaks within words to prevent overflowing
p {
overflow-wrap: break-word;
}
place properties
Stage 2 Specification PluginProperties for defining alignment within a layout
.example {
place-content: flex-end;
place-items: center / space-between;
place-self: flex-start / center;
}
prefers-color-scheme media query
Stage 1 Specification PluginA media query to detect if the user has requested the system use a light or dark color theme
body { background-color: white; color: black; } @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } }
rebeccapurple color
Stage 2 Specification PluginA particularly lovely shade of purple in memory of Rebecca Alison Meyer
html {
color: rebeccapurple;
}
system-ui font family
Stage 2 Specification PluginA generic font used to match the user’s interface
body {
font-family: system-ui;
}