cssdb logo

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

Break Properties

Properties for defining the break behavior between and within boxes

Specification Stage 3 badge

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

Custom Properties

A syntax for defining custom values accepted by all CSS properties

Specification Stage 3 badge

img {
  --some-length: 32px;

  height: var(--some-length);
  width: var(--some-length);
}
Use with a

font-variant Property

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

Specification Stage 3 badge

h2 {
  font-variant: small-caps;
}
Use with a

Gap Properties

Properties for defining gutters within a layout

Specification Stage 3 badge

.grid-1 {
  gap: 20px;
}

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

Grid Layout

A syntax for using a grid concept to lay out content

Specification Stage 3 badge

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

Media Query Ranges

A syntax for defining media query ranges using ordinary comparison operators

Specification Stage 3 badge

@media (width < 480px) {}

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

@media (width >= 768px) {}
Use with a

Case-Insensitive Attributes

An attribute selector matching attribute values case-insensitively

Specification Stage 2 badge

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

:dir Directionality Pseudo-Class

A pseudo-class for matching elements based on their directionality

Specification Stage 2 badge

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

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

:focus-visible Focus-Indicated Pseudo-Class

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

Specification Stage 2 badge

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

:focus-within Focus Container Pseudo-Class

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

Specification Stage 2 badge

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

gray() Function

A function for specifying fully desaturated colors

Specification Stage 2 badge

p {
  color: gray(50);
}
Use with a

:has() Relational Pseudo-Class

A pseudo-class for matching ancestor and sibling elements

Specification Stage 2 badge

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

Hexadecimal Alpha Notation

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

Specification Stage 2 badge

section {
  background-color: #f3f3f3f3;
  color: #0003;
}
Use with a

hwb() Function

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

Specification Stage 2 badge

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

image-set() Function

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

Specification Stage 2 badge

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

lab() Function

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

Specification Stage 2 badge

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

lch() Function

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

Specification Stage 2 badge

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

Logical Properties and Values

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

Specification Stage 2 badge

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

:matches() Matches-Any Pseudo-Class

A pseudo-class for matching elements in a selector list

Specification Stage 2 badge

p:matches(:first-child, .special) {
  margin-top: 1em;
}
Use with a

:not() Negation List Pseudo-Class

A pseudo-class for ignoring elements in a selector list

Specification Stage 2 badge

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

overflow Shorthand Property

A property for defining overflow-x and overflow-y

Specification Stage 2 badge

html {
  overflow: hidden auto;
}
Use with a

overflow-wrap Property

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

Specification Stage 2 badge

p {
  overflow-wrap: break-word;
}
Use with a

Place Properties

Properties for defining alignment within a layout

Specification Stage 2 badge

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

rebeccapurple Color

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

Specification Stage 2 badge

html {
  color: rebeccapurple;
}
Use with a

:something() Zero-Specificity Pseudo-Class

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

Specification Stage 2 badge

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

system-ui Font Family

A generic font used to match the user’s interface

Specification Stage 2 badge

body {
  font-family: system-ui;
}
Use with a

Color Functional Notation

A space and slash separated notation for specifying colors

Specification Stage 1 badge

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

Custom Media Queries

An at-rule for defining aliases that represent media queries

Specification Stage 1 badge

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

@media (--narrow-window) {}
Use with a

Custom Selectors

An at-rule for defining aliases that represent selectors

Specification Stage 1 badge

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

article :--heading + p {}
Use with a

Custom Environment Variables

A syntax for using custom values accepted by CSS globally

Specification Stage 0 badge

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

Nesting Rules

A syntax for nesting relative rules within rules

Specification Stage 0 badge

article {
  & p {
    color: #333;
  }
}
Use with a

When/Else Rules

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

Specification Stage 0 badge

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

Want to contribute? Checkout the cssdb on GitHub