New in Chrome 118

Adriana Jara

Here's what you need to know:

Declare specific styles within a component with the @scope css rule.
There's a new media feature: prefers-reduced-transparency.
DevTools has improvements in the Sources panel.
And there's plenty more.

I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 118.

CSS `@scope` rule.

The @scope at-rule allows developers to scope style rules to a given scoping root, and style elements according to the proximity of that scoping root.

With @scope you can override styles based on proximity, which is different from the usual CSS styles that are applied relying only on source order and specificity. In the following example, there are two themes.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

without scope, the style applied is the last one declared.

Without @scope

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

Two links, the first one reads ' I'm lightpink!' the second one reads 'Different pink', both links are actually light pink, under the links text reads sources order declaration style.

With scope you can have nested elements and the style that applies is the one for the nearest ancestor.

With @scope

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

Two links, the first one reads ''I''m lightpink!'' the second one reads 'Different pink', second link is a darker pink, under the links text nearest ancestor style and has a green checkmark next to it.

Scope also saves you from writing long, convoluted class names, and makes it easy to manage larger projects and avoid naming conflicts.

Without @scope

<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}

With @scope

<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

With scope you can also style a component without styling certain things that are nested within. In a way you can have “holes” where the scoped style doesn't apply.

Like in the following example, we could apply style to the text and exclude controls or vice versa.

representation of the html above, with the words in scope next to the first and third div and the word excluded next to the second and fourth div.

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

Checkout the article Limit the reach of your selectors with the CSS @scope at-rule for more information.

`prefers-reduced-transparency` media feature

We use media queries to provide user experiences that adapt to the user's preferences and device conditions. This Chrome version adds a new value that can be used to adapt user experience: prefers-reduced-transparency.

A new value you can test with media queries is prefers-reduced-transparency which lets developers adapt web content to user-selected preference for reduced transparency in the OS, such as the Reduce transparency setting on macOS. Valid options are reduce or no-preference.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

And, you can check how it looks with DevTools:

For more information checkout the prefers-reduced-transparency documentation.

Correction: A previous version of this article referred to a new scripting media feature being in this release. It will actually be in version 120.

Sources panel improvements in DevTools

DevTools has the following improvements in the Sources panel: the workspace feature improved consistency, most notably, by renaming the Sources > Filesystem pane to Workspace along with other UI text, the Sources > Workspace also lets you sync changes you make in DevTools directly to your source files.

Also, you can now reorder panes on the left side of the Sources panel by dragging and dropping, and the Sources panel can now pretty-print inline JavaScript within the following script types: module, importmap, speculationrules and highlight the syntax of importmap and speculationrules script types, both of which hold JSON.

Before and after pretty-printing and syntax highlighting of speculation rules script type.

Checkout What's New in DevTools for more on Chrome 118 DevTools updates.

And more!

Of course there's plenty more.

WebUSB API is now exposed to Service Workers registered by browser extensions allowing developers to use the API when responding to extension events.
To help developers reduce friction in Payment Request flows, we are removing the user activation requirement in Payment Request and Secure Payment Confirmation.
Chrome's release cycle is becoming shorter, stable versions will be released every three weeks, starting with Chrome 119 that will be here in three weeks.

New in Chrome 118

CSS @scope rule.

prefers-reduced-transparency media feature

Sources panel improvements in DevTools

And more!

Further reading

Subscribe

CSS `@scope` rule.

`prefers-reduced-transparency` media feature