 Declare specific styles within a component with the scope CSS rule. Use two new media features. Scripting and prefers reduced transparency. DevTools has improvements for 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. The scope add rule allows you to scope style rules to a given scoping root and style elements according to the proximity of that scoping root. That was a lot of me saying scope, but what does it mean? Usually CSS styles are applied relying only on source order and specificity. With scope, you can override styles based on proximity. In the example on the screen, we have two themes. Without scope, the style applied is the last one declared. With scope, you can have nested elements and the style that applies is the one for the nearest ancestor. Scope also saves you from writing long convoluted class names, making it easy to manage larger projects and avoid naming conflicts. With scope, you can also style a component without styling certain things nested within. In a way, you can have holes where the scope style doesn't apply. Like the example on the screen, you could apply style to the text and exclude controls or vice versa. You can find the scope documentation in the post linked in the description. 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 the user experience. Scripting and prefers reduced transparency. We may take for granted the presence of a scripting when our users access the web. However, scripting is not always enabled. Now, using the scripting media feature, you can detect if a scripting is available and apply particular styles for each case. The available values are enabled, initial only, or none. Another value you can test with media queries is prefers reduced transparency. Which lets you adapt web content to user-selected preference for reduced transparency in the operating system, such as the reduced transparency setting on macOS. Valid options are reduced or no preference. And you can check how it looks with DevTools. Check out the article in the description for the scripting and prefers reduced transparency media features documentation. DevTools has the following improvements in the sources panel. Number one, the workspace feature improved consistency, most notably by renaming the source's file system pane to workspace, along with other UI text. Number two, workspace also lets you see changes you make in DevTools directly to your source files. Number three, you can now reorder panes on the left side of the sources panel by dragging and dropping. Number four, the sources panel can now pretty print inline JavaScript within the following script types. Module, import map, speculation rules, and it highlights the syntax of import map and speculation rules, script types. For more updates to DevTools, check the post linked in the description. And of course, there's plenty more. Web USB API is now exposed to service workers registered by browser extensions. To help you reduce friction in payment request flows, user activation requirement in payment requests and secure payment confirmation was removed. Chrome's release cycle is becoming shorter. Stable versions will be released every three weeks, starting with Chrome 119. All the details, including links, docs, and specs are in the post linked in the description. Hit the subscribe button now so that you don't miss the latest Chrome DevTools video, GUI challenges, and more. Yo soy Adriana Jara, and as soon as Chrome 119 is released, I'll be right here to tell you what's new in Chrome.