What CSS Features Will Shape 2022? A Deep Dive into Containers, Queries, Units and More

Review of Recent CSS Development

2021 was a breakthrough year for CSS, introducing features such as container queries, the parent selector, cascade control rules, and sub‑grid. Browser vendors have been rapidly fixing compatibility issues, making many of these features usable in major browsers.

Popular CSS Features

The community has been eagerly awaiting several long‑standing features, many of which landed in browsers during 2022. Below are the highlights.

CSS Container Queries

The @container rule and the @container feature allow styles to react to the size of a container rather than the viewport. Example:

.form__container { container: inline-size; }
.form { display: grid; align-items: center; }
@container (min-width: 480px) {
  .form { grid-template-columns: min-content 1fr 200px; grid-template-areas: "searchIcon searchInput button"; grid-template-rows: 88px; gap: 10px; }
}
@container (min-width: 768px) {
  .form { grid-template-columns: min-content 1fr min-content 200px; grid-template-areas: "searchIcon searchInput cameraIcon button"; grid-template-rows: 88px; gap: 10px; }
}

When supported, the feature can be enabled with a polyfill for browsers that still lack native support.

CSS Parent Selector :has()

Level 4 of the CSS Selectors module adds the :has() pseudo‑class, effectively a parent selector. Example:

figure:has(figcaption) img { border: 5px solid #9c27b0; }

Safari TP 137 is currently the only browser with default support for :has().

CSS Cascade Layers – @layer and @scope

The @layer rule, introduced in CSS Cascading and Inheritance Level 5, lets developers define explicit cascade layers. Level 6 will add @scope to limit the scope of selectors to a specific DOM subtree.

@layer setting, tool, generic, element, object, component, utilities;
@layer setting { /* … */ }
@layer tool { /* … */ }
/* … */

New Viewport and Container Units

CSS Values and Units Level 4 adds several viewport‑relative units ( svh, svw, lvh, lvw, dvh, dvw) and container‑query units ( cqw, cqh, cqi, cqb, cqmin, cqmax). These units make responsive design more intuitive when components are placed inside varying containers.

Advanced Color Functions

CSS Color Module Level 5 introduces color-mix() and color-contrast() alongside extended support for rgb(), hsl(), hwb(), lab(), and lch(). They enable on‑the‑fly color manipulation and accessibility‑focused contrast calculations.

Next‑Generation Transform Properties

CSS Transform Level 2 separates translate(), rotate() and scale() into independent properties, allowing independent animation and transition of each transform component.

element { scale: 2; rotate: 30deg; translate: -50% -50%; }

Scroll‑Linked Animations

The Scroll‑Linked Animations module introduces @scroll-timeline and the animation-timeline property, linking CSS animations to scroll progress.

@keyframes adjust-progressbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@scroll-timeline scroll-in-document { source: auto; orientation: block; scroll-offsets: 0, 100%; }
#progressbar { animation: 1s linear forwards adjust-progressbar; animation-timeline: scroll-in-document; }

CSS Houdini – Registering Custom Properties with @property

The @property rule lets developers define the syntax, initial value and inheritance behavior of custom properties, enabling them to be animated.

@property --milliseconds { syntax: '<integer>'; initial-value: 0; inherits: false; }
.counter { counter-reset: ms var(--milliseconds); animation: count 1s steps(100) infinite; }
@keyframes count { to { --milliseconds: 100; } }

Native Masonry Layout with CSS Grid

CSS Grid Level 4 adds a masonry keyword, allowing native masonry (waterfall) layouts without JavaScript.

.masonry { display: grid; gap: 20px; grid: masonry / repeat(auto-fill, minmax(250px, 1fr)); }

Conclusion

While some of the listed features are already available in major browsers, others remain experimental or are slated for future releases. Developers are encouraged to experiment with the supported features, keep an eye on upcoming specifications, and contribute to the community discussion.

References

CSS Container Queries – //www.w3cplus.com/blog/tags/719.html

CSS Parent Selector – //www.w3cplus.com/css/css-selector-is-and-where-and-has-function.html

CSS Cascade Layers – //www.w3cplus.com/css/css-layer.html

CSS Sub‑grid – //www.w3cplus.com/css/css-grid-tutorial-collection.html

Web.dev Compatibility Reports – //web.dev/compat2021/

CSS Color Module Level 5 – //www.w3.org/TR/css-color-5/

CSS Values and Units Level 4 – //www.w3.org/TR/css-values-4/

CSS Transform Level 2 – //drafts.csswg.org/css-transforms-2/

Scroll‑Linked Animations – //drafts.csswg.org/scroll-animations-1/

CSS Houdini @property – //www.w3cplus.com/css/css-at-property.html

CSS Grid Masonry – //www.w3cplus.com/css/grid-layout-part-17.html