CSS Tools

What’s next for CSS?

cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

What are the stages?

all Property

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

a {
  all: initial;
}
Supported on chrome since version 37 Supported on edge since version 79 Supported on firefox since version 27 Supported on opera since version 24 Supported on safari since version 9.1 Supported on Chrome for Android since version 37 Supported on Firefox for Android since version 27 Supported on Opera Mobile since version 24 Supported on iOS Safari since version 9.3 Supported on samsung since version 3.0 Supported on android since version 37 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 9.3

font-variant Property

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

h2 {
  font-variant: small-caps;
}
Supported on firefox since version 34 Supported on safari since version 9.1 Supported on Firefox for Android since version 34 Supported on iOS Safari since version 9.3 Supported on WKWebview on iOS since version 9.3

Break Properties

Properties for defining the break behavior between and within boxes

a {
  break-inside: avoid;
  break-before: avoid-column;
  break-after: always;
}
Supported on chrome since version 51 Supported on edge since version 12 Supported on firefox since version 92 Supported on opera since version 11.1 Supported on Chrome for Android since version 51 Supported on Firefox for Android since version 92 Supported on Opera Mobile since version 37 Supported on samsung since version 5.0 Supported on android since version 51 Supported on oculus since version 5.0

Custom Properties

A syntax for defining custom values accepted by all CSS properties

:root {
  --some-length: 32px;

  height: var(--some-length);
  width: var(--some-length);
}
Supported on chrome since version 49 Supported on edge since version 15 Supported on firefox since version 31 Supported on opera since version 36 Supported on safari since version 9.1 Supported on Chrome for Android since version 49 Supported on Firefox for Android since version 31 Supported on Opera Mobile since version 36 Supported on iOS Safari since version 9.3 Supported on samsung since version 5.0 Supported on android since version 50 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 9.3

Gap Properties

Properties for defining gutters within a layout

.grid-1 {
  gap: 20px;
}

.grid-2 {
  column-gap: 40px;
  row-gap: 20px;
}
Supported on chrome since version 66 Supported on edge since version 16 Supported on firefox since version 61 Supported on opera since version 53 Supported on safari since version 12 Supported on Chrome for Android since version 66 Supported on Firefox for Android since version 61 Supported on Opera Mobile since version 47 Supported on iOS Safari since version 12 Supported on samsung since version 9.0 Supported on android since version 66 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 12

Grid Layout

A syntax for using a grid concept to lay out content

section {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
}
Supported on chrome since version 57 Supported on edge since version 16 Supported on firefox since version 52 Supported on opera since version 44 Supported on safari since version 10.1 Supported on Chrome for Android since version 57 Supported on Firefox for Android since version 52 Supported on Opera Mobile since version 43 Supported on iOS Safari since version 10.3 Supported on samsung since version 6.0 Supported on android since version 57 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 10.3

Media Query Ranges

A syntax for defining media query ranges using ordinary comparison operators

@media (width < 480px) {}

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

@media (width >= 768px) {}
Supported on chrome since version 104 Supported on edge since version 104 Supported on firefox since version 102 Supported on opera since version 90 Supported on safari since version 16.4 Supported on Chrome for Android since version 104 Supported on Firefox for Android since version 102 Supported on Opera Mobile since version 71 Supported on iOS Safari since version 16.4 Supported on samsung since version 20.0 Supported on android since version 104 Supported on oculus since version 23.0 Supported on WKWebview on iOS since version 16.4

unset Keyword

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.

div {
  border-color: unset;
  color: unset;
}
Supported on chrome since version 41 Supported on edge since version 13 Supported on firefox since version 27 Supported on opera since version 28 Supported on safari since version 9.1 Supported on Chrome for Android since version 41 Supported on Firefox for Android since version 27 Supported on Opera Mobile since version 28 Supported on iOS Safari since version 9.3 Supported on samsung since version 4.0 Supported on android since version 41 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 9.3

:blank Empty-Value Pseudo-Class

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

input:blank {
  background-color: yellow;
}

e, pi, infinity, -infinity and NaN constants for calculation

Constants for calculation simplification

