Get "PHP 8 in a Nuthshell" (Soon includes PHP 8.4)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Upcoming CSS features to make your life easier

CSS is a constantly evolving language. It’s getting better and better with each iteration. That’s why it’s important to keep up with the latest CSS features so you can use them in your projects and be less reliant on third-party libraries.

In this article, I’m going to run down on some of the exciting CSS features that are going to make your life easier. And though these features are not yet available in all browsers, you can still use them today for future-proofing your projects. And in the browsers where these features are not supported, most of these will simply be ignored.

The text-wrap property

The text-wrap property is used to specify whether the text in an element should wrap or not. It’s part of the CSS Text Module Level 4 specification.

This property can accept multiple values but the most interesting ones are balance and pretty.

The text-wrap property is set to balance, the browser will try to wrap the text in a way that the last line of an element is as long as the first line. This can be useful in cases where you want to have a consistent look for the text in an element. For instance, in the title of a blog post.

On the other hand, if the text-wrap property is set to pretty, the browser will try to intelligently break the text in block elements in such a way that there wouldn’t be a single/orphan word on the last line.

Read more: Text Wrap Balance, Text Wrap Pretty

Scoped CSS

You can now scope CSS within a particular element using the @scope rule. Essentially, it allows you to create a CSS rule that will only apply to a specific element and its children.

For instance, if you want to scope/restrict the CSS within a particular element, you can do it using class or ID selectors like so.

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

Here’s an example of how you can use it.

.all-green p {
  color: darkgreen;
}

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

This will make sure that the p elements within the .all-pink element will have a pink color and the p elements outside of it will have a green color.

Scoping CSS helps you to avoid the use of overly specific selectors and also helps you to avoid the use of !important in your CSS.

Read more: Scoped CSS.

Auto-increasing textareas

A new CSS rule called form-sizing is coming to the CSS spec which will allow you to control the resize behavior of elements like <textarea>.

By setting the form-sizing property to normal, the browser will automatically increase the height of the <textarea> element as the user types in it.

textarea {
    form-sizing: normal;
}

Read more: Auto-increasing textareas

View Transitions

A new meta tag called view-transition is coming to the CSS spec which will allow you to control the transition of the viewport when the user scrolls the page.

For instance, if you want to add a fade-in effect to the viewport when the user navigates to a new page, you can do it like so.

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

Here, the same-origin value will make sure that the transition will only happen when the user navigates to a page within the same origin.

This makes the transition between pages more seamless and less jarring. More like a native app.

Read more: Getting started with View Transitions on multi-page apps

The light-dark() function

The light-dark() is a new CSS function that will allow you to specify different values for light and dark modes.

You can specify two color values as arguments to this function. The first value will be used for light mode and the second value will be used for dark mode.

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

This will make sure that the background color of the body element will be white in light mode and black in dark mode.

Apart from the user’s theme preference, the light-dark() function can also be used to switch between two values based on the color-scheme property.

:root {
  color-scheme: light dark;
}

:root {
  --text-color: light-dark(#333, #ccc); 
  /* In Light Mode = return 1st value. 
  In Dark Mode = return 2nd value. */
}

Read more: The light-dark() function

Nesting in CSS

Recently, a module called the CSS Nesting Module was shipped in Safari Technology Preview 162 and Chrome Dev (by enabling the “Experimental Web Platform features” flag in the browser).

Once enabled, you can write the above Sass-like code in the native CSS like so.

.parent {
    .child {
        color: red;
    }

    #childWithId {
        color: red;
    }
}

Of course, this comes with some limitations that you need to keep in mind.

Read more: Sass-like nesting in native CSS

Like this article?

Buy me a coffee

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Comments?