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?

Custom Properties

A syntax for defining custom values accepted by all CSS properties

Specification cssdb badge

img {
  --some-length: 32px;

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

Cascade all Property

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

Specification cssdb badge

a {
  all: initial;
}
Use with a

Font font-variant Property

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

Specification cssdb badge

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

Grid Layout

A syntax for using a grid concept to lay out content

Specification cssdb badge

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

Image image-set() function

A function for delivering the most appropriate image for a user’s device

Specification cssdb badge

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

Font system-ui Family

A generic font intended to match the default user interface

Specification cssdb badge

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

Color rebeccapurple

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

Specification cssdb badge

html {
  color: rebeccapurple;
}
Use with a

Logical Properties and Values

Flow-relative (LTR or RTL) properties and values

Specification cssdb badge

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

Media Queries Ranges

A syntax for defining media query ranges using ordinary mathematical comparison operators

Specification cssdb badge

@custom-media --small-viewport (max-width: 30em)

@media (--small-viewport) {}
Use with a

Selector :dir Pseudo-Class

A pseudo-class for writing selectors that represent an element based on its directionality

Specification cssdb badge

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

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

Selector :matches() Matches-Any Pseudo-Class

A pseudo-class used to match a selector list

Specification cssdb badge

p:matches(:first-child, .special) {}
Use with a

Selector :not() Negation Pseudo-Class

A pseudo-class used to ignore a selector list

Specification cssdb badge

p:not(:first-child, .special) {}
Use with a

Selector Attribute Case-Sensitivity

An attribute selector used to match attribute values case-insensitively

Specification cssdb badge

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

Text overflow-wrap Property

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

Specification cssdb badge

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

Color gray() Function

A function used to fully desaturate colors

Specification cssdb badge

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

Color color-mod() Function

A function used to modify a color

Specification cssdb badge

p {
  color: color-mod(black alpha(50%));
}
Use with a

Color #RRGGBBAA Notation

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

Specification cssdb badge

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

Color hwb() Function

A function used to specify colors, similar to HSL, but often even easier for humans to work with

Specification cssdb badge

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

Color Functional Notation

A space and slash separated notation used to specify colors

Specification cssdb 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 Selectors

    An at-rule used to define aliases representing selectors

    Specification cssdb badge

    @custom-selector :--heading h1, h2, h3, h4, h5, h6
    
    article :--heading + p {}
    Use with a

    Media Queries Custom Media Queries

    An at-rule used to define aliases representing media queries

    Specification cssdb badge

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

    Nesting

    A syntax for nesting relative rules inside another

    Specification cssdb badge

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

    When/Else Rules

    At-rules used to define conditional rules and unify the disparate conditional rules into a single grammar

    Specification cssdb badge

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

    Element Queries

    A syntax for container-style element queries

    Specification cssdb badge

    @element html and (min-width: 500px) {
      body {
        background: lime;
      }
    }
    Use with a

    Media Queries media() Function

    A function used to define media queries within values

    Specification cssdb badge

    p {
      font-size: media(
        16px,
        (min-width:  600px) 20px,
        (min-width: 1000px) 40px,
        (min-width: 1400px) 60px
      );
    }
    Use with a

    Sizing aspect-ratio Property

    A property for defining the aspect ratio of an element

    Specification cssdb badge

    div {
      aspect-ratio: 16/9;
      width: 200px;
    }
    Use with a

    Custom Property Sets

    A syntax for storing properties in a named variable, referenceable in other style rules

    Specification cssdb badge

    img {
      --some-length-styles: {
        height: 32px;
        width: 32px;
      }
    
      @apply --some-length-styles;
    }
    Use with a

    Want to contribute? Checkout the cssdb on GitHub