p {
  font-size: calc(pow(e, pi) * 1rem);
}
Supported on chrome since version 110 Supported on edge since version 110 Supported on firefox since version 114 Supported on opera since version 96 Supported on safari since version 16 Supported on Chrome for Android since version 110 Supported on Firefox for Android since version 114 Supported on Opera Mobile since version 74 Supported on iOS Safari since version 16 Supported on samsung since version 21.0 Supported on android since version 110 Supported on WKWebview on iOS since version 16

CSS Cascade Layers

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

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

@layer defaults {
  a { color: maroon; }
}
Supported on chrome since version 99 Supported on edge since version 99 Supported on firefox since version 97 Supported on opera since version 85 Supported on safari since version 15.4 Supported on Chrome for Android since version 99 Supported on Firefox for Android since version 97 Supported on Opera Mobile since version 68 Supported on iOS Safari since version 15.4 Supported on samsung since version 18.0 Supported on android since version 99 Supported on oculus since version 21.0 Supported on WKWebview on iOS since version 15.4

Case-Insensitive Attributes

An attribute selector matching attribute values case-insensitively

[frame=hsides i] {
  border-style: solid none;
}
Supported on chrome since version 49 Supported on edge since version 79 Supported on firefox since version 47 Supported on opera since version 36 Supported on safari since version 9 Supported on Chrome for Android since version 49 Supported on Firefox for Android since version 47 Supported on Opera Mobile since version 36 Supported on iOS Safari since version 9 Supported on samsung since version 5.0 Supported on android since version 49 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 9

clamp Function

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.

button {
  font-size: clamp(1rem, 2.5vw, 2rem);
}
Supported on chrome since version 79 Supported on edge since version 79 Supported on firefox since version 75 Supported on opera since version 66 Supported on safari since version 13.1 Supported on Chrome for Android since version 79 Supported on Firefox for Android since version 79 Supported on Opera Mobile since version 57 Supported on iOS Safari since version 13.4 Supported on samsung since version 12.0 Supported on android since version 79 Supported on oculus since version 8.0 Supported on WKWebview on iOS since version 13.4

color-adjust Property

The color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images

.background {
  background-color:#ccc;
}
.background.color-adjust {
  color-adjust: economy;
}
.background.color-adjust-exact {
  color-adjust: exact;
}
Supported on firefox since version 97 Supported on safari since version 15.4 Supported on Firefox for Android since version 97 Supported on iOS Safari since version 15.4 Supported on WKWebview on iOS since version 15.4

color() Function

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.

p {
  color: color(display-p3 1 0.5 0);
  color: color(display-p3 1 0.5 0 / .5);
}
Supported on chrome since version 111 Supported on edge since version 111 Supported on firefox since version 113 Supported on opera since version 97 Supported on safari since version 15 Supported on Chrome for Android since version 111 Supported on Firefox for Android since version 113 Supported on Opera Mobile since version 75 Supported on iOS Safari since version 15 Supported on samsung since version 22.0 Supported on android since version 111 Supported on WKWebview on iOS since version 15

Color Functional Notation

A space and slash separated notation for specifying colors

em {
  background-color: hsl(120deg 100% 25%);
  color: rgb(0 255 0);
}
Supported on chrome since version 65 Supported on edge since version 79 Supported on firefox since version 52 Supported on opera since version 52 Supported on safari since version 12.1 Supported on Chrome for Android since version 65 Supported on Firefox for Android since version 52 Supported on Opera Mobile since version 47 Supported on iOS Safari since version 12.2 Supported on samsung since version 9.0 Supported on android since version 65 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 12.2

color-mix() Function

A function for mixing colors

p {
  color: color-mix(in lch, purple 50%, plum 50%);
}
Supported on chrome since version 111 Supported on edge since version 111 Supported on firefox since version 113 Supported on opera since version 97 Supported on safari since version 16.2 Supported on Chrome for Android since version 111 Supported on Firefox for Android since version 113 Supported on Opera Mobile since version 75 Supported on iOS Safari since version 16.2 Supported on samsung since version 22.0 Supported on android since version 111

Container Queries

New container property and container at rule to make changes depending on the container's size

.container {
  contain: layout inline-size;
}

