Chrome for Developers - New in ChromeBuild the next generation of web experiences.2023-10-31T00:00:00Zhttps://developer.chrome.com/tags/new-in-chromeChrome for DevelopersNew in Chrome 1192023-10-31T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-119/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="WK5fHV3Bm6M"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li>There’s an <a href="https://developer.chrome.com/en/blog/new-in-chrome-119/#cookies-expiration">update to the expiration date</a> upper limit for cookies already in storage.</li>
<li><a href="https://developer.chrome.com/en/blog/new-in-chrome-119/#css-updates">CSS has new pseudo-classes</a>, relative color syntax and more.</li>
<li><a href="https://developer.chrome.com/en/blog/new-in-chrome-119/#fenced-frames-improvements">Fenced Frames added improvements</a> like ad size macros and others.</li>
<li>And there’s plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-119/#more">more</a>.</li>
</ul>
<p>I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 119.</p>
<h2 id="cookies-expiration" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-119/#cookies-expiration" aria-hidden="true">#</a> Cookies expiration date.</h2>
<p>Since Chrome 104 newly created cookies or those updated with an expiration date have had that date capped at no more than 400 days in the future. This same limit will now be retroactively applied to cookies already in storage.</p>
<p>The expiration dates of these cookies will be capped at no more than 400 days after the first time Chrome 119+ starts up and does a one time database migration. The impact of this change will not be felt by users until at least 400 days after Chrome 119 is released, and then only for existing cookies that have not been updated in that period.</p>
<p>You can read more about <a href="https://httpwg.org/http-extensions/draft-ietf-httpbis-rfc6265bis.html#name-the-expires-attribute">the expiration date recommendation</a> and here is a friendly reminder that third party cookies will be deprecated <a href="https://privacysandbox.com/news/the-next-stages-of-privacy-sandbox-general-availability">in the near future</a> and <a href="https://developer.chrome.com/docs/privacy-sandbox/third-party-cookie-phase-out">a guide to prepare for the deprecation</a>.</p>
<h2 id="css-updates" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-119/#css-updates" aria-hidden="true">#</a> CSS updates</h2>
<p>For CSS we have three updates:</p>
<p>Number one: the new <a href="https://developer.mozilla.org/docs/Web/CSS/:user-invalid"><code>:user-invalid</code></a> and <a href="https://developer.mozilla.org/docs/Web/CSS/:user-valid"><code>:user-valid</code></a> pseudo-classes that represent an element with incorrect or correct input, respectively, but only after the user has significantly interacted with it. They are similar to the <code>:valid</code> and <code>:invalid</code>, pseudo-classes but with the added constraint that the new pseudo-classes only match after the user has interacted with the element.</p>
<p>Number two: the <a href="https://developer.chrome.com/blog/css-relative-color-syntax/">relative color syntax</a> allows developers to define colors by modifying the parameters of other colors.</p>
<p>For example: <code>oklab(from magenta calc(l * 0.8) a b);</code> results in an Oklab magenta that is 80% lighter.</p>
<p>And number three: <code>clip-path</code> now supports more values.</p>
<p>The <a href="https://developer.mozilla.org/docs/Web/CSS/clip-path"><code>clip-path</code></a> property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.</p>
<p>Now you can use <a href="https://developer.mozilla.org/docs/Web/CSS/clip-path#geometry-box"><code><geometry-box></code></a> values to control the clip's reference box, making <code>clip-path</code> easier to use. These box values can be used alongside basic shapes (for example, <code>clip-path: circle(50%) margin-box</code>), or they can be used alone to clip to the specified box (for example,<code> clip-path: content-box</code>).</p>
<p>You can also use the functions <a href="https://developer.mozilla.org/docs/Web/CSS/basic-shape/xywh"><code>xywh()</code></a> and <a href="https://developer.mozilla.org/docs/Web/CSS/basic-shape/rect"><code>rect()</code></a> that make it easier to specify rectangular or rounded-rectangular clips.</p>
<p><em>Correction: A previous version of this article referred to inprovements for Fenced Frames. These changes are now shipping in Chrome 120.</em></p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-119/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there’s plenty more.</p>
<ul>
<li>
<p><a href="https://developer.chrome.com/blog/deprecating-web-sql/"><code>WebSQL</code> is fully removed</a> as of Chrome 119. A reverse origin trial allows developers to continue to use WebSQL until Chrome 123.</p>
</li>
<li>
<p>Now the <a href="https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#monitorTypeSurfaces"><code>monitorTypeSurfaces</code></a> option can be used to prevent the user from sharing an entire screen, with <a href="https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia"><code>getDisplayMedia()</code></a></p>
</li>
<li>
<p>There’s <a href="https://developer.chrome.com/origintrials/#/view_trial/106960491150049281">an origin trial</a> that adds a <code>fullscreen</code> windowFeatures parameter to the <code>window.open()</code> JavaScript API to allow the caller to open a popup directly to full-screen.</p>
</li>
</ul>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-119/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 119.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-119/">What's new in Chrome DevTools (119)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-119/">Chrome 119 deprecations and removals</a></li>
<li><a href="https://chromestatus.com/features#milestone%3D119">ChromeStatus.com updates for Chrome 119</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/118.0.5993.116..119.0.6045.63">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-119/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>Yo soy Adriana Jara, and as soon as Chrome 120 is released, I'll be right here to
tell you what's new in Chrome!</p>
New in Chrome 1182023-10-10T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-118/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="zx8OZtKe6hA"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li>
<p>Declare specific styles within a component with the <a href="https://developer.chrome.com/en/blog/new-in-chrome-118/#css-scope"><code>@scope</code> css rule</a>.</p>
</li>
<li>
<p>There's a new media feature: <a href="https://developer.chrome.com/en/blog/new-in-chrome-118/#new-media-queries"><code>prefers-reduced-transparency</code></a>.</p>
</li>
<li>
<p>DevTools has improvements in the <a href="https://developer.chrome.com/en/blog/new-in-chrome-118/#sources-panel-devtools"><strong>Sources</strong> panel</a>.</p>
</li>
<li>
<p>And there's plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-118/#more">more</a>.</p>
</li>
</ul>
<p>I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 118.</p>
<h2 id="css-scope" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-118/#css-scope" aria-hidden="true">#</a> CSS <code>@scope</code> rule.</h2>
<p>The <code>@scope</code> at-rule allows developers to scope style rules to a given scoping root, and style elements according to the proximity of that scoping root.</p>
<p>With <code>@scope</code> 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.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lightpink-theme<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm lightpink!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pink-theme<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Different pink!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>without scope, the style applied is the last one declared.</p>
<div class="compare pad-left-300" data-type="worse">
<p class="compare__label pad-bottom-200">
Without @scope
</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.pink-theme a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> hotpink<span class="token punctuation">;</span> <span class="token punctuation">}</span><br /><span class="token selector">.lightpink-theme a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> lightpink<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
</div>
<img alt="Two links, the first one reads &#39; I'm lightpink!' the second one reads 'Different pink', both links are actually light pink, under the links text reads sources order declaration style." decoding="async" height="700" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format" srcset="https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=200 200w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=228 228w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=260 260w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=296 296w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=338 338w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=385 385w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=439 439w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=500 500w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=571 571w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=650 650w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=741 741w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=845 845w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=964 964w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=1098 1098w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=1252 1252w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=1428 1428w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/N1ZbDIild8BHXJ3GjIey.jpg?auto=format&w=1600 1600w" width="800" />
<p>With scope you can have nested elements and the style that applies is the one for the nearest ancestor.</p>
<div class="compare pad-left-300" data-type="better">
<p class="compare__label pad-bottom-200">
With @scope
</p>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@scope</span> <span class="token punctuation">(</span>.pink-theme<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br /> <span class="token selector">a</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> hotpink<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token atrule"><span class="token rule">@scope</span> <span class="token punctuation">(</span>.lightpink-theme<span class="token punctuation">)</span></span><span class="token punctuation">{</span><br /> <span class="token selector">a</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> lightpink<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
</div>
<img alt="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." decoding="async" height="694" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format" srcset="https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=200 200w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=228 228w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=260 260w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=296 296w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=338 338w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=385 385w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=439 439w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=500 500w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=571 571w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=650 650w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=741 741w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=845 845w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=964 964w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=1098 1098w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=1252 1252w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=1428 1428w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/9svylwmK9QHQJUgAMNkj.jpg?auto=format&w=1600 1600w" width="800" />
<p>Scope also saves you from writing long, convoluted class names, and makes it easy to manage larger projects and avoid naming conflicts.</p>
<div class="compare pad-left-300" data-type="worse">
<p class="compare__label pad-bottom-200">
Without @scope
</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>first-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>first-container__main-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> I'm the main title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>second-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>second-container__main-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> I'm the main title, but somewhere else<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-css"><code class="language-css"><span class="token selector">.first-container__main-title</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> grey<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.second-container__main-title</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> mediumturquoise<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
</div>
<div class="compare pad-left-300" data-type="better">
<p class="compare__label pad-bottom-200">
With @scope
</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>first-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> I'm the main title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>second-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> I'm the main title, but somewhere else<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@scope</span><span class="token punctuation">(</span>.first-container<span class="token punctuation">)</span></span><span class="token punctuation">{</span><br /> <span class="token selector">.main-title</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> grey<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><span class="token atrule"><span class="token rule">@scope</span><span class="token punctuation">(</span>.second-container<span class="token punctuation">)</span></span><span class="token punctuation">{</span><br /> <span class="token selector">.main-title</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> mediumturquoise<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
</div>
<p>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.</p>
<p>Like in the following example, we could apply style to the text and exclude controls or vice versa.</p>
<img alt="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." decoding="async" height="648" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format" srcset="https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=200 200w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=228 228w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=260 260w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=296 296w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=338 338w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=385 385w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=439 439w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=500 500w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=571 571w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=650 650w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=741 741w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=845 845w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=964 964w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=1098 1098w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=1252 1252w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=1428 1428w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/2OcZt7BEhhMH2dW9earg.jpg?auto=format&w=1600 1600w" width="800" />
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>component<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Drink water<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>hydration is important<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click-here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>not in scope<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>click here<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Exercise<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>move it move it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>link-here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Excluded from scope<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> link here <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@scope</span> <span class="token punctuation">(</span>.component<span class="token punctuation">)</span> to <span class="token punctuation">(</span>.click-here<span class="token punctuation">,</span> .link-here<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br /> <span class="token selector">div</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span><br /> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>Checkout the article <a href="https://developer.chrome.com/articles/at-scope/">Limit the reach of your selectors with the CSS @scope at-rule</a> for more information.</p>
<h2 id="new-media-queries" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-118/#new-media-queries" aria-hidden="true">#</a> <code>prefers-reduced-transparency</code> media feature</h2>
<p>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: <code>prefers-reduced-transparency</code>.</p>
<p>A new value you can test with media queries is <code>prefers-reduced-transparency</code> 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 <code>reduce</code> or <code>no-preference</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.translucent</span> <span class="token punctuation">{</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 0.4<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>prefers-reduced-transparency<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br /> <span class="token selector">.translucent</span> <span class="token punctuation">{</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>And, you can check how it looks with DevTools:</p>
<p><video autoplay="" class="screenshot" controls="" height="533" loop="" muted="" width="800" style="--vid-width: 800; --vid-height: 533"> <source src="https://storage.googleapis.com/web-dev-uploads/video/NJdAV9UgKuN8AhoaPBquL7giZQo1/Xh60t9y0KnAIdwoUnbX5.mp4" type="video/mp4" /> </video></p>
<p>For more information checkout the <a href="https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-transparency">prefers-reduced-transparency</a> documentation.</p>
<p><em>Correction: A previous version of this article referred to a new <a href="https://developer.mozilla.org/docs/Web/CSS/@media/scripting"><code>scripting</code></a> media feature being in this release. It will actually be in version 120.</em></p>
<h2 id="sources-panel-devtools" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-118/#sources-panel-devtools" aria-hidden="true">#</a> Sources panel improvements in DevTools</h2>
<p>DevTools has the following improvements in the <strong>Sources</strong> panel: the <a href="https://developer.chrome.com/docs/devtools/workspaces/">workspace</a> feature improved consistency, most notably, by renaming the <strong>Sources</strong> > <strong>Filesystem</strong> pane to <strong>Workspace</strong> along with other UI text, the <a href="https://developer.chrome.com/docs/devtools/workspaces/"><strong>Sources</strong> > <strong>Workspace</strong></a> also lets you sync changes you make in DevTools directly to your source files.</p>
<p><video autoplay="" class="screenshot" controls="" height="436" loop="" muted="" width="800" style="--vid-width: 800; --vid-height: 436"> <source src="https://storage.googleapis.com/web-dev-uploads/video/NJdAV9UgKuN8AhoaPBquL7giZQo1/1T78X6ldgLhiH6iJgAMk.mp4" type="video/mp4" /> </video></p>
<p>Also, you can now reorder panes on the left side of the <strong>Sources</strong> panel by dragging and dropping, and the <strong>Sources</strong> panel can now pretty-print inline JavaScript within the following script types: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules"><code>module</code></a>, <a href="https://developer.mozilla.org/docs/Web/HTML/Element/script/type/importmap"><code>importmap</code></a>, <a href="https://developer.chrome.com/blog/debugging-speculation-rules/"><code>speculationrules</code></a> and highlight the syntax of <code>importmap</code> and <code>speculationrules</code> script types, both of which hold JSON.</p>
<img alt="Before and after pretty-printing and syntax highlighting of speculation rules script type." decoding="async" height="395" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/yZYe1CF5ObuLu7zVjcot.png?auto=format&w=1600 1600w" width="800" />
<p>Checkout <a href="https://developer.chrome.com/blog/new-in-devtools-118/">What's New in DevTools</a> for more on Chrome 118 DevTools updates.</p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-118/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there's plenty more.</p>
<ul>
<li>
<p><a href="https://developer.chrome.com/articles/usb/">WebUSB API</a> is now exposed to <a href="https://developer.chrome.com/en/blog/new-in-chrome-118/docs/extensions/mv3/service_workers/">Service Workers registered by browser extensions</a> allowing developers to use the API when responding to extension events.</p>
</li>
<li>
<p>To help developers reduce friction in Payment Request flows, we are removing the user activation requirement in <code>Payment Request</code> and <code>Secure Payment Confirmation</code>.</p>
</li>
<li>
<p><a href="https://developer.chrome.com/blog/faster-chrome-releases-round2/">Chrome's release cycle is becoming shorter</a>, stable versions will be released every three weeks, starting with Chrome 119 that will be here in three weeks.</p>
</li>
</ul>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-118/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 118.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-118/">What's new in Chrome DevTools (118)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-118/">Chrome 118 deprecations and removals</a></li>
<li><a href="https://chromestatus.com/features#milestone%3D118">ChromeStatus.com updates for Chrome 118</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/116.0.5845.171..118.0.5938.57">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-118/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>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!</p>
New in Chrome 1172023-09-12T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-117/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="coidqLlYgoo"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li><a href="https://developer.chrome.com/en/blog/new-in-chrome-117/#exit-entry-animations">Three new CSS features</a> make it easy to add smooth entry and exit animations.</li>
<li>Compute higher order datasets with <a href="https://developer.chrome.com/en/blog/new-in-chrome-117/#array-grouping">array grouping</a>.</li>
<li>DevTools makes <a href="https://developer.chrome.com/en/blog/new-in-chrome-117/#local-overrides">local overrides easier</a>.</li>
<li>And there’s plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-117/#more">more</a>.</li>
</ul>
<p>I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 117.</p>
<h2 id="exit-entry-animations" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-117/#exit-entry-animations" aria-hidden="true">#</a> New CSS features for entry and exit animations.</h2>
<p>These three new CSS features complete the set to easily add entry and exit animations,
and smoothly animate to and from the top layer dismissible elements such as dialogs and popovers.</p>
<p>The first feature is <code>transition-behavior</code>. To transition discrete properties, like <code>display</code>, use the <code>allow-discrete</code> value for <code>transition-behavior</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span><br /> <span class="token property">transition</span><span class="token punctuation">:</span> opacity 0.25s<span class="token punctuation">,</span> display 0.25s<span class="token punctuation">;</span><br /> <span class="token property">transition-behavior</span><span class="token punctuation">:</span> allow-discrete<span class="token punctuation">;</span> <span class="token comment">/* Note: be sure to write this after the shorthand */</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.card.fade-out</span> <span class="token punctuation">{</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Then the <code>@starting-style</code> rule is used to animate entry effects from <code>display: none</code> and into the top-layer. Use <code>@starting-style</code> to apply a style that the browser can look up before the element is open on the page.</p>
<pre class="language-css"><code class="language-css"><span class="token comment">/* 0. BEFORE-OPEN STATE */</span><br /><span class="token comment">/* Starting point for the transition */</span><br /><span class="token atrule"><span class="token rule">@starting-style</span></span> <span class="token punctuation">{</span><br /> <span class="token selector">.item</span> <span class="token punctuation">{</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token comment">/* 1. IS-OPEN STATE */</span><br /><span class="token comment">/* The state at which the element is open + transition logic */</span><br /><span class="token selector">.item</span> <span class="token punctuation">{</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br /> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><br /> <span class="token property">transition</span><span class="token punctuation">:</span> opacity 0.5s<span class="token punctuation">,</span> transform 0.5s<span class="token punctuation">,</span> height 0.5s<span class="token punctuation">,</span> display 0.5s allow-discrete<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token comment">/* 2. EXITING STATE */</span><br /><span class="token comment">/* While it is deleting, before DOM removal in JS, apply this<br /> transformation for height, opacity, and a transform which<br /> skews the element and moves it to the left before setting<br /> it to display: none */</span><br /><span class="token selector">.is-deleting</span> <span class="token punctuation">{</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>50deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-25vw<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Finally, to fade out a <code>popover</code> or <code>dialog</code> from the top layer, add the <code>overlay</code> property to your list of transitions. Include overlay in the transition or animation to animate overlay along with the rest of the features and ensure it stays in the top layer when animating. This will look much smoother.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">[open]</span> <span class="token punctuation">{</span><br /> <span class="token property">transition</span><span class="token punctuation">:</span> opacity 1s<span class="token punctuation">,</span> display 1s allow-discrete<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<figure>
<video autoplay="" controls="" loop="" muted=""> <source src="https://storage.googleapis.com/web-dev-uploads/video/HodOHWjMnbNw56hvNASHWSgZyAf2/kPZ5Ds1LJQ72ZAiMcaJX.mp4" type="video/mp4" /> </video>
</figure>
<pre class="language-css"><code class="language-css"><span class="token selector">[open]</span> <span class="token punctuation">{</span><br /> <span class="token property">transition</span><span class="token punctuation">:</span> opacity 1s<span class="token punctuation">,</span> display 1s allow-discrete<span class="token punctuation">,</span> overlay 1s allow-discrete<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<figure>
<video autoplay="" controls="" loop="" muted=""> <source src="https://storage.googleapis.com/web-dev-uploads/video/HodOHWjMnbNw56hvNASHWSgZyAf2/6kjtLdvlpz8ObkcbG2jV.mp4" type="video/mp4" /> </video>
</figure>
<p>Checkout <a href="https://developer.chrome.com/blog/entry-exit-animations/">Four new CSS features for smooth entry and exit animations</a> for details on how to use these features for improving your user experience with motion.</p>
<h2 id="array-grouping" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-117/#array-grouping" aria-hidden="true">#</a> Array grouping</h2>
<p>In programming, array grouping is an extremely common operation, seen most often when we use SQL's GROUP BY clause and MapReduce programming (which is better thought of as map-group-reduce).</p>
<p>The ability to combine data into groups allows developers to compute higher order datasets.
For example, the average age of a cohort, or daily LCP values for a webpage.</p>
<p>Array grouping enables these scenarios by adding the <code>Object.groupBy</code> and <code>Map.groupBy</code> static methods.</p>
<p><code>groupBy</code> calls a provided callback function once for each element in an iterable. The callback function should return a string or symbol that indicates the group of the associated element.</p>
<p>In the following example, from the <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy">MDN documentation</a>, there is an array of products with the <code>groupBy</code> method used to return them grouped by their type.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> inventory <span class="token operator">=</span> <span class="token punctuation">[</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"asparagus"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"vegetables"</span><span class="token punctuation">,</span> <span class="token literal-property property">quantity</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"bananas"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"fruit"</span><span class="token punctuation">,</span> <span class="token literal-property property">quantity</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"goat"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"meat"</span><span class="token punctuation">,</span> <span class="token literal-property property">quantity</span><span class="token operator">:</span> <span class="token number">23</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"cherries"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"fruit"</span><span class="token punctuation">,</span> <span class="token literal-property property">quantity</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"fish"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"meat"</span><span class="token punctuation">,</span> <span class="token literal-property property">quantity</span><span class="token operator">:</span> <span class="token number">22</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /><span class="token punctuation">]</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">const</span> result <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">groupBy</span><span class="token punctuation">(</span>inventory<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> type <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> type<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token comment">/* Result is:<br />{<br /> vegetables: [<br /> { name: 'asparagus', type: 'vegetables', quantity: 5 },<br /> ],<br /> fruit: [<br /> { name: "bananas", type: "fruit", quantity: 0 },<br /> { name: "cherries", type: "fruit", quantity: 5 }<br /> ],<br /> meat: [<br /> { name: "goat", type: "meat", quantity: 23 },<br /> { name: "fish", type: "meat", quantity: 22 }<br /> ]<br />}<br />*/</span><br /></code></pre>
<p>For more details check out the <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy"><code>groupBy</code> documentation</a>.</p>
<h2 id="local-overrides" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-117/#local-overrides" aria-hidden="true">#</a> Local overrides streamlined in DevTools.</h2>
<p>The <a href="https://developer.chrome.com/docs/devtools/overrides/">local overrides</a> feature is now streamlined, so you can easily mock response headers and web content of remote resources from the <strong>Network</strong> panel without access to them.</p>
<p>To override web content, open the <strong>Network</strong> panel, right-click a request, and select <strong>Override content</strong>.</p>
<img alt="The override options in the drop-down menu of a request." decoding="async" height="685" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format&w=1600 1600w" width="800" />
<p>If you have local overrides set up but disabled, DevTools enables them. If you haven't set them up yet, DevTools prompts you in the action bar at the top. Select a folder to store the overrides in and allow DevTools access to it.</p>
<img alt="Select a folder and allow access to it in the action bar at the top." decoding="async" height="507" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format&w=1600 1600w" width="800" />
<p>Once the overrides are set up, DevTools then takes you to <strong>Sources</strong> > <strong>Overrides</strong> > <strong>Editor</strong> to let you <a href="https://developer.chrome.com/docs/devtools/overrides/#make-changes">override web content</a>.</p>
<p>Note that the overridden resources are indicated with <img alt="Saved." decoding="async" height="20" loading="lazy" sizes="(min-width: 17px) 17px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/s81rU6SgdmbseeBDGbPl.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/s81rU6SgdmbseeBDGbPl.png?auto=format&w=17 17w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/s81rU6SgdmbseeBDGbPl.png?auto=format&w=19 19w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/s81rU6SgdmbseeBDGbPl.png?auto=format&w=22 22w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/s81rU6SgdmbseeBDGbPl.png?auto=format&w=25 25w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/s81rU6SgdmbseeBDGbPl.png?auto=format&w=29 29w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/s81rU6SgdmbseeBDGbPl.png?auto=format&w=33 33w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/s81rU6SgdmbseeBDGbPl.png?auto=format&w=34 34w" width="17" /> in the <strong>Network</strong> panel. Hover over the icon to see what's overridden.</p>
<img alt="An override icon next to a request in the Network panel." decoding="async" height="493" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format&w=1600 1600w" width="800" />
<p>Check out <a href="https://developer.chrome.com/blog/new-in-devtools-117/">what’s new in DevTools</a> for all the details and more information on DevTools in Chrome 117.</p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-117/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there’s plenty more.</p>
<ul>
<li>
<p>The much anticipated <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Subgrid"><code>subgrid</code></a> value for <code>grid-template-columns</code> and <code>grid-template-rows</code> is now implemented in Chrome.</p>
</li>
<li>
<p>There is a <a href="https://developer.chrome.com/blog/deprecating-web-sql/"><code>WebSQL</code> deprecation trial</a> and a developer trial for the <a href="https://developer.chrome.com/blog/deprecating-unload/"><code>unload</code> event deprecation</a>.</p>
</li>
<li>
<p>The <a href="https://developer.chrome.com/docs/web-platform/bfcache-notrestoredreasons/"><code>notRestoredReasons</code> API</a> for bfcache, mentioned in the <a href="https://youtu.be/JHwWUsMKYdk?si=sAzRp5hb5n9fQHxf&t=105">video for Chrome 116</a>, should be launching in this version.</p>
</li>
</ul>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-117/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 117.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-117/">What's new in Chrome DevTools (117)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-117/">Chrome 117 deprecations and removals</a></li>
<li><a href="https://chromestatus.com/features#milestone%3D117">ChromeStatus.com updates for Chrome 117</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/116.0.5845.171..117.0.5938.57">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-117/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>Yo soy Adriana Jara, and as soon as Chrome 117 is released, I'll be right here to tell you what's new in Chrome!</p>
New in Chrome 1162023-08-15T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-116/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="JHwWUsMKYdk"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li>Use the <a href="https://developer.chrome.com/en/blog/new-in-chrome-116/#document-picture-in-picture">Document Picture in Picture API</a> to increase user productivity.</li>
<li>It is now easier to <a href="https://developer.chrome.com/en/blog/new-in-chrome-116/#missing-stylesheets-debug">debug missing stylesheets</a> in DevTools</li>
<li>And there’s plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-116/#more">more</a>.</li>
</ul>
<p>I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 116.</p>
<h2 id="document-picture-in-picture" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-116/#document-picture-in-picture" aria-hidden="true">#</a> Document Picture-in-Picture API.</h2>
<p>The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content.</p>
<figure>
<img alt="A Picture-in-Picture window playing Sintel trailer video." decoding="async" height="499" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format" srcset="https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=200 200w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=228 228w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=260 260w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=296 296w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=338 338w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=385 385w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=439 439w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=500 500w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=571 571w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=650 650w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=741 741w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=845 845w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=964 964w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/Eaaypsy6NZ9UljxtJ2fV.png?auto=format&w=1600 1600w" width="800" />
<figcaption>A Picture-in-Picture window created with the Document Picture-in-Picture API (<a href="https://document-picture-in-picture-api.glitch.me/">demo</a>).</figcaption>
</figure>
<p>The Picture-in-Picture window in the Document Picture-in-Picture API is similar to a blank same-origin window opened using <code>window.open()</code>, with some differences:</p>
<ul>
<li>The Picture-in-Picture window floats on top of other windows.</li>
<li>The Picture-in-Picture window never outlives the opening window.</li>
<li>The Picture-in-Picture window cannot be navigated.</li>
<li>The Picture-in-Picture window position cannot be set by the website.</li>
</ul>
<p>The following HTML sets up a custom video player and a button element to open the video player in a Picture-in-Picture window.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>playerContainer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>player<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pipButton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Open Picture-in-Picture window<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
<p>The following JavaScript calls <code>documentPictureInPicture.requestWindow()</code> when the user clicks the button to open a blank Picture-in-Picture window. The returned promise resolves with a Picture-in-Picture window JavaScript object. The video player is moved to that window using <code>append()</code>.</p>
<pre class="language-js"><code class="language-js">pipButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> player <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#player"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token comment">// Open a Picture-in-Picture window.</span><br /> <span class="token keyword">const</span> pipWindow <span class="token operator">=</span> <span class="token keyword">await</span> documentPictureInPicture<span class="token punctuation">.</span><span class="token function">requestWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token comment">// Move the player to the Picture-in-Picture window.</span><br /> pipWindow<span class="token punctuation">.</span>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>player<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Check out <a href="https://developer.chrome.com/docs/web-platform/document-picture-in-picture/">Picture-in-picture for any element</a> for more details and examples.</p>
<h2 id="missing-stylesheets-debug" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-116/#missing-stylesheets-debug" aria-hidden="true">#</a> DevTools missing stylesheets debugging improvements.</h2>
<p>DevTools got a number of improvements to identify and debug issues with missing stylesheets.</p>
<p>First: the <strong>Sources > Page</strong> tree now shows only the successfully deployed and loaded stylesheets to minimize confusion.</p>
<p>Also the <strong>Sources > Editor</strong> now underlines and shows inline error tooltips next to failed, <code>@import</code>,<code>url()</code>, and <code>href</code> statements.</p>
<img alt="Underlined statements with tooltips in the Sources panel." decoding="async" height="446" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/uv386cOgFWeWnf6ItxOS.png?auto=format&w=1600 1600w" width="800" />
<ul>
<li>The <strong>Console</strong>, in addition to links to failed requests, now provides links to the exact line that references a stylesheet that failed to load.</li>
</ul>
<img alt="The Console provides links to the exact lines with problematic statements." decoding="async" height="574" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/acQGKJmqR7JtA4e9UaIq.png?auto=format&w=1600 1600w" width="800" />
<p>The <strong>Network panel</strong> consistently populates the <strong>Initiator</strong> column with links to the exact line that references a stylesheet that failed to load.</p>
<p>The <strong>Issues panel</strong> lists all stylesheets loading issues, including broken URLs, failed requests, and misplaced <code>@import</code> statements.</p>
<img alt="The Issues panel with links to to sources and requests." decoding="async" height="668" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JlcKWWo8z99LqXiHFk53.png?auto=format&w=1600 1600w" width="800" />
<p>Check out <a href="https://developer.chrome.com/blog/new-in-devtools-116/">what’s new in DevTools</a> for all the details and more information on DevTools in Chrome 116.</p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-116/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there’s plenty more.</p>
<ul>
<li><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_motion_path">Motion path</a> allows authors to position any graphical object and animate it along a path specified by the developer.</li>
<li>The <code>display</code> and <code>content-visibility</code> properties are now supported in keyframe animations, which allows exit animations to be added purely in CSS.</li>
<li>The fetch API can now be used with <a href="https://developer.mozilla.org/docs/Web/API/ReadableStreamBYOBReader">Bring Your Own Buffer readers</a>, reducing garbage collection overhead and copies, and improving responsiveness for users.</li>
</ul>
<div class="aside aside--update"><div class="aside__label gap-bottom-300"><svg width="24" height="24" viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5.5V10.5L12.25 13.02L13.02 11.74L9.5 9.65V5.5H8ZM18 7.5V0.5L15.36 3.14C13.74 1.51 11.49 0.5 9 0.5C4.03 0.5 0 4.53 0 9.5C0 14.47 4.03 18.5 9 18.5C13.97 18.5 18 14.47 18 9.5H16C16 13.36 12.86 16.5 9 16.5C5.14 16.5 2 13.36 2 9.5C2 5.64 5.14 2.5 9 2.5C10.93 2.5 12.68 3.29 13.95 4.55L11 7.5H18Z" fill="currentColor"></path>
</svg>
<span>Update</span></div>
<p>A previous version of this post stated that the <a href="https://developer.chrome.com/docs/web-platform/bfcache-notrestoredreasons/">Back/forward cache <code>notRestoredReasons</code> API</a> was included in Chrome 116 but this feature has been delayed until a future release.</p>
</div>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-116/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 116.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-116/">What's new in Chrome DevTools (116)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-116/">Chrome 116 deprecations and removals</a></li>
<li><a href="https://chromestatus.com/features#milestone%3D116">ChromeStatus.com updates for Chrome 116</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/115.0.5790.181..116.0.5845.87">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-116/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>Yo soy Adriana Jara, and as soon as Chrome 117 is released, I'll be right here to
tell you what's new in Chrome!</p>
New in Chrome 1152023-07-13T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-115/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="McqCMfREokE"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li>Use <code>ScrollTimeline</code> and <code>ViewTimeline</code> to create <a href="https://developer.chrome.com/en/blog/new-in-chrome-115/#scroll-driven-animations">scroll-driven animations</a> that enhance user experience.</li>
<li><a href="https://developer.chrome.com/en/blog/new-in-chrome-115/#fenced-frames">Fenced frames</a> work along other Privacy Sandbox APIs to embed relevant content while preventing unnecessary context sharing.</li>
<li>With the <a href="https://developer.chrome.com/en/blog/new-in-chrome-115/#topics-api">Topics API</a> the browser can share information with third parties about a user's interests while preserving privacy.</li>
<li>And there’s plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-115/#more">more</a>.</li>
</ul>
<p>I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 115.</p>
<h2 id="scroll-driven-animations" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-115/#scroll-driven-animations" aria-hidden="true">#</a> Scroll driven animations</h2>
<p>Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container.
This means that as you scroll up or down, the linked animation goes forward or backward in direct response.</p>
<p>The following examples demonstrate some use cases. For example you can create reading indicators which move as you scroll:</p>
<figure>
<video controls="" height="800" playsinline="" width="800" style="--vid-width: 800; --vid-height: 800"> <source src="https://storage.googleapis.com/web-dev-uploads/video/AeNB0cHNDkYPUYzDuv8gInYA9rY2/HiTavHlNjHFrA3NLLDZq.mp4" type="video/mp4" /> </video>
<figcaption>A reading indicator atop a document, driven by scroll.</figcaption>
</figure>
<p>Scroll-driven animations can also create elements that fade-in as they come into view:</p>
<figure>
<video controls="" height="800" playsinline="" width="800" style="--vid-width: 800; --vid-height: 800"> <source src="https://storage.googleapis.com/web-dev-uploads/video/AeNB0cHNDkYPUYzDuv8gInYA9rY2/eV0R7BXHO7ieTFVBfTEE.mp4" type="video/mp4" /> </video>
<figcaption>The images on this page fade-in as they come into view.</figcaption>
</figure>
<p>By default, an animation attached to an element runs on the document timeline. Its origin time starts at 0 when the page loads, and starts ticking forward as clock time progresses. This is the default animation timeline and, until now, was the only animation timeline you had access to.</p>
<p>The <a href="https://drafts.csswg.org/scroll-animations-1/">Scroll-driven Animations Specification</a> defines two new types of timelines that you can use:</p>
<ul>
<li><strong>Scroll Progress Timeline</strong>: a timeline that is linked to the scroll position of a scroll container along a particular axis.</li>
<li><strong>View Progress Timeline</strong>: a timeline that is linked to the relative position of a particular element within its scroll container.</li>
</ul>
<p>Here’s a code sample that uses an anonymous Scroll Progress Timeline to create a reading progress indicator fixed to the top of the viewport.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> …<br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@keyframes</span> grow-progress</span> <span class="token punctuation">{</span><br /> <span class="token selector">from</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><br /> <span class="token selector">to</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">#progress</span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><br /><br /> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 50%<span class="token punctuation">;</span><br /> <span class="token property">animation</span><span class="token punctuation">:</span> grow-progress auto linear<span class="token punctuation">;</span><br /> <span class="token property">animation-timeline</span><span class="token punctuation">:</span> <span class="token function">scroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Read <a href="https://developer.chrome.com/articles/scroll-driven-animations/">scroll-drive animations</a> for all the details and more examples.</p>
<h2 id="fenced-frames" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-115/#fenced-frames" aria-hidden="true">#</a> Fenced Frames</h2>
<p>The <a href="https://developer.chrome.com/docs/privacy-sandbox/overview/">Privacy Sandbox</a> is an initiative that aims to create technologies that both protect people's privacy online and give developers tools to build thriving digital businesses.</p>
<p>Many of its proposals aim to satisfy cross-site use cases without third-party cookies or other tracking mechanisms. For example:</p>
<ul>
<li>The <a href="https://developer.chrome.com/docs/privacy-sandbox/fledge-api/">Protected Audience API</a>: allows for interest-based ad serving in a privacy-preserving manner.</li>
<li><a href="https://developer.chrome.com/docs/privacy-sandbox/shared-storage/">Shared Storage</a>: allows access to unpartitioned cross-site data in a secure environment.</li>
</ul>
<p>In order to preserve privacy some of these APIs require a new way to embed content. The solution is called a fenced frame.</p>
<p>Fenced frames work in combination with other Privacy Sandbox proposals to display documents from different storage partitions within a single page.</p>
<p>A fenced frame is a HTML element for embedded content, similar to an iframe. Unlike iframes, a fenced frame limits communication with its embedding context to allow the frame access to cross-site data without sharing it with the embedding context.</p>
<p>Similarly, any first-party data in the embedding context cannot be shared with the fenced frame.</p>
<table class="with-heading-tint">
<thead>
<tr>
<th>Feature </th>
<th><code>iframe</code></th>
<th><code>fencedframe</code></th>
</tr></thead>
<tbody>
<tr>
<td>Embed content</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Embedded content can access embedding context DOM</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>Embedding context can access embedded content DOM</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>Observable attributes, such as <code>name</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>URLs (<code>http://example.com</code>) </td>
<td>Yes</td>
<td>Yes (<a href="https://github.com/WICG/fenced-frame/blob/master/explainer/use_cases.md">dependent on use case</a>)</td>
</tr>
<tr>
<td>Browser-managed opaque source (<code>urn:uuid</code>)</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Access to cross-site data </td>
<td>No</td>
<td>Yes (dependent on use case)</td>
</tr>
</tbody></table>
<p>For example, let's say <code>news.example</code> (the embedding context) embeds an ad from <code>shoes.example</code> in a fenced frame. <code>news.example</code> cannot exfiltrate data from the <code>shoes.example</code> ad, and <code>shoes.example</code> cannot learn first-party data from <code>news.example</code>.</p>
<img alt="A comparison of before and after state of storage partitioning." decoding="async" height="613" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format" srcset="https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=200 200w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=228 228w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=260 260w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=296 296w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=338 338w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=385 385w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=439 439w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=500 500w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=571 571w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=650 650w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=741 741w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=845 845w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=964 964w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/ss7wjBshEJcwdQXcXGov.png?auto=format&w=1600 1600w" width="800" />
<p>Check out these articles for documentation about <a href="https://developer.chrome.com/docs/privacy-sandbox/fenced-frame/">Fenced Frames</a>, the <a href="https://developer.chrome.com/docs/privacy-sandbox/fledge-api/">Protected Audience API</a>, <a href="https://developer.chrome.com/en/blog/new-in-chrome-115/docs/privacy-sandbox/shared-storage/">Shared Storage</a> and more</p>
<h2 id="topics-api" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-115/#topics-api" aria-hidden="true">#</a> Topics API</h2>
<p>In the past, third-party cookies and other mechanisms have been used to track user browsing behavior across sites to infer topics of interest. These mechanisms are being phased out as part of the Privacy Sandbox initiative.</p>
<p>The Topics API allows a browser to share information with third parties about a user's interests while preserving privacy.</p>
<p>The Topics API enables interest-based advertising (IBA) without tracking the sites a user visits. The browser observes and records topics that appear to be of interest to the user, based on their browsing activity. This information is recorded on the user's device.</p>
<p>For example, the API might suggest the topic <code>"Fiber & Textile Arts"</code> for a user who visits the website <code>knitting.example</code>.</p>
<p>Topics are a signal to help ad tech platforms select relevant ads. Unlike third-party cookies, this information is shared without revealing further information about the user themself or the user's browsing activity.</p>
<p>Read <a href="https://developer.chrome.com/docs/privacy-sandbox/topics/overview/">the Privacy Sandbox overview</a> for all the details on the topics taxonomy and using the Topics API</p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-115/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there’s plenty more.</p>
<ul>
<li>The maximum size of a <code>WebAssembly.Module</code> on the main thread increased to 8 megabytes</li>
<li>The CSS <code>display</code> property now accepts multiple keywords as a value, besides the legacy precomposed keywords.</li>
<li>There is an <a href="https://developer.chrome.com/origintrials/#/view_trial/1196831600973709313">origin trial</a> for the Compute Pressure API, which offers high-level information about the current state of the device hardware.</li>
</ul>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-115/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 115.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-115/">What's new in Chrome DevTools (115)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-115/">Chrome 115 deprecations and removals</a></li>
<li><a href="https://chromestatus.com/features#milestone%3D115">ChromeStatus.com updates for Chrome 115</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/114.0.5735.237..115.0.5790.93">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-115/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>Yo soy Adriana Jara, and as soon as Chrome 116 is released, I'll be right here to
tell you what's new in Chrome!</p>
New in Chrome 1142023-05-30T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-114/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="qqTnAWL7-v0"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li>CSS [<code>text-wrap: balance</code>] (#text-wrap-balance) is available to improve text layouts.</li>
<li>Cookies partitioned by top level site (<a href="https://developer.chrome.com/en/blog/new-in-chrome-114/#chips">CHIPS</a>) are here.</li>
<li>Popovers are easier than ever with the <a href="https://developer.chrome.com/en/blog/new-in-chrome-114/#popover-api">Popover API</a>.</li>
<li>And there’s plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-114/#more">more</a>.</li>
</ul>
<p>I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 114.</p>
<h2 id="text-wrap-balance" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-114/#text-wrap-balance" aria-hidden="true">#</a> <code>text-wrap:balance</code>.</h2>
<p>Use <code>text-wrap: balance</code> to improve text layouts. The animation below shows the difference you can make with this one line.</p>
<figure>
<video autoplay="" controls="" loop="" muted=""> <source src="https://storage.googleapis.com/web-dev-uploads/video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qJKWQGssebOIDGVBtLpo.mp4" type="video/mp4" /> </video>
<figcaption>
<a href="https://codepen.io/web-dot-dev/pen/KKxjpQm">
Try a demo
</a>
</figcaption>
</figure>
<p>As a developer, you don’t know the final size, font size, or even language of text. All variables are needed for an effective treatment of text wrapping. Since the browser does know all the factors, with text-wrap:balance you can request the browser to figure out the best balanced line wrapping solution.</p>
<img alt="The two previous examples are shown together, one is marked as unbalanced and the other as balanced." decoding="async" height="371" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format" srcset="https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=200 200w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=228 228w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=260 260w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=296 296w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=338 338w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=385 385w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=439 439w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=500 500w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=571 571w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=650 650w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=741 741w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=845 845w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=964 964w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lnGFtchLIPk9RnHSurHg.png?auto=format&w=1600 1600w" width="800" />
<p>The balanced text block is more pleasing to the eye of a reader. It grabs attention better and is overall easier to read.</p>
<p>Balancing headlines will and should be the primary use case for <code>text-wrap: balance</code>. There is a performance cost to balance the text, so to mitigate the cost it only works for up to four lines.</p>
<p>Check out <a href="https://developer.chrome.com/blog/css-text-wrap-balance/">this article</a> with samples and more details to improve your text layouts.</p>
<h2 id="chips" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-114/#chips" aria-hidden="true">#</a> CHIPS: Cookies Having Independent Partitioned State.</h2>
<p><a href="https://developer.chrome.com/docs/privacy-sandbox/chips/">CHIPS (Cookies Having Independent Partitioned State)</a>, enables opting-in to third-party cookies being partitioned by top-level site using the new cookie attribute <code>Partitioned</code>.</p>
<p>Before CHIPS, when a user visits site A, embedded site C could set a cookie on the user's machine. If the user then visits site B which also embeds site C, site C could access the same cookie that was set on site A. This allows site C to compile a user's browsing activity across site A, B, and every site that it is embedded on.</p>
<img alt="Diagram showing sites and storage with unpartitioned cookies." decoding="async" height="450" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format" srcset="https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=200 200w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=228 228w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=260 260w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=296 296w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=338 338w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=385 385w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=439 439w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=500 500w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=571 571w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=650 650w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=741 741w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=845 845w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=964 964w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=1098 1098w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=1252 1252w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=1428 1428w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/4eKoilhldt8qdmiEvEDo.jpg?auto=format&w=1600 1600w" width="800" />
<p>While cross-site tracking is an issue, there are valid cross-site cookie needs which can be achieved in a privacy-preserving way with cookie partitioning.</p>
<p>With CHIPS when a user visits site A and embedded content from site C sets a cookie with the Partitioned attribute, the cookie is saved in a partitioned jar only for cookies that site C sets when it's embedded on site A. The browser would only send that cookie when the top-level site is A.</p>
<img alt="Diagram showing sites and paritioned storage with cookies." decoding="async" height="393" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format" srcset="https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=200 200w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=228 228w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=260 260w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=296 296w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=338 338w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=385 385w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=439 439w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=500 500w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=571 571w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=650 650w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=741 741w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=845 845w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=964 964w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Myb2Km4gEVROgCi5NZFQ.png?auto=format&w=1600 1600w" width="800" />
<p>When the user visits a new site, for example site B, site C would not receive the cookie that was set when C was embedded in site A.</p>
<p>Checkout <a href="https://developer.chrome.com/docs/privacy-sandbox/third-party-cookie-phase-out/">this article</a> for more details about the process to phase out third party cookies.</p>
<h2 id="popover-api" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-114/#popover-api" aria-hidden="true">#</a> The Popover API.</h2>
<p>With the <a href="https://developer.mozilla.org/docs/Web/API/Popover_API">Popover API</a> it is easier to build transient user interface (UI) elements that are displayed on top of all other web app UI.</p>
<p>These include user-interactive elements like action menus, form element suggestions, content pickers, and teaching UI.</p>
<p>The new popover attribute enables any element to be displayed in the <a href="https://developer.chrome.com/blog/top-layer-devtools/">top layer</a> automatically. This means no more worrying about positioning, stacking elements, focus or keyboard interactions for the developer.</p>
<p>This is similar to the <a href="https://developer.mozilla.org/docs/Web/HTML/Element/dialog"><code><dialog></code></a> element, but has several important differences, including light-dismiss behavior, popover interaction management, and event support, and the lack of a "modal" mode.</p>
<p>Checkout <a href="https://developer.chrome.com/blog/introducing-popover-api">this article</a> for more information.</p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-114/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there’s plenty more.</p>
<ul>
<li>DevTools lets you pause and debug C and C++ code in WebAssembly apps with <a href="https://developer.chrome.com/blog/new-in-devtools-114/#wasm">DWARF support</a>.</li>
<li>The <code>exclusionFilters</code> option in <a href="https://developer.mozilla.org/docs/Web/API/Bluetooth/requestDevice"><code>navigator.bluetooth.requestDevice()</code></a> allows web developers to exclude some devices from the browser picker..</li>
<li>There is an origin trial for <a href="https://developer.chrome.com/origintrials/#/view_trial/2228155915641552897">Background Blur</a>.</li>
</ul>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-114/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 114.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-114/">What's new in Chrome DevTools (114)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-114/">Chrome 114 deprecations and removals</a></li>
<li><a href="https://chromestatus.com/features#milestone%3D114">ChromeStatus.com updates for Chrome 114</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/113.0.5672.177..114.0.5735.53">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-114/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>Yo soy Adriana Jara, and as soon as Chrome 115 is released, I'll be right here to
tell you what's new in Chrome!</p>
New in Chrome 1132023-05-03T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-113/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="o6V1Le8GS7s"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li><a href="https://developer.chrome.com/en/blog/new-in-chrome-113/#webgpu">WebGPU</a> is here, it allows high-performance 3D graphics and data-parallel computation on the web.</li>
<li>Devtools can now override network <a href="https://developer.chrome.com/en/blog/new-in-chrome-113/#override-headers">response headers</a>.</li>
<li><a href="https://developer.chrome.com/en/blog/new-in-chrome-113/#first-party-sets">First Party Sets</a>, part of the <a href="https://privacysandbox.com/">Privacy Sandbox</a>, that allows organizations to declare related sites is starting to roll out.</li>
<li>And there's plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-113/#more">more</a>.</li>
</ul>
<p>I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 113.</p>
<h2 id="webgpu" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-113/#webgpu" aria-hidden="true">#</a> WebGPU is here.</h2>
<p><a href="https://developer.chrome.com/blog/webgpu-release/">WebGPU is a new API</a> for the web, which exposes modern hardware capabilities and allows rendering and computation operations on a GPU, similar to <a href="https://learn.microsoft.com/en-us/windows/win32/direct3d12/what-is-directx-12-">Direct3D 12</a>, <a href="https://developer.apple.com/metal/">Metal</a>, and <a href="https://developer.nvidia.com/vulkan">Vulkan</a>.</p>
<p>Unlike the <a href="https://www.khronos.org/webgl/wiki/Getting_Started">WebGL</a> family of APIs, WebGPU offers access to more advanced GPU features and provides first-class support for general computations on the GPU.</p>
<p>The API is designed with the web platform in mind. It features:
An idiomatic JavaScript API.
Integration with promises.
Support for importing videos.
A polished developer experience with great error messages.</p>
<p>Many widely used WebGL libraries are already working on implementing WebGPU support or have already done so. This means that using WebGPU may only require making a single line change, for example:</p>
<ul>
<li><strong>Babylon.js:</strong> Has full WebGPU support already.</li>
<li><strong>PlayCanvas:</strong> Has announced initial WebGPU support.</li>
<li><strong>TensorFlow.js:</strong> Supports WebGPU-optimized versions of most operators.</li>
<li><strong>Three.js:</strong> WebGPU support is under development.</li>
</ul>
<p>Check out <a href="https://developer.mozilla.org/docs/Web/API/WebGPU_API">WebGPU's documentation</a> on MDN for all the details.</p>
<h2 id="override-headers" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-113/#override-headers" aria-hidden="true">#</a> Devtools response headers override.</h2>
<p>In DevTools you can now override response headers in the <strong>Network</strong> panel.</p>
<p>Previously, you needed access to the web server to experiment with HTTP response headers.</p>
<p>With response header overrides, you can locally prototype fixes for various headers, including but not limited to:</p>
<ul>
<li><a href="https://developer.mozilla.org/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS) Headers</a></li>
<li><a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Permissions-Policy">Permissions-Policy Headers</a></li>
<li><a href="https://web.dev/articles/coop-coep">Cross-Origin Isolation Headers</a></li>
</ul>
<p>To override a header, navigate to <strong>Network</strong> > <strong>Headers</strong> > <strong>Response Headers</strong>,
hover over a header's value, click <strong>Edit</strong> and edit it.</p>
<img alt="CORS error fixed by a header override." decoding="async" height="504" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N0GUECvGcvFad0JFs72l.png?auto=format&w=1600 1600w" width="800" />
<p>You can also add a new header:</p>
<img alt="Adding a custom header." decoding="async" height="506" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dRPqQCkvX4GT3KiFonaW.png?auto=format&w=1600 1600w" width="800" />
<p>And edit all overrides in a single place.</p>
<img alt="Editing all overrides." decoding="async" height="431" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format" srcset="https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=200 200w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=228 228w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=260 260w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=296 296w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=338 338w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=385 385w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=439 439w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=500 500w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=571 571w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=650 650w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=741 741w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=845 845w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=964 964w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XSgXk86kVgdJTlEBplTc.png?auto=format&w=1600 1600w" width="800" />
<p>Check out <a href="https://developer.chrome.com/blog/new-in-devtools-113/">this article</a> for instructions on how to use this feature and other updates in DevTools</p>
<h2 id="first-party-sets" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-113/#first-party-sets" aria-hidden="true">#</a> First-Party Sets is rolling out.</h2>
<p><a href="https://developer.chrome.com/docs/privacy-sandbox/first-party-sets/">First-Party Sets (FPS)</a> is starting to roll out to stable. First Party Sets is part of the <a href="https://privacysandbox.com/">Privacy Sandbox</a>. It is a way for organizations to declare relationships among sites, so that browsers allow limited third-party cookie access for specific purposes.</p>
<img alt="Diagram showing brandx.com, fly-brandx.com and drive-brandx.com as one group and example.com, example.rs, example.co.uk as another group." decoding="async" height="348" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format" srcset="https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=200 200w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=228 228w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=260 260w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=296 296w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=338 338w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=385 385w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=439 439w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=500 500w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=571 571w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=650 650w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=741 741w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=845 845w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=964 964w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/OLx3AXkweLjAiDzoDslb.png?auto=format&w=1600 1600w" width="800" />
<p>As part of the work on First-Party Sets, Chrome is implementing and extending the Storage Access API allowing a site to request access to their cookies in a third-party context.
With it, organizations with related sites (for example, using different domain names, or country-specific domains) can still provide services like single sign-on or shared sessions.
Remember! This API will be rolled out slowly to users over a number of weeks to enable testing and evaluation.</p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-113/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there's plenty more.</p>
<ul>
<li>The unprefixed <a href="https://developer.mozilla.org/docs/Web/CSS/image/image-set">image-set</a> type is now available so authors don't need to use <code>-webkit-image-set</code> and it is up to date to the current spec.</li>
<li>The <a href="https://developer.mozilla.org/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a> and <a href="https://developer.mozilla.org/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a> media features are now supported.</li>
<li>There is an origin trial for <a href="https://developer.chrome.com/origintrials/#/view_trial/1705738358866575361">WebGPU WebCodecs integration</a>.</li>
</ul>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-113/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 113.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-113/">What's new in Chrome DevTools (113)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-113/">Chrome 113 deprecations and removals</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D113">ChromeStatus.com updates for Chrome 113</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/112.0.5615.170..113.0.5672.58">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-113/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>I'm Adriana Jara, and as soon as Chrome 114 is released, I'll be right here to
tell you what's new in Chrome!</p>
New in Chrome 1122023-04-04T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-112/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="KGMe4OyXYEc"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li>CSS now supports <a href="https://developer.chrome.com/en/blog/new-in-chrome-112/#nesting-rules">nesting rules</a>.</li>
<li>The algorithm to set the initial focus on <a href="https://developer.chrome.com/en/blog/new-in-chrome-112/#dialog"><code><dialog></code> elements was updated</a>.</li>
<li>No-op <code>fetch()</code> handlers on <a href="https://developer.chrome.com/en/blog/new-in-chrome-112/#no-op-sw">service workers are skipped</a> from now on to make navigations faster.</li>
<li>And there’s plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-112/#more">more</a>.</li>
</ul>
<p>I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 112.</p>
<h2 id="nesting-rules" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-112/#nesting-rules" aria-hidden="true">#</a> CSS support for nesting.</h2>
<p>One of our favorite CSS preprocessor features is now built into the language: nesting style rules.</p>
<p>Before nesting, every selector needed to be explicitly declared, separately from
one another. This leads to repetition, stylesheet bulk, and a scattered authoring
experience.</p>
<div class="compare pad-left-300" data-type="worse">
<p class="compare__label pad-bottom-200">
Before
</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.nesting</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> hotpink<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.nesting > .is</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.nesting > .is > .awesome</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
</div>
<p>After <a href="https://www.w3.org/TR/css-nesting-1/">nesting</a>, selectors can be
continued and related style rules to it can be grouped within.</p>
<div class="compare pad-left-300" data-type="better">
<p class="compare__label pad-bottom-200">
After
</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.nesting</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> hotpink<span class="token punctuation">;</span><br /><br /> <span class="token selector">> .is</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span><br /><br /> <span class="token selector">> .awesome</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
</div>
<p>Nesting helps developers by reducing the need to repeat selectors while also co-locating style rules for related elements. It can also help styles match the HTML they target.</p>
<p>If the <code>.nesting</code> component in the example was removed from the project, you could delete the entire group instead of searching files for related selector instances.</p>
<p>Nesting can help with:</p>
<ul>
<li>Organization.</li>
<li>Reducing file size.</li>
<li>Refactoring.</li>
</ul>
<p>Checkout <a href="https://developer.chrome.com/articles/css-nesting/">this article</a> for tips to make the most of CSS nesting and you can find the support for nesting in devtools <a href="https://developer.chrome.com/blog/new-in-devtools-112/#nesting">here</a>.</p>
<h2 id="dialog" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-112/#dialog" aria-hidden="true">#</a> Algorithm update for <code><dialog></code> initial focus.</h2>
<p>The HTML <code><dialog></code> element is the standardized way to represent a dialog box or other interactive component, such as a dismissible alert or a subwindow, that needs to be displayed on top of all other content in a web page.</p>
<p>This HTML element is the recommended way to create such content because its features were built to provide better and consistent usability and accessibility.</p>
<p>One of those features is handling which element gets focused when the dialog is opened, in this version the algorithm that selects that element was updated.</p>
<p>From now on:</p>
<p>The dialog focusing steps look at keyboard focusable elements instead of any focusable element
The <code><dialog></code> element itself gets focus if it has the autofocus attribute set</p>
<p>The <code><dialog></code> element itself gets focus as a fallback instead of focus being "reset" to the <code><body></code> element.</p>
<p>Read the <a href="https://developer.mozilla.org/docs/Web/HTML/Element/dialog">documentation</a> for more details on the <code><dialog></code> element.</p>
<h2 id="no-op-sw" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-112/#no-op-sw" aria-hidden="true">#</a> Skipping service worker no-op fetch handlers.</h2>
<p>From Chrome 112 the service worker start and the listener dispatch from the navigation critical path will be omitted, if a user agent identifies that all the service worker's fetch listeners are no-ops.</p>
<p>This feature makes the navigation of those pages faster.</p>
<p>Having the fetch handler was one of the PWA requirements for a web app to be installable. We suspect that might be the reason some sites have essentially an empty fetch handler. However, to start a service worker and execute a no-op listener only brings overhead, without bringing any of the benefits that could be implemented with the right service worker like caching or offline capabilities. So Chrome now skips them to improve navigation.</p>
<p>As part of this change, Chrome will show console warnings if all the service worker’s fetch listeners are no-ops, and encourage developers to remove those fetch listeners.</p>
<img alt="Warnings in DevTools for empty service worker fetch handlers." decoding="async" height="297" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format" srcset="https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=200 200w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=228 228w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=260 260w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=296 296w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=338 338w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=385 385w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=439 439w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=500 500w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=571 571w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=650 650w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=741 741w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=845 845w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=964 964w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/SeARmcA1EicLXagFnVOe0ou9cqK2/rVEXxK1RvVOvaz7Gi8FP.png?auto=format&w=1600 1600w" width="800" />
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-112/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there’s plenty more.</p>
<ul>
<li>The setter for <code>document.domain</code> is now deprecated.</li>
<li>There is an <a href="https://developer.chrome.com/origintrials/#/view_trial/1390486384950640641">origin trial</a> for the <code>X-Requested-With header</code> deprecation in WebView</li>
<li>The recorder in devtools can now record with <a href="https://developer.chrome.com/blog/new-in-devtools-112/#pierce-selectors">pierce selectors</a>.</li>
</ul>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-112/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 112.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-112/">What's new in Chrome DevTools (112)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-112/">Chrome 112 deprecations and removals</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D112">ChromeStatus.com updates for Chrome 112</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/111.0.5563.53..112.0.5615.54">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-112/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>I’m Adriana Jara, and as soon as Chrome 113 is released, I'll be right here to
tell you what's new in Chrome!</p>
New in Chrome 1112023-03-07T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-111/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="cscwgzz85Og"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li>Create polished transitions in your single page app with the <a href="https://developer.chrome.com/en/blog/new-in-chrome-111/#view-transitions-api">View Transitions API</a>.</li>
<li>Bring colors to the next level with support for <a href="https://developer.chrome.com/en/blog/new-in-chrome-111/#css-color-level4">CSS Color Level 4</a>.</li>
<li>Discover <a href="https://developer.chrome.com/en/blog/new-in-chrome-111/#devtools-color">new tools</a> in the style panel to make the most of new color functionality.</li>
<li>And there’s plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-111/#more">more</a>.</li>
</ul>
<p>I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 111.</p>
<h2 id="view-transitions-api" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-111/#view-transitions-api" aria-hidden="true">#</a> View Transitions API.</h2>
<p>Creating smooth transitions on the web is a complex task.
The View Transitions API is here to make the creation of polished transitions simpler by snapshotting views and allowing the DOM to change without any overlap between states.</p>
<figure>
<video autoplay="" class="video-full-demo" controls="" loop="" muted="" playsinline=""> <source src="https://storage.googleapis.com/web-dev-uploads/video/CZmpGM8Eo1dFe0KNhEO9SGO8Ok23/hgnJfPFUbGlucFegEEtl.mp4" type="video/mp4" /> </video>
<figcaption>Transitions created with the View Transition API. <a href="https://http203-playlist.netlify.app/">Try the demo site</a>–Requires Chrome 111+.</figcaption>
</figure>
<p>The default view transition is a cross fade, the following snippet implements this experience.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">spaNavigate</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// Fallback for browsers that don't support this API:</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>document<span class="token punctuation">.</span>startViewTransition<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token function">updateTheDOMSomehow</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token comment">// With a transition:</span><br /> document<span class="token punctuation">.</span><span class="token function">startViewTransition</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">updateTheDOMSomehow</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>When <code>.startViewTransition()</code> is called, the API captures the current state of the page.</p>
<p>Once that's complete, the <code>callback</code> passed to <code>.startViewTransition()</code> is called. That's where the DOM is changed. Then, the API captures the new state of the page.</p>
<p>Note that the API is launched for Single-Page Apps (SPAs) but support for other models is being implemented too.</p>
<p>There are many details to this API, learn more <a href="https://developer.chrome.com/docs/web-platform/view-transitions/">in our article containing samples and details</a>, or explore the <a href="https://developer.mozilla.org/docs/Web/API/View_Transitions_API">View Transitions documentation on MDN</a>.</p>
<h2 id="css-color-level4" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-111/#css-color-level4" aria-hidden="true">#</a> CSS Color Level 4.</h2>
<p>With CSS color level 4, CSS now supports high definition displays, specifying colors from HD gamuts while also offering color spaces with specializations.</p>
<p>In a nutshell it means 50% more colors to pick from! You thought 16 million colors sounded like a lot. I thought so too.</p>
<figure>
<video autoplay="" controls="" loop="" muted=""> <source src="https://storage.googleapis.com/web-dev-uploads/video/vS06HQ1YTsbMKSFTIPl2iogUQP73/swYaLIEXuDRZ2VO8SCLH.mp4" type="video/mp4" /> </video>
<figcaption>
A series of images are shown transitioning between wide and narrow color
gamuts, illustrating color vividness and its effects.<br />
<a href="https://ciechanow.ski/color-spaces/#:~:text=you%20can%20drag%20the%20slider%20to%20see%20how%20the%20extent%20of%20the%20chromaticity%20triangle%20corresponds%20to%20the%20representable%20colors.">Try it for yourself</a>
</figcaption>
</figure>
<p>The implementation includes the <a href="https://developer.mozilla.org/docs/Web/CSS/color_value/color"><code>color()</code></a> function; it can be used for any color space that specifies colors with R, G, and B channels. <code>color()</code> takes a color space parameter first, then a series of channel values for RGB and optionally some alpha.</p>
<p>Here are some examples of using the color function with different color spaces.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.valid-css-color-function-colors</span> <span class="token punctuation">{</span><br /> <span class="token property">--srgb</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span>srgb 1 1 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--srgb-linear</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span>srgb-linear 100% 100% 100% / 50%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--display-p3</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span>display-p3 1 1 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--rec2020</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span>rec2020 0 0 0<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--a98-rgb</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span>a98-rgb 1 1 1 / 25%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--prophoto</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span>prophoto-rgb 0% 0% 0%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--xyz</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span>xyz 1 1 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Checkout <a href="https://developer.chrome.com/articles/high-definition-css-color-guide/">this article</a> for more documentation to take full advantage of high definition colors using CSS.</p>
<h2 id="devtools-color" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-111/#devtools-color" aria-hidden="true">#</a> New color devtools.</h2>
<p>Devtools has new features to support the css color level 4 specification.</p>
<p>The <strong>Styles</strong> pane now supports the 12 new color spaces and 7 new gamuts outlined in the spec. Here are examples of CSS color definitions with color(), lch(), oklab() and color-mix().</p>
<img alt="Examples of CSS color definitions." decoding="async" height="509" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format" srcset="https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=200 200w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=228 228w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=260 260w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=296 296w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=338 338w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=385 385w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=439 439w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=500 500w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=571 571w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=650 650w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=741 741w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=845 845w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=964 964w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png?auto=format&w=1600 1600w" width="800" />
<p>When using <code>color-mix()</code>, which enables mixing a percentage of one color into another, you can view the final color output in the <strong>Computed</strong> pane
<img alt="color-mix result in the Computed pane." decoding="async" height="487" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format" srcset="https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=200 200w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=228 228w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=260 260w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=296 296w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=338 338w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=385 385w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=439 439w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=500 500w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=571 571w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=650 650w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=741 741w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=845 845w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=964 964w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png?auto=format&w=1600 1600w" width="800" /></p>
<p>Also the color picker supports all the new color spaces with more features. For example, click on the color swatch of color(display-p3 1 0 1). A gamut boundary line has also been added, distinguishing between the sRGB and display-p3 gamuts for a clearer understanding of your selected color's gamut.
<img alt="A gamut boundary line." decoding="async" height="657" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format" srcset="https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=200 200w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=228 228w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=260 260w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=296 296w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=338 338w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=385 385w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=439 439w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=500 500w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=571 571w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=650 650w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=741 741w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=845 845w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=964 964w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png?auto=format&w=1600 1600w" width="800" /></p>
<p>The color picker also supports converting colors between color formats.</p>
<img alt="Converting colors between color formats." decoding="async" height="460" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format" srcset="https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=200 200w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=228 228w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=260 260w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=296 296w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=338 338w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=385 385w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=439 439w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=500 500w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=571 571w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=650 650w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=741 741w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=845 845w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=964 964w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=1098 1098w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=1252 1252w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=1428 1428w, https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png?auto=format&w=1600 1600w" width="800" />
<p>Checkout <a href="https://developer.chrome.com/blog/new-in-devtools-111/">this post</a> for more information on debugging color and other new features in devtools.</p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-111/#more" aria-hidden="true">#</a> And more!</h2>
<p>Of course there’s plenty more.</p>
<ul>
<li>CSS added trigonometric functions, additional root font units and <a href="https://developer.chrome.com/articles/css-nth-child-of-s/">extended the n-th child</a> pseudo selector.</li>
<li>The <a href="https://developer.chrome.com/docs/web-platform/document-picture-in-picture/">Document Picture in Picture API</a> is in origin trial</li>
<li><code>previousslide</code> and <code>nextslide</code> actions are now part of the <a href="https://web.dev/media-session">Media Session API</a>. Checkout the demo <a href="https://googlechrome.github.io/samples/media-session/slides.html">here</a>.</li>
</ul>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-111/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 111.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-111/">What's new in Chrome DevTools (111)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-111/">Chrome 111 deprecations and removals</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D111">ChromeStatus.com updates for Chrome 111</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/110.0.5481.186..111.0.5563.53">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-111/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>I’m Adriana Jara, and as soon as Chrome 112 is released, I'll be right here to
tell you what's new in Chrome!</p>
New in Chrome 1102023-02-07T00:00:00Zhttps://developer.chrome.com/en/blog/new-in-chrome-110/Adriana Jarahttps://developer.chrome.com/authors/ajara/<div class="youtube"> <lite-youtube videoid="036w1MUoAa0"> </lite-youtube></div>
<p>Here's what you need to know:</p>
<ul>
<li>Add custom style to your picture-in-picture elements with the new <code>:picture-in-picture</code> <a href="https://developer.chrome.com/en/blog/new-in-chrome-110/#pip">pseudo class</a>.</li>
<li>Set your web app launch behavior with <a href="https://developer.chrome.com/en/blog/new-in-chrome-110/#launch-handler">launch_handler</a> in your manifest.</li>
<li>use the <a href="https://developer.chrome.com/en/blog/new-in-chrome-110/#credentialless"><code>credentialless</code> attribute</a> in iframes to embed third party content that doesn’t set a Cross Origin Embedder Policy</li>
<li>And there’s plenty <a href="https://developer.chrome.com/en/blog/new-in-chrome-110/#more">more</a>.</li>
</ul>
<p>I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 110.</p>
<h2 id="pip" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-110/#pip" aria-hidden="true">#</a> :picture-in-picture pseudo class</h2>
<p>With the <a href="https://developer.mozilla.org/docs/Web/API/Picture-in-Picture_API">Picture-in-Picture API</a> websites can create a floating video window, always on top so that users continue consuming media, while interacting with other content.</p>
<p>Now with the <a href="https://developer.mozilla.org/docs/Web/CSS/:picture-in-picture"><code>:picture-in-picture</code> css pseudo-class</a> you can add styles to the elements to improve the experience.</p>
<p>The snippet below shows how to use the picture-in-picture class to add a message to the video container that reminds the user the video is now playing somewhere else.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">#video-container:has(video:picture-in-picture)::before</span> <span class="token punctuation">{</span><br /> <span class="token property">bottom</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'Video is now playing in a Picture-in-Picture window'</span><span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">right</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Use the pseudo-class again on the video element, to make the element transparent to display the message correctly.</p>
<p>Play with <a href="https://googlechrome.github.io/samples/picture-in-picture/css-pseudo-class">the example</a> and improve your picture-in-picture video experiences.</p>
<h2 id="launch-handler" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-110/#launch-handler" aria-hidden="true">#</a> launch_handler manifest member.</h2>
<p>The <a href="https://developer.chrome.com/docs/web-platform/launch-handler/">Launch Handler API</a> lets you control how your web app launches For example, whether it uses an existing or a new window, and whether the chosen window is navigated to the launch URL.</p>
<p>Let’s look at an example: in desktop environments, if you install an app and then visit it on the browser, there is a button to move to the standalone app window.
Previously, the only possible behavior was to launch the app in a new window.</p>
<p>Now, using the <a href="https://developer.chrome.com/docs/web-platform/launch-handler/#the-launch_handler-manifest-member"><code>launch_handler</code> manifest member</a> web apps can customize their launch behavior.</p>
<p>For example, the snippet below causes all this web app’s launches to focus on an existing app window and navigate to it (if it exists) instead of always launching a new window.</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"launch_handler"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"client_mode"</span><span class="token operator">:</span> <span class="token string">"navigate-new"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /></code></pre>
<h2 id="credentialless" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-110/#credentialless" aria-hidden="true">#</a> <code>credentialless</code> iframes.</h2>
<p>One of the biggest challenges with cross origin isolation is that all cross-origin iframes must deploy <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy">COEP</a> and <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Resource-Policy">CORP</a> . An iframe without those headers will not be loaded by the browser.</p>
<p>The <code>credentialless</code> attribute helps to embed third-party iframes that don't set these headers.</p>
<p>With <code>credentialless</code>, the iframe is loaded from a different, empty context. In particular, it is loaded without cookies. The iframe starts with an empty cookie jar.</p>
<p>Likewise, storage APIs such as LocalStorage, CacheStorage, and so on, load and store data in the new ephemeral partition. All this storage is cleared once the top-level document is unloaded. This allows for removing the COEP restriction.</p>
<p>Find more information in <a href="https://developer.chrome.com/blog/iframe-credentialless/">this article</a> to securely use <code>credentialless</code> to load third party content into your iframes.</p>
<h2 id="more" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-110/#more" aria-hidden="true">#</a> And more!</h2>
<p>And of course there is plenty more.</p>
<p>Web SQL is now removed in non-secure contexts.</p>
<p>The CSS <a href="https://developer.mozilla.org/docs/Web/CSS/initial-letter"><code>initial-letter</code> property</a> provides a way to set the number of lines that an initial-letter should sink into following lines of text.</p>
<p>FileSystemHandle now includes a <a href="https://developer.mozilla.org/docs/Web/API/FileSystemHandle/remove"><code>remove()</code> method</a>.</p>
<h2 id="further-reading" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-110/#further-reading" aria-hidden="true">#</a> Further reading</h2>
<p>This covers only some key highlights. Check the links below for
additional changes in Chrome 110.</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-110/">What's new in Chrome DevTools (110)</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-110/">Chrome 110 deprecations and removals</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D110">ChromeStatus.com updates for Chrome 110</a></li>
<li><a href="https://chromium.googlesource.com/chromium/src/+log/109.0.5414.128..110.0.5481.9">Chromium source repository change list</a></li>
<li><a href="https://chromiumdash.appspot.com/schedule">Chrome release calendar</a></li>
</ul>
<h2 id="subscribe" tabindex="-1"><a class="heading-link" href="https://developer.chrome.com/en/blog/new-in-chrome-110/#subscribe" aria-hidden="true">#</a> Subscribe</h2>
<p>To stay up to date, <a href="https://goo.gl/6FP1a5">subscribe</a> to the
<a href="https://www.youtube.com/user/ChromeDevelopers/">Chrome Developers YouTube channel</a>,
and you'll get an email notification whenever we launch a new video.</p>
<p>I’m Adriana Jara, and as soon as Chrome 111 is released, I'll be right here to tell you what's new in Chrome!</p>