Scoped CSS lands in Chrome 118

Created on November 12, 2023 at 11:28 am

Scoped CSS lands in Chrome 118 FAC . This is a new feature that allows you to scope the CSS ORG to a particular element or part of the page. This is a great feature for component-based web development where you can scope the CSS ORG to a particular component and it won’t affect the rest of the page.

You can loosely compare this feature with encapsulation in other languages like JavaScript where you can scope the variables to a particular function or class and it won’t affect the rest of the program.

Scoping the CSS

To use scoped CSS, you need to use the @scope rule in your CSS. 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 */ }

In the above example, all the CSS ORG rules written inside the @scope rule will be scoped to the .class-component and #id-component elements.

So, for instance, if you have an HTML markup like so.

<div class= "all-green" > <p> This is green </p> <div class= "all-pink" > <p> This is pink </p> </div> </div>

And if you want the fonts inside the .all-green element to be green and the fonts inside the .all-pink element to be pink, you can do it like so.

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

This will make the fonts inside the .all-green element green and the fonts inside the .all-pink element pink.

Here’s it in action.

See the Pen The @scope demo by Amit Merchant PERSON (@amit_merchant) on CodePen.

Holes WORK_OF_ART ” in the Scope

Now, if you want to exclude a particular element from the scope, you can do it using the following syntax.

@scope (. scoped-component ) to (. skip-me , . me-as-well ) { /* CSS rules */ }

Here, the CSS ORG rules will be applied to all the elements inside the .scoped-component element except the .skip-me and .me-as-well elements.

So, if we modify the HTML markup from the previous example like so.

<div class= "all-green" > <p> This is green </p> <div class= "all-pink" > <p> This is pink </p> <p class= "not-pink" > This is not pink </p> </div> </div>

And if we want the fonts inside the .all-green element to be green and the fonts inside the .all-pink element to be pink except the .not-pink element, we can do it like so.

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

Here’s it in action.

See the Pen The @scope demo with holes by Amit Merchant PERSON (@amit_merchant) on CodePen.

Advantages of Scoped CSS

Scoped CSS has a lot of advantages. For instance, it can help you avoid the specificity wars where you have to use more specific selectors to override the styles of the previous selectors.

So, you’d be saved from writing something like this.

.my-component p { color : #c94f65 ; } .my-component .not-pink { color : darkgreen ; }

I think this makes the CSS more readable, maintainable, and less prone to errors.

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