@container (min-width: 700px) {
  .container {
    /* styles applied when a container is at least 700px */
  }
}
Supported on chrome since version 105 Supported on edge since version 105 Supported on firefox since version 110 Supported on opera since version 91 Supported on safari since version 16 Supported on Chrome for Android since version 105 Supported on Firefox for Android since version 110 Supported on Opera Mobile since version 72 Supported on iOS Safari since version 16 Supported on samsung since version 20.0 Supported on android since version 105 Supported on WKWebview on iOS since version 16

Alt text for content

Syntax that allows setting alternative text

.element {
  content: url(tree.jpg) / "image with a tree";
}
Supported on chrome since version 77 Supported on edge since version 79 Supported on firefox since version 128 Supported on opera since version 64 Supported on safari since version 17.4 Supported on Chrome for Android since version 77 Supported on Firefox for Android since version 128 Supported on Opera Mobile since version 55 Supported on iOS Safari since version 17.4 Supported on samsung since version 12.0 Supported on android since version 77 Supported on oculus since version 7.0 Supported on WKWebview on iOS since version 17.4

contrast-color() Function

Dynamically specifying a text color with adequate contrast.

p {
  color: contrast-color( purple max );
}

Custom Media Queries

An at-rule for defining aliases that represent media queries

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

@media (--narrow-window) {}

:dir Directionality Pseudo-Class

A pseudo-class for matching elements based on their directionality

blockquote:dir(rtl) {
  margin-right: 10px;
}

blockquote:dir(ltr) {
  margin-left: 10px;
}
Supported on chrome since version 120 Supported on edge since version 120 Supported on firefox since version 49 Supported on opera since version 106 Supported on safari since version 16.4 Supported on Chrome for Android since version 120 Supported on Firefox for Android since version 49 Supported on Opera Mobile since version 80 Supported on iOS Safari since version 16.4 Supported on samsung since version 25.0 Supported on android since version 120 Supported on WKWebview on iOS since version 16.4

Two values syntax for display

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

.element {
  display: inline flow-root;
  display: inline flex;
  display: block grid;
}
Supported on chrome since version 115 Supported on edge since version 115 Supported on firefox since version 70 Supported on opera since version 101 Supported on safari since version 15 Supported on Chrome for Android since version 115 Supported on Firefox for Android since version 79 Supported on Opera Mobile since version 77 Supported on iOS Safari since version 15 Supported on samsung since version 23.0 Supported on android since version 115 Supported on WKWebview on iOS since version 15

Double Position Gradients

A syntax for using two positions in a gradient.

.pie_chart {
  background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}
Supported on chrome since version 72 Supported on edge since version 79 Supported on firefox since version 83 Supported on opera since version 60 Supported on safari since version 12.1 Supported on Chrome for Android since version 72 Supported on Firefox for Android since version 83 Supported on Opera Mobile since version 51 Supported on iOS Safari since version 12.2 Supported on samsung since version 11.0 Supported on android since version 72 Supported on oculus since version 6.0 Supported on WKWebview on iOS since version 12.2

pow(), sqrt(), hypot(), log(), exp() exponential functions

Compute various exponential functions with their arguments

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);
}
Supported on chrome since version 120 Supported on edge since version 120 Supported on firefox since version 118 Supported on opera since version 106 Supported on safari since version 15.4 Supported on Chrome for Android since version 120 Supported on Firefox for Android since version 118 Supported on Opera Mobile since version 80 Supported on iOS Safari since version 15.4 Supported on samsung since version 25.0 Supported on android since version 120 Supported on WKWebview on iOS since version 15.4

fangsong Font Family

A generic font used for Fang Song (仿宋) typefaces in Chinese

body {
  font-family: fangsong;
}

Logical Values in float and clear

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

span:first-child {
  float: inline-start;
}
Supported on chrome since version 118 Supported on edge since version 118 Supported on firefox since version 55 Supported on opera since version 104 Supported on safari since version 15 Supported on Chrome for Android since version 118 Supported on Firefox for Android since version 55 Supported on Opera Mobile since version 79 Supported on iOS Safari since version 15 Supported on samsung since version 25.0 Supported on android since version 118 Supported on WKWebview on iOS since version 15

:focus-visible Focus-Indicated Pseudo-Class

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

