New CSS can make your life easier

The purpose of this guide is to introduce you to a collection of innovative and powerful features recently introduced in CSS. While this article provides an overview of their syntax and practical use cases, there's far more depth to explore with each feature. Use this as a starting point to dive deeper into these cutting-edge advancements.

1. Container Queries (Size)

What Are Size-Based Container Queries?

Size-based container queries allow you to apply styles to child elements based on the dimensions of their parent container, rather than relying on the entire viewport’s size, as with traditional media queries.

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

Why Does This Matter?

This brings the concept of “CSS mixins” to life. Just as Sass mixins enhance maintainability, style-based container queries extend CSS’s native capabilities, considering the cascade and allowing for greater flexibility.

Browser Support:

• Supported: Chrome and derivatives.

• Coming Soon: Safari.

• Not Supported: Firefox.

• Enhancements: Limited.

• Polyfill: Not available.

3. Container Units

What Are Container Units?

Container units are responsive measurement units (e.g., cqw, cqh, cqmin, cqmax) that calculate dimensions based on the container’s size instead of the viewport. These work similarly to vw (1% of viewport width) but are scoped to a container.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Why Does This Matter?

If inner elements need to scale proportionally to their parent container, container units provide a clean, CSS-only solution. A common use case is scaling typography or spacing inside cards or modular components.

Browser Support:

• Full Support: Modern browsers.

• Enhancements: Yes, with fallbacks.

• Polyfill: Available.

4. :has() Pseudo-Selector

What Is the :has() Selector?

The :has() pseudo-class allows you to style parent elements based on the presence of specific child elements within them.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Why Does This Matter?

The :has() selector effectively works as a “parent selector” in CSS, making it possible to style parents based on their children. For example, you can use :has() to highlight a parent form field only when an error message is present.

Browser Support:

• Supported: All major browsers.

• Polyfill: JavaScript only.

*5. View Transitions
*
What Are View Transitions?

This feature introduces two types of animations:

1. Single-page transitions (require JavaScript).

2. Multi-page transitions (CSS-only).
   

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

*Why Does This Matter?
*
Transitions enhance the user experience by animating elements during state changes, making interactions feel smoother. They use “tweening,” where animations interpolate between starting and ending states without manually defining each step.

Browser Support:

• Supported: Chrome and derivatives.

• Not Supported: Safari, Firefox.

• Enhancements: Yes, with fallback animations.

6. Nesting

What Is Nesting?

CSS nesting allows you to write child selectors inside their parent rules, making the code cleaner and more maintainable.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Why Does This Matter?

Nesting reduces redundancy in CSS, grouping related styles together. However, overusing it may lead to overly specific selectors and reduced reusability.

Browser Support:

• Full Support: Modern browsers.

7. Scroll-Driven Animations

What Are Scroll-Driven Animations?

These animations are tied to scrolling and can be implemented using CSS without relying on JavaScript.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Why Does This Matter?

From progress indicators to parallax effects, scroll-driven animations improve interactivity and reduce reliance on JavaScript for performance-critical tasks.

Browser Support:

• Supported: Chrome.

• Coming Soon: Firefox.

8. Subgrid

What Is Subgrid?

The subgrid value allows child grid items to align with the rows or columns of their parent grid without duplicating grid definitions.

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

Why Does This Matter?

Subgrid ensures consistent alignment across nested grid structures, making complex layouts easier to maintain.

Browser Support:

• Full Support: All modern browsers.

Final Thoughts

CSS continues to evolve at an exciting pace. With features like container queries, view transitions, and subgrid, the language becomes more robust and intuitive for modern web development. Keep an eye on future developments, including relative color syntax, scoped CSS, and new HTML elements like , which promise even greater design possibilities.

The above is the detailed content of New CSS can make your life easier. For more information, please follow other related articles on the PHP Chinese website!