New in Chrome 118

Here’s what you need to know:

Declare specific styles within a component with the @scope css rule.
There are two new media features: scripting and 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 @scope documentation for more information.

`scripting` and `prefers-reduced-transparency` media features

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

We may take for granted the presence of scripting when our users access the web, however scripting is not always enabled, now using the scripting media feature you can detect if scripting is available and apply particular styles for each case, the available values are: enabled, initial-only or none

@media (scripting: none) {
.script-none {
color: red;
}
}

Another 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 scripting and prefers-reduced-transparency documentation.

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.