New  in  CSS

# Container Queries

allow you to query a parent element’s size and style to determine the styles which should be applied to any of its children.

.post {  container-type: inline-size;  container-name: sidebar; }

Example

# :has()

the :has() selector is one of the most powerful new CSS capabilities landing in modern browsers. With :has(), you can apply styles by checking to see if a parent element contains the presence of specific children, or if those children are in a specific state. This means, we essentially now have a parent selector.

h1:has(+ p) {  margin-bottom: 0; }

Example

# :nth-of syntax

nth-child syntax gives a new keyword ("of"), which lets you use the existing micro syntax of An+B, with a more specific subset within which to search.

.highlight: nth-child(2){   color: red; }

Example

# text-wrap: balance

To balance the text, the browser effectively performs a binary search for the smallest width which doesn't cause any additional lines, stopping at one CSS pixel (not display pixel). To further minimize steps in the binary search the browser starts with 80% of the average line width.

 h1 {    text-wrap: balance;  }

Example

# Wide-gamut color spaces

now we have a range of new color spaces on the web platform including REC2020, P3, XYZ, LAB, OKLAB, LCH, and OKLCH. Meet the new web color spaces, and more,

 h1 {    background: lch(50 104 120);  }

Example

# color-mix()

This function supports the mixing of two color values to create new values based on the channels of the colors getting mixed. The color space in which you mix affects the results. Working in a more perceptual color space like oklch will run through a different color range than something like srgb.

 h1 {    background: color-mix(in srgb, var(--colorPrimary), transparent 90%);  }

Example

# Scoped CSS

CSS scoped styles allow developers to specify the boundaries for which specific styles apply, essentially creating native namespacing in CSS. Before, developers relied on 3rd party scripting to rename classes, or specific naming conventions to prevent style collision, but soon, you can use @scope.

 h1 {    background: color-mix(in srgb, var(--colorPrimary), transparent 90%);  }

Example

CSS Snapshot 2023

TAP TO  FOLLOW