@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.
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.
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.
Select Menu Element
Say Hello to selectmenu, a Fully Style-able select Element.
@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.