Exciting CSS updates since 2020
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:
Lis perceived lightness (0%-100%). “Perceived” means that it has consistent lightness for our eyes, unlike L in hsl().Cis chroma, from gray to the most saturated color.His the hue angle (0-360).ais opacity (0-1 or 0-100%).
- 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 Björn Ottosson, creator of OKLAB
- caniuse: oklch()
- 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 is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility.
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 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
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
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