CSS Database

`all` Property

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

a {
  all: initial;
}

37 79 27 24 9.1 37 27 24 9.3 3.0 37 5.0 9.3

Use with a

PostCSS Plugin for all Property (bundled with Preset Env)

`font-variant` Property

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

h2 {
  font-variant: small-caps;
}

34 9.1 34 9.3 9.3

Use with a

PostCSS Plugin for font-variant Property (bundled with Preset Env)

Break Properties

Properties for defining the break behavior between and within boxes

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

51 12 92 11.1 51 92 37 5.0 51 5.0

Use with a

PostCSS Plugin for Break Properties (bundled with Preset Env)

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);
}

49 15 31 36 9.1 49 31 36 9.3 5.0 50 5.0 9.3

Use with a

PostCSS Plugin for Custom Properties (bundled with Preset Env)

Gap Properties

Properties for defining gutters within a layout

.grid-1 {
  gap: 20px;
}

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

66 16 61 53 12 66 61 47 12 9.0 66 5.0 12

Use with a

PostCSS Plugin for Gap Properties (bundled with Preset Env)

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;
}

57 16 52 44 10.1 57 52 43 10.3 6.0 57 5.0 10.3

Use with a

PostCSS Plugin for Grid Layout

Media Query Ranges

A syntax for defining media query ranges using ordinary comparison operators

@media (width < 480px) {}

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

@media (width >= 768px) {}

104 104 102 90 16.4 104 102 71 16.4 20.0 104 23.0 16.4

Use with a

PostCSS Plugin for Media Query Ranges (bundled with Preset Env)

`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;
}

41 13 27 28 9.1 41 27 28 9.3 4.0 41 5.0 9.3

Use with a

PostCSS Plugin for unset Keyword (bundled with Preset Env)

`:any-link` Hyperlink Pseudo-Class

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

nav :any-link > span {
  background-color: yellow;
}

1 79 1 15 3 18 4 14 1 1.0 37 5.0 1

Use with a

PostCSS Plugin for :any-link Hyperlink Pseudo-Class (bundled with Preset Env)

`:blank` Empty-Value Pseudo-Class

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

input:blank {
  background-color: yellow;
}

Use with a

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

Constants for calculation simplification

p {
  font-size: calc(pow(e, pi) * 1rem);
}

110 110 114 96 16 110 114 74 16 21.0 110 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; }
}

99 99 97 85 15.4 99 97 68 15.4 18.0 99 21.0 15.4

Use with a

PostCSS Plugin for CSS Cascade Layers (bundled with Preset Env)

Case-Insensitive Attributes

An attribute selector matching attribute values case-insensitively

[frame=hsides i] {
  border-style: solid none;
}

49 79 47 36 9 49 47 36 9 5.0 49 5.0 9

Use with a

PostCSS Plugin for Case-Insensitive Attributes (bundled with Preset Env)

`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);
}

79 79 75 66 13.1 79 79 57 13.4 12.0 79 8.0 13.4

Use with a

PostCSS Plugin for clamp Function (bundled with Preset Env)

`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;
}

97 15.4 97 15.4 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);
}

111 111 113 97 15 111 113 75 15 22.0 111 15

Use with a

PostCSS Plugin for color() Function (bundled with Preset Env)

Color Functional Notation

A space and slash separated notation for specifying colors

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

65 79 52 52 12.1 65 52 47 12.2 9.0 65 5.0 12.2

Use with a

PostCSS Plugin for Color Functional Notation (bundled with Preset Env)

`color-mix()` Function

A function for mixing colors

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

111 111 113 97 16.2 111 113 75 16.2 22.0 111

Use with a

PostCSS Plugin for color-mix() Function (bundled with Preset Env)

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 */
  }
}

105 105 110 91 16 105 110 72 16 20.0 105 16

Use with a

JavaScript Library for Container Queries

Alt text for `content`

Syntax that allows setting alternative text

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

77 79 128 64 17.4 77 128 55 17.4 12.0 77 7.0 17.4

Use with a

PostCSS Plugin for Alt text for content

`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) {}

Use with a

PostCSS Plugin for Custom Media Queries (bundled with Preset Env)

`: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;
}

120 120 49 106 16.4 120 49 80 16.4 25.0 120 16.4

Use with a

PostCSS Plugin for :dir Directionality Pseudo-Class (bundled with Preset Env)

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;
}

115 115 70 101 15 115 79 77 15 23.0 115 15

Use with a

PostCSS Plugin for Two values syntax for display (bundled with Preset Env)

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);
}

72 79 83 60 12.1 72 83 51 12.2 11.0 72 6.0 12.2

Use with a

PostCSS Plugin for Double Position Gradients (bundled with Preset Env)

`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);
}

120 120 118 106 15.4 120 118 80 15.4 25.0 120 15.4

