1. CSS Subgrid

Subgrid allows a child grid to inherit the tracks of its parent grid. This helps align nested grid items precisely with the parent layout.

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 10px;
}
.child-grid {
  display: grid;
  grid-template-columns: subgrid; /* aligns with parent's columns */
  gap: 8px;
}
.child-grid > div {
  padding: 8px;
  background: #f3f3f3;
}

Note: Subgrid support varies across browsers; always check compatibility and provide fallbacks.

2. Container Queries

Container queries apply styles based on a container's size, enabling truly component-based responsive design.

.card-wrap { container-type: inline-size; }
.card {
  padding: 12px;
  background: #fffbe6;
}
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 12px;
  }
  .card img { width: 150px; }
}

3. Native CSS Nesting

Native nesting lets you write nested selectors natively in CSS using the & reference, improving readability (similar to SCSS nesting).

.card {
  padding: 12px;
  border: 1px solid #ddd;
}
.card {
  & h3 {
    margin: 0 0 8px;
  }
  & p {
    margin: 0;
    color: #444;
  }
}

Note: Native nesting requires modern browser support; preprocessors like SCSS are still useful for broader compatibility.

4. Scoped Styles

Scoped styles limit CSS to a specific component to avoid global collisions. In frameworks you get this from CSS Modules, Shadow DOM, or the (experimental) style scoped approach.

/* Example using a unique class as a simple scope */
.component-abc {
  border: 1px solid #ccc;
  padding: 12px;
}
.component-abc p { color: teal; }

5. Cascade Layers (@layer)

@layer lets you control specificity and order of different css sources — utilities, components, and overrides — without relying on !important.

@layer reset {
  button { all: unset; }
}
@layer components {
  .btn { padding: 8px 12px; background: gray; color: white; }
}
@layer utilities {
  .btn-primary { background: blue; }
}
/* Layers are applied in cascade order; later layers override earlier ones */

6. New Pseudo-classes (:is(), :where(), :has())

These pseudo-classes simplify selector logic and enable relational checks:

• :is() — matches if any selector inside matches (shorter specificity).
• :where() — similar to :is() but with zero specificity.
• :has() — relational selector (parent that has a child matching the selector).

/* :is() example */
:is(h1, h2, h3) { margin-top: 0; }

/* :where() example — zero specificity */
:where(.note, .tip) { font-style: italic; }

/* :has() example — select article with an image */
article:has(img) { padding: 12px; border: 1px solid #eee; }

Compatibility notes: :has() and other features are relatively new — verify browser support and provide fallbacks when needed.