Upcoming CSS Features: text-wrap, @scope, form-sizing, view-transition, light-dark(), and Nesting

CSS is continuously evolving, and keeping up with new specifications helps developers reduce reliance on third‑party libraries. The following features are currently in draft or experimental stages and may not be supported in all browsers yet, but can be tried early for future‑proof projects.

text-wrap property

The text-wrap property, part of CSS Text Module Level 4, controls how text wraps inside an element. Its most interesting values are balance and pretty . When set to balance , the browser attempts to make the last line as long as the first line, which is useful for headings. When set to pretty , the browser tries to avoid orphaned single‑character lines by breaking text into more visually pleasing blocks.

@scope rule

The @scope at‑rule lets you define a CSS scope that applies only to a specific element and its descendants, reducing the need for overly specific selectors and the !important flag. Example:

@scope (.class-component, #id-component) {
  /* CSS rules */
}

Usage example:

.all-green p {
  color: darkgreen;
}

@scope(.all-pink) {
  p {
    color: #c94f65;
  }
}

In this example, p elements inside .all-pink become pink, while p elements outside remain green.

form-sizing property

The upcoming form-sizing property will allow developers to control the automatic resizing behavior of form controls such as <textarea> . Setting it to normal makes the textarea grow in height as the user types:

textarea {
  form-sizing: normal;
}

view-transition meta tag

The view-transition meta tag is a proposed way to define viewport transitions when navigating between pages. For example, adding a fade‑in effect for same‑origin navigations:

<meta name="view-transition" content="same-origin">

The same-origin value ensures the transition only occurs when moving to pages within the same origin, creating smoother, app‑like navigation.

light-dark() function

The new light-dark() function lets you specify different values for light and dark color schemes. Example:

body {
  background-color: light-dark(white, black);
}

This makes the background white in light mode and black in dark mode. The function can also be used with custom CSS variables to switch between any two colors based on the user's theme preference.

CSS nesting

Native CSS nesting, currently available in Safari Technology Preview 162 and Chrome’s experimental web platform features flag, allows writing nested rules similar to Sass:

.parent {
  .child {
    color: red;
  }

  #childWithId {
    color: red;
  }
}

Enabling this feature lets developers organize styles hierarchically without a pre‑processor.