Exciting CSS updates since 2020

Colors#

OKLAB and OKLCH#

Use OKLCH, it has nicer colors and beautiful gradients.

oklch() is a new way to define CSS colors. In oklch(L C H ) or oklch(L C H / a), each item corresponds as follows:

• L is perceived lightness (0%-100%). “Perceived” means that it has consistent lightness for our eyes, unlike L in hsl().
• C is chroma, from gray to the most saturated color.
• H is the hue angle (0-360).
• a is opacity (0-1 or 0-100%).

Documentation on OKLCH#

• OKLCH Color Picker & Converter
• OKLCH in CSS: why we moved from RGB and HSL: By Evil Martians.
• LCH is the best color space!: By Atmos.
• Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS: By Smashing Magazine.
• oklch() on MDN
• oklab() on MDN
• A perceptual color space for image processing: By the creator of OKLAB, Björn Ottosson.
• caniuse: oklch()

New color functions#

• color-mix() on MDN: “Takes two color values and returns the result of mixing them in a given colorspace by a given amount.”
• color() on MDN: “Allows a color to be specified in a particular, specified color space rather than the implicit sRGB color space.”

text-wrap: balance#

Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility.

• text-wrap: balance

Cascade Layers#

Cascade layers allow controlling the specificity and order of rule sets across stylesheets.

• @layer on MDN
• Cascade Layers on CSS Tricks
• Getting Started With CSS Cascade Layers
• Hello, CSS Cascade Layers: By Ahmad Shadeed.
• caniuse: Cascade Layers

CSS Subgrid#

CSS subgrid allows a child grid to inherit the column and row definitions of its parent grid, making it easier to align nested grid items consistently with the parent layout. It helps maintain a cohesive design structure without redefining grid tracks in the child elements.

• Subgrid on MDN
• CSS subgrid: By web.dev.
• caniuse: CSS Subgrid

Related 📚 CSS Grid on this blog

CSS Nesting#

One of our favorite CSS preprocessor features is now built into the language: nesting style rules.

• Using CSS nesting on MDN
• CSS Nesting: By the Chrome team.
• Nesting selector on MDN
• Nesting Layers: By builder.io.
• caniuse: CSS Nesting

CSS Masking and Clipping#

Both are used to hide parts of elements and show other parts.

Masks are images; Clips are paths.

• Clipping and Masking in CSS: By CSS Tricks.
• CSS Masking Module Level 1