:focus:not(:focus-visible) {
  outline: 0;
}
Supported on chrome since version 86 Supported on edge since version 86 Supported on firefox since version 85 Supported on opera since version 72 Supported on safari since version 15.4 Supported on Chrome for Android since version 86 Supported on Firefox for Android since version 85 Supported on Opera Mobile since version 61 Supported on iOS Safari since version 15.4 Supported on samsung since version 14.0 Supported on android since version 86 Supported on oculus since version 12.0 Supported on WKWebview on iOS since version 15.4

:focus-within Focus Container Pseudo-Class

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

form:focus-within {
  background: rgb(0 128 0);
}
Supported on chrome since version 60 Supported on edge since version 79 Supported on firefox since version 52 Supported on opera since version 47 Supported on safari since version 10.1 Supported on Chrome for Android since version 60 Supported on Firefox for Android since version 52 Supported on Opera Mobile since version 44 Supported on iOS Safari since version 10.3 Supported on samsung since version 8.0 Supported on android since version 60 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 10.3

Font format() Keywords

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

@font-face {
  src: url(file.woff2) format(woff2);
}
Supported on chrome since version 108 Supported on edge since version 108 Supported on opera since version 94 Supported on safari since version 4 Supported on Chrome for Android since version 108 Supported on Opera Mobile since version 73 Supported on iOS Safari since version 5 Supported on samsung since version 21.0 Supported on android since version 108 Supported on WKWebview on iOS since version 5

Gamut mapping for CSS color functions

Gamut map css colors to fit display specific gamuts.

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

Gradients Interpolation Method

Define the interpolation method for gradients

.pie_chart {
  background-image: conic-gradient(in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}
Supported on chrome since version 111 Supported on edge since version 111 Supported on firefox since version 127 Supported on opera since version 97 Supported on safari since version 16.2 Supported on Chrome for Android since version 111 Supported on Firefox for Android since version 127 Supported on Opera Mobile since version 75 Supported on iOS Safari since version 16.2 Supported on samsung since version 22.0 Supported on android since version 111 Supported on WKWebview on iOS since version 16.2

:has() Relational Pseudo-Class

A pseudo-class for matching ancestor and sibling elements

a:has(> img) {
  display: block;
}
Supported on chrome since version 105 Supported on edge since version 105 Supported on firefox since version 121 Supported on opera since version 91 Supported on safari since version 15.4 Supported on Chrome for Android since version 105 Supported on Firefox for Android since version 121 Supported on Opera Mobile since version 72 Supported on iOS Safari since version 15.4 Supported on samsung since version 20.0 Supported on android since version 105 Supported on WKWebview on iOS since version 15.4

Hexadecimal Alpha Notation

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

section {
  background-color: #f3f3f3f3;
  color: #0003;
}
Supported on chrome since version 62 Supported on edge since version 79 Supported on firefox since version 49 Supported on opera since version 49 Supported on safari since version 10 Supported on Chrome for Android since version 62 Supported on Firefox for Android since version 49 Supported on Opera Mobile since version 47 Supported on iOS Safari since version 9.3 Supported on samsung since version 8.0 Supported on android since version 62 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 9.3

hwb() Function

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

p {
  color: hwb(120 44% 50%);
}
Supported on chrome since version 101 Supported on edge since version 101 Supported on firefox since version 96 Supported on opera since version 87 Supported on safari since version 15 Supported on Chrome for Android since version 101 Supported on Firefox for Android since version 96 Supported on Opera Mobile since version 70 Supported on iOS Safari since version 15 Supported on samsung since version 19.0 Supported on android since version 101 Supported on oculus since version 22.0 Supported on WKWebview on iOS since version 15

ic length unit

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

p {
  text-indent: 2ic;
}
Supported on chrome since version 106 Supported on edge since version 106 Supported on firefox since version 97 Supported on opera since version 92 Supported on safari since version 15.4 Supported on Chrome for Android since version 106 Supported on Firefox for Android since version 97 Supported on Opera Mobile since version 72 Supported on iOS Safari since version 15.4 Supported on samsung since version 20.0 Supported on android since version 106 Supported on WKWebview on iOS since version 15.4

image-set() Function

A 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
  );
}
Supported on chrome since version 21 Supported on edge since version 79 Supported on firefox since version 89 Supported on opera since version 15 Supported on safari since version 14 Supported on Chrome for Android since version 25 Supported on Firefox for Android since version 89 Supported on Opera Mobile since version 14 Supported on iOS Safari since version 14 Supported on samsung since version 1.5 Supported on android since version 4.4 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 17

