Frontend · CSS

Six CSS Properties That Replace Half Your Layout Hacks

By 大前端历险记 · Jul 1, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

These properties replace brittle, multi-line workarounds with single-declaration fixes that ship in every modern browser. Adopting them cuts JavaScript dependency for layout logic, reduces CSS specificity battles, and eliminates entire categories of cross-browser scroll and stacking bugs that have plagued production UI for a decade.

Summary

Image distortion, scroll chaining, orphaned text, and z-index wars have long forced developers into fragile workarounds. Six CSS properties now provide native, one-line fixes for each. `object-fit: cover` replaces background-image hacks for `<img>` tags, while `overscroll-behavior: contain` stops background pages from scrolling when a modal reaches its boundary. `text-wrap: balance` automatically evens out multi-line headings without manual `<br>` tags, and `isolation: isolate` creates deliberate stacking contexts so internal z-index values never leak out.

Two newer additions push more logic from JavaScript back into CSS. The `:has()` pseudo-class acts as a parent selector, letting styles react to a child's state—highlighting a fieldset around an invalid input, or adjusting a card's padding when it contains an image. `@container` queries enable component-level responsiveness based on a container's own width, not the viewport, so a card renders correctly whether it sits in a 400px main column or a 200px sidebar.

All six properties ship in every modern browser. Together they eliminate a substantial class of layout bugs and JS-dependent style logic that developers have tolerated for years.

Takeaways

— `object-fit: cover` on an `<img>` tag scales and crops the image to fill its container without distortion, matching the behavior of `background-size: cover` while preserving semantic HTML and right-click save.

— `overscroll-behavior: contain` on a scrollable modal or drawer prevents the background page from scrolling once the inner content reaches its boundary, and blocks pull-to-refresh on mobile when applied to `<body>`.

— `text-wrap: balance` makes multi-line headings visually even by distributing words across lines, capped at six lines for performance; `text-wrap: pretty` prevents single-word orphans at the end of paragraphs.

— `isolation: isolate` creates an explicit stacking context so a component's internal z-index values never compete with outside elements, ending the practice of blindly incrementing z-index to 9999.

— The `:has()` pseudo-class enables parent, ancestor, and sibling selection based on a child's state, allowing pure-CSS interactions like showing a clear button when an input has content or adjusting a grid when it contains more than four items.

— `@container` queries apply styles based on a container's own width rather than the viewport, so a component adapts its layout whether placed in a wide main column or a narrow sidebar.

— All six properties are supported across Chrome, Edge, Safari, and Firefox, making them safe for production use without polyfills.

Conclusions

Many CSS hacks that developers treat as unavoidable—background-image for img cropping, overflow-hidden on body for scroll lock—persist only because these native properties arrived late and received little fanfare.

`isolation: isolate` is a readability win as much as a technical one; it signals intent explicitly where `z-index: 0` reads as a mysterious hack.

The 6-line cap on `text-wrap: balance` is a deliberate trade-off: browsers limit the algorithm's cost so it stays fast enough for above-the-fold headings without hurting page performance.

`:has()` and `@container` together shift the boundary between CSS and JavaScript. Logic that previously required DOM observation or resize listeners—parent state reactions, container-relative layouts—now lives entirely in the stylesheet.

Scroll chaining on iOS Safari resisted fixes for years because `overflow: hidden` on `<body>` was unreliable; `overscroll-behavior` solves it at the scroll boundary level, which is the correct layer of abstraction.

Concepts & terms

Stacking context

A three-dimensional conceptual space in which elements are layered along the z-axis. When an element creates a new stacking context (via properties like `isolation: isolate`, `z-index` with a positioned element, or `opacity` less than 1), its child elements' z-index values are resolved internally and cannot escape to compete with elements outside the context.

Scroll chaining

The default browser behavior where scrolling momentum that reaches the boundary of one scrollable area is passed to an ancestor scrollable area, causing the background page to scroll when a modal's content hits the bottom.

Container query

A CSS feature (`@container`) that applies styles based on the dimensions of a parent container rather than the viewport. Requires declaring a containment context with `container-type` on the parent, enabling truly reusable, self-adapting components.

Orphan / Widow

In typography, an orphan is a single word or short line appearing alone at the top of a column or page; a widow is a single word left on the last line of a paragraph. `text-wrap: balance` and `text-wrap: pretty` address these visually awkward breaks automatically.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