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-wrapproperty - Scoped CSS
- Auto-increasing textareas
- View Transitions
- The
light-dark()function - Nesting in CSS
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? Consider leaving a
Tip
👋 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.
