CSS Database

`all` Property

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

a {
  all: initial;
}

79 27 37 10 24 9.3 97 64 97 95 12.12 4 10.4 7.12 2.5

Use with a

PostCSS Plugin for all Property

`font-variant` Property

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

Specification

h2 {
  font-variant: small-caps;
}

34 10 9.3 95 2.5

Use with a

PostCSS Plugin for font-variant Property

Break Properties

Properties for defining the break behavior between and within boxes

Specification

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

10 12 10 12 10 all 12 10 12.12 5

Use with a

PostCSS Plugin for Break Properties

Custom Properties

A syntax for defining custom values accepted by all CSS properties

Specification

img {
  --some-length: 32px;

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

16 31 49 10 36 10 97 64 97 95 12.12 5 2.5

Use with a

PostCSS Plugin for Custom Properties

Gap Properties

Properties for defining gutters within a layout

Specification

.grid-1 {
  gap: 20px;
}

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

66 66 16 61 61 53 47 12 12 9.0 66

Use with a

PostCSS Plugin for Gap Properties

Grid Layout

A syntax for using a grid concept to lay out content

Specification

section {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
}

16 54 58 11 44 10.3 97 64 97 95 12.12 6.2 10.4 2.5

Use with a

PostCSS Plugin for Grid Layout

Media Query Ranges

A syntax for defining media query ranges using ordinary comparison operators

Specification

@media (width < 480px) {}

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

@media (width >= 768px) {}

Use with a

PostCSS Plugin for Media Query Ranges

`:any-link` Hyperlink Pseudo-Class

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

Specification

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

1 18 79 1 4 15 14 3 1 1.0 65

Use with a

PostCSS Plugin for :any-link Hyperlink Pseudo-Class

`:blank` Empty-Value Pseudo-Class

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

Specification

input:blank {
  background-color: yellow;
}

Use with a

Case-Insensitive Attributes

An attribute selector matching attribute values case-insensitively

Specification

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

79 47 49 9 36 9 97 64 97 95 12.12 5 10.4 2.5

Use with a

PostCSS Plugin for Case-Insensitive Attributes

`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.

Specification

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

79 79 79 75 79 66 57 13.1 13.4 12.0 79

`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

Specification

.background {
  background-color:#ccc;
}
.background.color-adjust {
  color-adjust: economy;
}
.background.color-adjust-exact {
  color-adjust: exact;
}

48 95 2.5

`color-contrast()` Function

A function for choosing the color that contrasts the most.

Specification

p {
  color: color-contrast(wheat vs tan, sienna, var(--myAccent), #d2691e);
}

15 15

Color Functional Notation

A space and slash separated notation for specifying colors

Specification

em {
  background-color: hsl(120deg 100% 25%);
  box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);
  color: rgb(0 255 0);
}

65 65 79 52 52 52 47 12.1 12.2 9.0 65

Use with a

PostCSS Plugin for Color Functional Notation

Custom Media Queries

An at-rule for defining aliases that represent media queries

Specification

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

@media (--narrow-window) {}

Use with a

PostCSS Plugin for Custom Media Queries

`:dir` Directionality Pseudo-Class

A pseudo-class for matching elements based on their directionality

Specification

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

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

49 49

Use with a

PostCSS Plugin for :dir Directionality Pseudo-Class

Two values syntax for `display`

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

Specification

.element {
  display: inline flow-root;
  display: inline flex;
  display: block grid;
}

70

Double Position Gradients

A syntax for using two positions in a gradient.

Specification

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

72 72 79 83 83 60 51 12.1 12.2 11.0 72

Use with a

PostCSS Plugin for Double Position Gradients

`fangsong` Font Family

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

Specification

body {
  font-family: fangsong;
}

Use with a

PostCSS Plugin for fangsong Font Family

`:focus-visible` Focus-Indicated Pseudo-Class

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

Specification

:focus:not(:focus-visible) {
  outline: 0;
}

67 67 79 85 85 54 48 14.0 86

Use with a

`:focus-within` Focus Container Pseudo-Class

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

Specification

form:focus-within {
  background: rgba(0, 0, 0, 0.3);
}

79 52 60 11 47 10.3 97 64 97 95 8.2 10.4

Use with a

`:has()` Relational Pseudo-Class

A pseudo-class for matching ancestor and sibling elements

Specification

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

TP

Use with a

Hexadecimal Alpha Notation

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

Specification

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

79 49 62 10 52 10 97 64 97 95 8.2

Use with a

PostCSS Plugin for Hexadecimal Alpha Notation

`hwb()` Function

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

Specification

p {
  color: hwb(120 44% 50%);
}

96 96 15 15

Use with a

PostCSS Plugin for hwb() Function

`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

Specification

p {
  text-indent: 2ic;
}

97 97

Use with a

PostCSS Plugin for ic length unit

`image-set()` Function

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

Specification

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

Use with a

PostCSS Plugin for image-set() Function

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

A pseudo-class for matching elements that have range limitations

Specification

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

79 50 53 11 40 10.3 97 64 97 95 12.12 5 10.4 7.12

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

A pseudo-class for matching elements in a selector list

Specification

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

88 78 88 14 75 14 97 64 97 95 15

`lab()` Function

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

Specification

body {
  color: lab(240 50 20);
}

15 15

Use with a

PostCSS Plugin for lab() Function

`lch()` Function

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

Specification

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

15 15

Use with a

PostCSS Plugin for lch() Function

Logical Properties and Values

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

Specification

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

89 66 89 15 76 15 97 64 97 95 15

Use with a

PostCSS Plugin for Logical Properties and Values

`:not()` Negation List Pseudo-Class

A pseudo-class for ignoring elements in a selector list

Specification

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

88 84 88 9 75 9 97 64 97 95 15

Use with a

PostCSS Plugin for :not() Negation List Pseudo-Class

Support for percentages for `opacity`

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

Specification

img {
  opacity: 90%;
}

78 78 79 70 12.0 78

`overflow` Shorthand Property

A property for defining overflow-x and overflow-y

Specification

html {
  overflow: hidden auto;
}

68 68 79 61 61 55 48 10.0 68

Use with a

PostCSS Plugin for overflow Shorthand Property

`overflow-wrap` Property

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

Specification

p {
  overflow-wrap: break-word;
}

18 49 23 7 15 8 97 10 64 97 95 12.12 4 10.4 7.12

Use with a

PostCSS Plugin for overflow-wrap Property

Place Properties

Properties for defining alignment within a layout

Specification

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

59 59 79 53 53 46 43 11 11 7.0 59

Use with a

PostCSS Plugin for Place Properties

`prefers-color-scheme` Media Query

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

Specification

body {
  background-color: white;
  color: black;
}

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

79 67 76 13 62 13 97 64 97 95 12

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

Specification

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

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

79 63 74 11 64 10.3 97 64 97 95 11.1

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

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

Specification

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

13 78 36 9 23 9 97 10 64 97 95 12.12 4 10.4 7.12

`rebeccapurple` Color

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

Specification

html {
  color: rebeccapurple;
}

12 33 38 7 25 8 97 64 97 95 12.12 4 10.4 7.12 2.5

Use with a

PostCSS Plugin for rebeccapurple Color

`system-ui` Font Family

A generic font used to match the user’s interface

Specification

body {
  font-family: system-ui;
}

79 92 56 11 43 11 97 64 97 95 12.12 6.2 10.4

Use with a

PostCSS Plugin for system-ui Font Family

When/Else Rules

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

Specification

@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

Specification

a:where(:not(:hover)) {
  text-decoration: none;
}

88 88 88 82 82 74 63 15.0 88

Custom Selectors

An at-rule for defining aliases that represent selectors

Specification

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

article :--heading + p {}

Use with a

PostCSS Plugin for Custom Selectors

Font `format()` Keywords

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

Specification

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

4 5

Use with a

PostCSS Plugin for Font format() Keywords

Nesting Rules

A syntax for nesting relative rules within rules

Specification

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

Use with a

PostCSS Plugin for Nesting Rules

`overscroll-behavior` Property

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

Specification

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

body {
  margin: 0;
  overscroll-behavior: none;
}

79 59 65 52 97 64 97 95 8.2 10.4

Container Queries

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

Specification

.container {
  contain: layout inline-size;
}

@container (min-width: 700px) {
  .container {
    /* styles applied when a container is at least 700px */
  }
}

Use with a

Custom Environment Variables

A syntax for using custom values accepted by CSS globally

Specification

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

79 65 69 12 56 11.3 97 64 97 95 10.1

Use with a

PostCSS Plugin for Custom Environment Variables