:in-range and :out-of-range Pseudo-Classes

A pseudo-class for matching elements that have range limitations

input:in-range {
  background-color: rgb(0 255 0 / 0.25);
}
input:out-of-range {
  background-color: rgb(255 0 0 / 0.25);
  border: 2px solid red;
}
Supported on chrome since version 10 Supported on edge since version 13 Supported on firefox since version 29 Supported on opera since version 11 Supported on safari since version 5.1 Supported on Chrome for Android since version 18 Supported on Firefox for Android since version 16 Supported on Opera Mobile since version 11 Supported on iOS Safari since version 5 Supported on samsung since version 1.0 Supported on android since version 2.2 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 5

:is() Matches-Any Pseudo-Class

A pseudo-class for matching elements in a selector list

p:is(:first-child, .special) {
  margin-top: 1em;
}
Supported on chrome since version 88 Supported on edge since version 88 Supported on firefox since version 82 Supported on opera since version 74 Supported on safari since version 14 Supported on Chrome for Android since version 88 Supported on Firefox for Android since version 82 Supported on Opera Mobile since version 63 Supported on iOS Safari since version 14 Supported on samsung since version 15.0 Supported on android since version 88 Supported on oculus since version 14.0 Supported on WKWebview on iOS since version 14

lab() Function

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

body {
  color: lab(80% 50 20);
}
Supported on chrome since version 116 Supported on edge since version 116 Supported on firefox since version 113 Supported on opera since version 102 Supported on safari since version 16.2 Supported on Chrome for Android since version 116 Supported on Firefox for Android since version 113 Supported on Opera Mobile since version 78 Supported on iOS Safari since version 16.2 Supported on samsung since version 24.0 Supported on android since version 116 Supported on WKWebview on iOS since version 16.2

lch() Function

A function for specifying colors expressed in the CIE Lab color space with chroma and hue

body {
  color: lch(53% 105 40);
}
Supported on chrome since version 116 Supported on edge since version 116 Supported on firefox since version 113 Supported on opera since version 102 Supported on safari since version 16.2 Supported on Chrome for Android since version 116 Supported on Firefox for Android since version 113 Supported on Opera Mobile since version 78 Supported on iOS Safari since version 16.2 Supported on samsung since version 24.0 Supported on android since version 116 Supported on WKWebview on iOS since version 16.2

light-dark() Function

React to the current used color-scheme value

body {
  color: light-dark(cyan, magenta);
}
Supported on chrome since version 123 Supported on edge since version 123 Supported on firefox since version 120 Supported on opera since version 109 Supported on safari since version 17.5 Supported on Chrome for Android since version 123 Supported on Firefox for Android since version 120 Supported on Opera Mobile since version 82 Supported on iOS Safari since version 17.5 Supported on samsung since version 27.0 Supported on android since version 123 Supported on WKWebview on iOS since version 17.5

Logical Overflow

Flow-relative overflow properties

div {
  overflow-block: scroll;
}
Supported on firefox since version 69 Supported on Firefox for Android since version 79

Logical Overscroll Behavior

Flow-relative overscroll-behavior properties

div {
  overscroll-behavior-block: scroll;
}
Supported on chrome since version 77 Supported on edge since version 79 Supported on firefox since version 73 Supported on opera since version 64 Supported on safari since version 16 Supported on Chrome for Android since version 77 Supported on Firefox for Android since version 79 Supported on Opera Mobile since version 55 Supported on iOS Safari since version 16 Supported on samsung since version 12.0 Supported on android since version 77 Supported on oculus since version 7.0 Supported on WKWebview on iOS since version 16

Logical Properties and Values

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

span:first-child {
  margin-inline-start: 10px;
}
Supported on chrome since version 89 Supported on edge since version 89 Supported on firefox since version 66 Supported on opera since version 75 Supported on safari since version 15 Supported on Chrome for Android since version 89 Supported on Firefox for Android since version 66 Supported on Opera Mobile since version 63 Supported on iOS Safari since version 15 Supported on samsung since version 15.0 Supported on android since version 89 Supported on oculus since version 15.0 Supported on WKWebview on iOS since version 15

Logical values in the resize property

Flow-relative (block or inline) values in resize