Use with a

PostCSS Plugin for pow(), sqrt(), hypot(), log(), exp() exponential functions (bundled with Preset Env)

`fangsong` Font Family

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

body {
  font-family: fangsong;
}

Use with a

PostCSS Plugin for fangsong Font Family

Logical Values in float and clear

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

span:first-child {
  float: inline-start;
}

118 118 55 104 15 118 55 79 15 25.0 118 15

Use with a

PostCSS Plugin for Logical Values in float and clear (bundled with Preset Env)

`: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;
}

86 86 85 72 15.4 86 85 61 15.4 14.0 86 12.0 15.4

Use with a

`: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);
}

60 79 52 47 10.1 60 52 44 10.3 8.0 60 5.0 10.3

Use with a

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);
}

108 108 94 4 108 73 5 21.0 108 5

Use with a

PostCSS Plugin for Font format() Keywords (bundled with Preset Env)

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);
	}
}

Use with a

PostCSS Plugin for Gamut mapping for CSS color functions (bundled with Preset Env)

Gradients Interpolation Method

Define the interpolation method for gradients

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

111 111 127 97 16.2 111 127 75 16.2 22.0 111 16.2

Use with a

PostCSS Plugin for Gradients Interpolation Method (bundled with Preset Env)

`:has()` Relational Pseudo-Class

A pseudo-class for matching ancestor and sibling elements

a:has(> img) {
  display: block;
}

105 105 121 91 15.4 105 121 72 15.4 20.0 105 15.4

Use with a

Hexadecimal Alpha Notation

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

section {
  background-color: #f3f3f3f3;
  color: #0003;
}

62 79 49 49 10 62 49 47 9.3 8.0 62 5.0 9.3

Use with a

PostCSS Plugin for Hexadecimal Alpha Notation (bundled with Preset Env)

`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%);
}

101 101 96 87 15 101 96 70 15 19.0 101 22.0 15

Use with a

PostCSS Plugin for hwb() Function (bundled with Preset Env)

`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;
}

106 106 97 92 15.4 106 97 72 15.4 20.0 106 15.4

Use with a

PostCSS Plugin for ic length unit (bundled with Preset Env)

`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
  );
}

21 79 89 15 14 25 89 14 14 1.5 4.4 5.0 17

Use with a

PostCSS Plugin for image-set() Function (bundled with Preset Env)

`: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;
}

10 13 29 11 5.1 18 16 11 5 1.0 2.2 5.0 5

`:is()` Matches-Any Pseudo-Class

A pseudo-class for matching elements in a selector list

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

88 88 82 74 14 88 82 63 14 15.0 88 14.0 14

Use with a

PostCSS Plugin for :is() Matches-Any Pseudo-Class (bundled with Preset Env)

`lab()` Function

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

body {
  color: lab(80% 50 20);
}

116 116 113 102 16.2 116 113 78 16.2 24.0 116 16.2

Use with a

PostCSS Plugin for lab() Function (bundled with Preset Env)

`lch()` Function

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

body {
  color: lch(53% 105 40);
}

116 116 113 102 16.2 116 113 78 16.2 24.0 116 16.2

Use with a

PostCSS Plugin for lch() Function

`light-dark()` Function

React to the current used color-scheme value

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

123 123 120 109 17.5 123 120 82 17.5 27.0 123 17.5

Use with a

PostCSS Plugin for light-dark() Function

Logical Overflow

Flow-relative overflow properties

div {
  overflow-block: scroll;
}

69 79

Use with a

PostCSS Plugin for Logical Overflow

Logical Overscroll Behavior

Flow-relative overscroll-behavior properties

div {
  overscroll-behavior-block: scroll;
}

77 79 73 64 16 77 79 55 16 12.0 77 7.0 16

Use with a

PostCSS Plugin for Logical Overscroll Behavior

Logical Properties and Values

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

span:first-child {
  margin-inline-start: 10px;
}

89 89 66 75 15 89 66 63 15 15.0 89 15.0 15

Use with a

PostCSS Plugin for Logical Properties and Values (bundled with Preset Env)

Logical values in the `resize` property

Flow-relative (block or inline) values in resize

area {
  resize: inline;
}

118 118 63 104 16 118 63 79 25.0 118

Use with a

PostCSS Plugin for Logical values in the resize property (bundled with Preset Env)

Logical Viewport Units

Flow-relative (horizontal or vertical) Viewport Units

span:first-child {
  width: 5vi; height: 10vb; 
}

108 108 101 94 15.4 108 101 73 15.4 21.0 108 15.4

Use with a

PostCSS Plugin for Logical Viewport Units (bundled with Preset Env)

Aspect-Ratio number values

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

@media (aspect-ratio: 1.77) {
  html {
    background-color: cyan;
  }
}

110 110 78 16.4 110 78 16.4 110

