Upcoming CSS features to make your life easier

Created on November 12, 2023 at 11:27 am

CSS ORG 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 ORDINAL -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 DATE 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 CARDINAL 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 ORDINAL 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 ORG rule called form-sizing is coming to the CSS ORG 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 ORG 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 CARDINAL color values as arguments to this function. The first ORDINAL value will be used for light mode and the second ORDINAL 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 CARDINAL values based on the color-scheme property.

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

Read more: The light-dark() function

Nesting in CSS

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

Once enabled, you can write the above Sass PERSON -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 PERSON -like nesting in native CSS

Connecting to blog.lzomedia.com... Connected... Page load complete