area {
  resize: inline;
}
Supported on chrome since version 118 Supported on edge since version 118 Supported on firefox since version 63 Supported on opera since version 104 Supported on safari since version 16 Supported on Chrome for Android since version 118 Supported on Firefox for Android since version 63 Supported on Opera Mobile since version 79 Supported on samsung since version 25.0 Supported on android since version 118

Logical Viewport Units

Flow-relative (horizontal or vertical) Viewport Units

span:first-child {
  width: 5vi; height: 10vb; 
}
Supported on chrome since version 108 Supported on edge since version 108 Supported on firefox since version 101 Supported on opera since version 94 Supported on safari since version 15.4 Supported on Chrome for Android since version 108 Supported on Firefox for Android since version 101 Supported on Opera Mobile since version 73 Supported on iOS Safari since version 15.4 Supported on samsung since version 21.0 Supported on android since version 108 Supported on WKWebview on iOS since version 15.4

Aspect-Ratio number values

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

@media (aspect-ratio: 1.77) {
  html {
    background-color: cyan;
  }
}
Supported on chrome since version 110 Supported on edge since version 110 Supported on firefox since version 78 Supported on safari since version 16.4 Supported on Chrome for Android since version 110 Supported on Firefox for Android since version 78 Supported on iOS Safari since version 16.4 Supported on android since version 110

Nested calc()

Nest calc functions with the calc function name

p {
  padding: calc(1px + calc(4 / 3));
}
Supported on chrome since version 51 Supported on edge since version 16 Supported on firefox since version 48 Supported on opera since version 38 Supported on safari since version 11 Supported on Chrome for Android since version 51 Supported on Firefox for Android since version 48 Supported on Opera Mobile since version 41 Supported on iOS Safari since version 11 Supported on samsung since version 5.0 Supported on android since version 51 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 11

Nesting Rules

A syntax for nesting relative rules within rules

article {
  & p {
    color: #333;
  }
}
Supported on chrome since version 120 Supported on edge since version 120 Supported on firefox since version 117 Supported on opera since version 106 Supported on safari since version 17.2 Supported on Chrome for Android since version 120 Supported on Firefox for Android since version 117 Supported on Opera Mobile since version 80 Supported on iOS Safari since version 17.2 Supported on samsung since version 25.0 Supported on android since version 120 Supported on WKWebview on iOS since version 17.2

:not() Negation List Pseudo-Class

A pseudo-class for ignoring elements in a selector list

p:not(:first-child, .special) {
  margin-top: 1em;
}
Supported on chrome since version 88 Supported on edge since version 88 Supported on firefox since version 84 Supported on opera since version 74 Supported on safari since version 9 Supported on Chrome for Android since version 88 Supported on Firefox for Android since version 84 Supported on iOS Safari since version 9 Supported on samsung since version 15.0 Supported on android since version 88 Supported on oculus since version 14.0 Supported on WKWebview on iOS since version 9

oklab and oklch color functions

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

p {
  color: oklab(72.322% -0.0465 -0.1150);
  color: oklch(72.322% 0.12403 247.996);
}
Supported on chrome since version 116 Supported on edge since version 116 Supported on firefox since version 113 Supported on opera since version 102 Supported on safari since version 16.2 Supported on Chrome for Android since version 116 Supported on Firefox for Android since version 113 Supported on Opera Mobile since version 78 Supported on iOS Safari since version 16.2 Supported on samsung since version 24.0 Supported on android since version 116 Supported on WKWebview on iOS since version 16.2

Support for percentages for opacity

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

img {
  opacity: 90%;
}
Supported on chrome since version 78 Supported on edge since version 79 Supported on firefox since version 70 Supported on opera since version 65 Supported on safari since version 13.1 Supported on Chrome for Android since version 78 Supported on Firefox for Android since version 79 Supported on Opera Mobile since version 56 Supported on iOS Safari since version 13.4 Supported on samsung since version 12.0 Supported on android since version 78 Supported on oculus since version 8.0 Supported on WKWebview on iOS since version 13.4

overflow Shorthand Property

A property for defining overflow-x and overflow-y

