T
css frontend web-design oklch container-queries modern-web

Modern CSS Features Guide: Mastering OKLCH, Container Queries, and :has()

Explore the next generation of CSS. A complete guide to OKLCH color picker, Container Queries, the :has() selector, CSS Nesting, and @layer for modern web design.

2026-04-12

Modern CSS Features Guide: Mastering OKLCH, Container Queries, and :has()

The CSS landscape is evolving faster than ever. Features that once required complex JavaScript or pre-processors are now natively supported in browsers, offering better performance and developer experience. This guide explores the most impactful modern CSS features and how they are changing the way we build the web.

1. The Next Generation of Color: OKLCH and OKLAB

For decades, developers have used HEX, RGB, and HSL. However, these color spaces have a major flaw: they are not perceptually uniform. For example, in HSL, two colors with the same "lightness" value can look very different to the human eye.

OKLCH and OKLAB

OKLCH (and its predecessor OKLAB) solves this by using a perceptually uniform color space.

  • L (Lightness): How bright the color appears to humans.
  • C (Chroma): The intensity or "purity" of the color.
  • H (Hue): The angle on the color wheel.

Why use it?

  • Consistency: Changing the hue doesn't change the perceived brightness.
  • Wider Gamut: Supports Display-P3 colors (available on modern Macs and iPhones), which can represent 50% more colors than sRGB.
  • Dynamic Themes: Perfect for generating accessible color palettes programmatically.

2. Advanced Layout: Container Queries and Subgrid

Container Queries (@container)

For years, we relied on Media Queries to change layouts based on the viewport size. Container Queries allow us to change a component's layout based on the size of its parent container.

  • Use Case: A "Card" component that displays as a grid when in a wide sidebar but as a list when in a narrow main column.
  • Benefit: True component-driven design. Your components can be truly portable across different layouts.

CSS Subgrid

Subgrid allows a child element to inherit the grid tracks defined on its parent.

  • Problem Solved: Aligning items across different grid cells (e.g., aligning card headers and footers even when the content length varies).

3. The "Family" Selectors: :has() and :is()

The :has() Selector (The "Parent" Selector)

The :has() selector is often called the "Holy Grail" of CSS. It allows you to style an element based on its children or subsequent elements.

  • Example: card:has(img) styles the card only if it contains an image.
  • Example: form:has(input:invalid) can style the entire form background if there's an error.

The :is() and :where() Selectors

These allow you to group multiple selectors into one, reducing repetition and keeping your code clean.

  • header :is(h1, h2, h3) { color: red; }

4. Organizational Power: @layer and CSS Nesting

Cascade Layers (@layer)

As CSS grows, specificity conflicts (the "z-index/specificity war") become harder to manage. @layer allows you to define explicit priority levels for your CSS.

  • Benefit: You can ensure your "theme" layer always overrides your "base" layer, regardless of selector specificity.

Native CSS Nesting

You no longer need Sass or Less for nesting! Browsers now natively support syntax like:

.card {
  background: white;
  &:hover {
    background: grey;
  }
}

5. Visual Transitions and Positioning

View Transitions API

Allows for seamless animations when navigating between pages or changing states, similar to mobile app transitions.

Anchor Positioning

A new way to position elements relative to "anchor" elements on the page (e.g., tooltips or menus that follow their button even as the page scrolls).

Summary of Modern CSS Benefits

Feature Best For Status
OKLCH Modern, accessible color palettes Wide Support
Container Queries Truly responsive component-driven design Wide Support
:has() Styling parents based on state/content Wide Support
@layer Managing large-scale CSS architecture Wide Support
Nesting Cleaner, more organized code Wide Support

Conclusion

Modern CSS is making our code cleaner, faster, and more powerful. By embracing features like OKLCH for color and Container Queries for layout, you can build websites that are more accessible and easier to maintain.

Need to convert your old HEX colors to modern OKLCH? Or maybe you're building a new layout? Stay tuned for our upcoming CSS Generator Tools! In the meantime, you can use our Color Converter to handle HEX, RGB, and HSL translations.

Back to Blog