Use with a

PostCSS Plugin for Aspect-Ratio number values (bundled with Preset Env)

Nested `calc()`

Nest calc functions with the calc function name

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

51 16 48 38 11 51 48 41 11 5.0 51 5.0 11

Use with a

PostCSS Plugin for Nested calc() (bundled with Preset Env)

Nesting Rules

A syntax for nesting relative rules within rules

article {
  & p {
    color: #333;
  }
}

120 120 117 106 17.2 120 117 80 17.2 25.0 120 17.2

Use with a

PostCSS Plugin for Nesting Rules (bundled with Preset Env)

`:not()` Negation List Pseudo-Class

A pseudo-class for ignoring elements in a selector list

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

88 88 84 74 9 88 84 9 15.0 88 14.0 9

Use with a

PostCSS Plugin for :not() Negation List Pseudo-Class (bundled with Preset Env)

`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);
}

116 116 113 102 16.2 116 113 78 16.2 24.0 116 16.2

Use with a

PostCSS Plugin for oklab and oklch color functions (bundled with Preset Env)

Support for percentages for `opacity`

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

img {
  opacity: 90%;
}

78 79 70 65 13.1 78 79 56 13.4 12.0 78 8.0 13.4

Use with a

PostCSS Plugin for Support for percentages for opacity (bundled with Preset Env)

`overflow` Shorthand Property

A property for defining overflow-x and overflow-y

html {
  overflow: hidden auto;
}

68 79 61 55 13.1 68 61 48 13.4 10.0 68 6.0 13.4

Use with a

PostCSS Plugin for overflow Shorthand Property (bundled with Preset Env)

`overflow-wrap` Property

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

p {
  overflow-wrap: break-word;
}

23 18 49 12.1 7 25 49 12.1 7 1.5 4.4 5.0 7

Use with a

PostCSS Plugin for overflow-wrap Property (bundled with Preset Env)

`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;
}

63 18 59 50 16 63 59 46 16 8.0 63 5.0 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;
}

59 79 53 46 11 59 53 43 11 7.0 59 5.0 11

Use with a

PostCSS Plugin for Place Properties (bundled with Preset Env)

`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;
  }
}

76 79 67 62 12.1 76 67 54 13 14.2 76 7.0 13

Use with a

`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;
  }
}

74 79 63 62 10.1 74 64 53 10.3 11.0 74 6.0 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));
}

Use with a

PostCSS Plugin for random() function

`:read-only` and `:read-write` selectors

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

input:read-only {
  background-color: #ccc;
}

1 13 78 9 4 18 79 10.1 3.2 1.0 37 5.0 3.2

`rebeccapurple` Color

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

html {
  color: rebeccapurple;
}

38 12 33 11 25 9 38 33 25 8 3.0 38 5.0 8

Use with a

PostCSS Plugin for rebeccapurple Color (bundled with Preset Env)

Relative Colors

Modify existing colors using color functions

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

128 128

Use with a

PostCSS Plugin for Relative Colors (bundled with Preset Env)

`:scope()` Reference Element Pseudo-class

A pseudo-class for matching one or more scoping roots

:scope {
  background-color: pink;
}

27 79 32 15 7 27 32 15 7 1.5 4.4 5.0 7

Use with a

PostCSS Plugin for :scope() Reference Element Pseudo-class (bundled with Preset Env)

`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);
}

118 15.4 118 15.4

Use with a

PostCSS Plugin for abs() and sign() functions

`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');
}

Use with a

PostCSS Plugin for src() function

`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);
}

125 125 118 111 15.4 125 118 83 15.4 27.0 125 15.4

Use with a

PostCSS Plugin for round(), mod() and rem() functions (bundled with Preset Env)

`system-ui` Font Family

A generic font used to match the user’s interface

body {
  font-family: system-ui;
}

56 79 92 43 11 56 92 43 11 6.0 56 5.0 11

Use with a

PostCSS Plugin for system-ui Font Family (bundled with Preset Env)

`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;
}

87 87 70 73 87 79 62 14.0 87 13.0

Use with a

PostCSS Plugin for text-decoration shorthand (bundled with Preset Env)

`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);
}

111 111 108 97 15.4 111 108 75 15.4 22.0 111 15.4

Use with a

PostCSS Plugin for sin(), cos(), tan(), asin(), acos(), atan() and atan2() functions (bundled with Preset Env)

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;
}

88 88 82 74 14 88 82 63 14 15.0 88 14.0 14

Custom Selectors

An at-rule for defining aliases that represent selectors

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

article :--heading + p {}

Use with a

PostCSS Plugin for Custom Selectors (bundled with Preset Env)

Custom Environment Variables

A syntax for using custom values accepted by CSS globally

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

Use with a

PostCSS Plugin for Custom Environment Variables