html {
  overflow: hidden auto;
}
Supported on chrome since version 68 Supported on edge since version 79 Supported on firefox since version 61 Supported on opera since version 55 Supported on safari since version 13.1 Supported on Chrome for Android since version 68 Supported on Firefox for Android since version 61 Supported on Opera Mobile since version 48 Supported on iOS Safari since version 13.4 Supported on samsung since version 10.0 Supported on android since version 68 Supported on oculus since version 6.0 Supported on WKWebview on iOS since version 13.4

overflow-wrap Property

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

p {
  overflow-wrap: break-word;
}
Supported on chrome since version 23 Supported on edge since version 18 Supported on firefox since version 49 Supported on opera since version 12.1 Supported on safari since version 7 Supported on Chrome for Android since version 25 Supported on Firefox for Android since version 49 Supported on Opera Mobile since version 12.1 Supported on iOS Safari since version 7 Supported on samsung since version 1.5 Supported on android since version 4.4 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 7

overscroll-behavior Property

Properties for controlling when the scroll position of a scroll container reaches the edge of a scrollport

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  overscroll-behavior: none;
}
Supported on chrome since version 63 Supported on edge since version 18 Supported on firefox since version 59 Supported on opera since version 50 Supported on safari since version 16 Supported on Chrome for Android since version 63 Supported on Firefox for Android since version 59 Supported on Opera Mobile since version 46 Supported on iOS Safari since version 16 Supported on samsung since version 8.0 Supported on android since version 63 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 16

Place Properties

Properties for defining alignment within a layout

.example {
  place-content: flex-end;
  place-items: center / space-between;
  place-self: flex-start / center;
}
Supported on chrome since version 59 Supported on edge since version 79 Supported on firefox since version 53 Supported on opera since version 46 Supported on safari since version 11 Supported on Chrome for Android since version 59 Supported on Firefox for Android since version 53 Supported on Opera Mobile since version 43 Supported on iOS Safari since version 11 Supported on samsung since version 7.0 Supported on android since version 59 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 11

prefers-color-scheme Media Query

A 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;
  }
}
Supported on chrome since version 76 Supported on edge since version 79 Supported on firefox since version 67 Supported on opera since version 62 Supported on safari since version 12.1 Supported on Chrome for Android since version 76 Supported on Firefox for Android since version 67 Supported on Opera Mobile since version 54 Supported on iOS Safari since version 13 Supported on samsung since version 14.2 Supported on android since version 76 Supported on oculus since version 7.0 Supported on WKWebview on iOS since version 13

prefers-reduced-motion Media Query

A media query to detect if the user has requested less animation and general motion on the page

.animation {
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}
Supported on chrome since version 74 Supported on edge since version 79 Supported on firefox since version 63 Supported on opera since version 62 Supported on safari since version 10.1 Supported on Chrome for Android since version 74 Supported on Firefox for Android since version 64 Supported on Opera Mobile since version 53 Supported on iOS Safari since version 10.3 Supported on samsung since version 11.0 Supported on android since version 74 Supported on oculus since version 6.0 Supported on WKWebview on iOS since version 10.3

random() function

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

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

:read-only and :read-write selectors

Pseudo-classes to match elements which are considered user-alterable

input:read-only {
  background-color: #ccc;
}
Supported on chrome since version 1 Supported on edge since version 13 Supported on firefox since version 78 Supported on opera since version 9 Supported on safari since version 4 Supported on Chrome for Android since version 18 Supported on Firefox for Android since version 79 Supported on Opera Mobile since version 10.1 Supported on iOS Safari since version 3.2 Supported on samsung since version 1.0 Supported on android since version 37 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 3.2

rebeccapurple Color

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

html {
  color: rebeccapurple;
}
Supported on chrome since version 38 Supported on edge since version 12 Supported on firefox since version 33 Supported on ie since version 11 Supported on opera since version 25 Supported on safari since version 9 Supported on Chrome for Android since version 38 Supported on Firefox for Android since version 33 Supported on Opera Mobile since version 25 Supported on iOS Safari since version 8 Supported on samsung since version 3.0 Supported on android since version 38 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 8

Relative Colors

Modify existing colors using color functions

p {
  color: lch(from peru calc(l * 0.8) c h);
}
Supported on chrome since version 125 Supported on edge since version 125 Supported on firefox since version 128 Supported on opera since version 111 Supported on Chrome for Android since version 125 Supported on Firefox for Android since version 128 Supported on Opera Mobile since version 83 Supported on samsung since version 27.0 Supported on android since version 125

