CSS 2023

This is a tech demo of upcoming CSS features

Please ensure that you use either Chrome or Chrome Canary with the following flag enabled:

chrome://flags/#enable-experimental-web-platform-features

COLRv1 supported

CSS 2023 & NextJS

A demonstration of card components reacting to changes in container size. As this is a draft proposal it will only work in Chrome Canary with the "experimental web platform features" flag enabled.

@container queries

Size queries in Container Queries provide a way to query the size of a container, and conditionally apply CSS to the content of that container.

Color Contrast

The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.

@custom-media

Before @custom-media, media queries had to repeat themselves over and over, or rely on preprocessors to generate the proper output based on static variables during build time.

HWB colour format

HWB stands for hue, whiteness, and blackness. It presents itself as a human-friendly way of articulating color, as it is just a hue and an amount of white or black to lighten or darken.

CSS Nesting Rules

Before @nest, there was a lot of repetition in stylesheets. It became especially unwieldy when selectors were long and each was targeting small differences. The convenience of nesting is one of the most common reasons for adopting a preprocessor.