:scope() Reference Element Pseudo-class

A pseudo-class for matching one or more scoping roots

:scope {
  background-color: pink;
}
Supported on chrome since version 27 Supported on edge since version 79 Supported on firefox since version 32 Supported on opera since version 15 Supported on safari since version 7 Supported on Chrome for Android since version 27 Supported on Firefox for Android since version 32 Supported on Opera Mobile since version 15 Supported on iOS Safari since version 7 Supported on samsung since version 1.5 Supported on android since version 4.4 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 7

abs() and sign() functions

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

div {
  order: abs(-10);
  order: sign(-10);
}
Supported on firefox since version 118 Supported on safari since version 15.4 Supported on Firefox for Android since version 118 Supported on iOS Safari since version 15.4

src() function

The argument of src() can be provided by functions, such as var(). Otherwise this behaves the same as url()

div {
  background: src('./image.jpg');
}

round(), mod() and rem() functions

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

div {
  left: mod(18px, 5px);
  top: rem(18px, 5px);
  right: round(2.5px, 1px);
  bottom: round(up, 15px, 7px);
}
Supported on chrome since version 125 Supported on edge since version 125 Supported on firefox since version 118 Supported on opera since version 111 Supported on safari since version 15.4 Supported on Chrome for Android since version 125 Supported on Firefox for Android since version 118 Supported on Opera Mobile since version 83 Supported on iOS Safari since version 15.4 Supported on samsung since version 27.0 Supported on android since version 125 Supported on WKWebview on iOS since version 15.4

system-ui Font Family

A generic font used to match the user’s interface

body {
  font-family: system-ui;
}
Supported on chrome since version 56 Supported on edge since version 79 Supported on firefox since version 92 Supported on opera since version 43 Supported on safari since version 11 Supported on Chrome for Android since version 56 Supported on Firefox for Android since version 92 Supported on Opera Mobile since version 43 Supported on iOS Safari since version 11 Supported on samsung since version 6.0 Supported on android since version 56 Supported on oculus since version 5.0 Supported on WKWebview on iOS since version 11

text-decoration shorthand

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

p {
  text-decoration: green wavy underline 2px;
}
Supported on chrome since version 87 Supported on edge since version 87 Supported on firefox since version 70 Supported on opera since version 73 Supported on Chrome for Android since version 87 Supported on Firefox for Android since version 79 Supported on Opera Mobile since version 62 Supported on samsung since version 14.0 Supported on android since version 87 Supported on oculus since version 13.0

sin(), cos(), tan(), asin(), acos(), atan() and atan2() functions

Functions to calculate various basic trigonometric relationships

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);
}
Supported on chrome since version 111 Supported on edge since version 111 Supported on firefox since version 108 Supported on opera since version 97 Supported on safari since version 15.4 Supported on Chrome for Android since version 111 Supported on Firefox for Android since version 108 Supported on Opera Mobile since version 75 Supported on iOS Safari since version 15.4 Supported on samsung since version 22.0 Supported on android since version 111 Supported on WKWebview on iOS since version 15.4

When/Else Rules

At-rules for specifying media queries and support queries in a single grammar

@when media(width >= 640px) and (supports(display: flex) or supports(display: grid)) {
  /* A */
} @else media(pointer: coarse) {
  /* B */
} @else {
  /* C */
}

:where() Zero-Specificity Pseudo-Class

A pseudo-class for matching elements in a selector list without contributing specificity

a:where(:not(:hover)) {
  text-decoration: none;
}
Supported on chrome since version 88 Supported on edge since version 88 Supported on firefox since version 82 Supported on opera since version 74 Supported on safari since version 14 Supported on Chrome for Android since version 88 Supported on Firefox for Android since version 82 Supported on Opera Mobile since version 63 Supported on iOS Safari since version 14 Supported on samsung since version 15.0 Supported on android since version 88 Supported on oculus since version 14.0 Supported on WKWebview on iOS since version 14

Custom Selectors

An at-rule for defining aliases that represent selectors

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

article :--heading + p {}

Custom Environment Variables

A syntax for using custom values accepted by CSS globally

@media (max-width: env(--brand-small)) {
  body {
    padding: env(--brand-spacing);
  }
}