New developments in the web platform that developers can't miss in 2022

On May 11-12, Google held the 2022 Google I/O Global Developer Conference. At the conference, Jake Archibald and Una Kravet updated us on the latest developments in web platforms. Let’s take a look at what’s new in the web platform in 2022!

This article will look at new features in areas such as privacy and security, power, UI design, performance and core metrics, as well as some new CSS and JavaScript to enhance developer tools.

1. UI functions

1. accent-color

Now all It's 2022, why is it still so difficult to style dropdowns and checkboxes? The accent-color property of CSS can easily solve this problem.

Using this property, you can easily change the theme color of previously inaccessible form controls, such as check boxes, radio buttons, range controls, and progress bars.

In one line of CSS, accent-color enables the browser to determine the foreground color based on the background set by the developer, and can also be combined with color-scheme properties together provide some nice automatic adjustments for light and dark themes. Using the code snippet below, the browser automatically creates light and dark modes and uses magenta accent colors for form controls.

This property is becoming stable across all modern web engines. This includes for Chrome, Edge, Opera, Safari, Firefox.

2. <dialog></dialog>

HTML dialog is a brand new out-of-the-box HTML dialog element.

This element makes it easy to create a dialog box, such as an alert or prompt. When you add it to the page, it starts out hidden, and when you use the showModal method to show it, it pops up:

<dialog id="dialog">
  hello world!
</dialog>

<script>
  someBotton.onclick = () => {
    const dialog = document.getElementById(&#39;dialog&#39;);
    dialog.showModal();
  };
</script>

Of course, this is the most Simple example, we can style it any way we want via CSS,

The really useful part of it is that it handles accessibility. It's called a dialog box. Prevents keyboard focus from leaving the element. It also pops on top of everything in a special top layer, so even if the dialog element is created deep inside some nested component structure, it can fill the viewport even if the parent element is hidden by overflow hiding or something else Type of hiding.

If there is a form in the dialog box, submitting the form will automatically close the box dialog box and tell us which button was clicked through the return value of the dialog box.

3. selectmenu

The Open UI community group is actively researching how to solve more complex and extended form controls. They propose some experimental solutions, such as the selectmenu component and the pop-up attribute.

selectmenu component can provide a wider range of styles for drop-down menus. The following is a demonstration from Microsoft about the selectmenu component:

Open UI is also considering solving the experience of other components, such as tabs and anchor positioning. .

4. datetime-local

datetime-local is a cross-browser function, it is an input type.

We can use it like this, the user can select the date and time:

<label>
  Start data & time:
  <input type="datetime-local" />
</label>

This is how it looks on Chrome on PC and Chrome on Android :

We can also set validation constraints such as minimum and maximum dates.

5. COLRv1

COLRv1 是浏览器中的一种新的字体格式。它是 COLRv0 字体格式的演变，其添加了渐变、合成和混合，并改进了内部形状重用，以获得更清晰、更紧凑的字体文件，从而更有效地压缩。

和该方法的替代方案bitmap相比，这种压缩带来了不错的性能提升：

COLRv1 字体往往更清晰，而且它们的缩放效果也更好。

这种新格式可以更轻松地在风格上使用彩色字体和表情符号等图标来创建富有表现力的标题和高性能界面。

例如，可以将它们呈现为彩色字体，而不是使用图像作为图标。有一些新的实验性属性，例如 font-palette和 override-colors，它们为用户提供了使用 COLRv1 设置 Web 字体样式的新方式。下面的例子就使用override-colors属性来重新设置 Bungee 字体的样式。

二、性能

1. bfcache

bfcache 意为往返缓存。它在 Firefox和 Safari 中已存在多年，现在 Chromium 中也支持了该功能。

在一个网页上点击一个链接到另一个页面后，但前一页会保留一段时间，在后台冻结，这意味着如果按下返回，它会立即触发。

并非所有页面都会发生这种情况，只有不太可能导致问题的页面才会发生这种情况。DevTools 可以告诉我们它是否适用于给定页面，如果不适用，会给出相应的理由。

2. 图片懒加载

图像是页面的一部分，它会提前开始加载。一旦浏览器在源代码中看到它们，就会提示下载。即使图像被隐藏，即使它位于一个非常长的页面的底部，也会提前加载。现在，一个简单的 loading 属性就可以让浏览器在开始下载时考虑图像的可见性和位置。

它也适用于 iframe：

<img src="..." alt="..." loading="lazy" />
<iframe src="..." loading="lazy"></iframe>

如果将 loading="lazy" 放在页面顶部的重要大图上，它们的加载速度会变慢，所以要格外小心。如果将它添加到不太重要和屏幕外的图像中时，它们不会争夺带宽，而更重要的东西（如样式、脚本和更高优先级的图像）会优先考虑。

现在它可以跨浏览器使用，并且可以在WordPress、Wix、Silverstripe、Drupal 等中使用。

3. aspect-ratio

如果我们为图像设置了height和width属性，并将高度设置为自动，它们将保持其纵横比，在加载之前，这避免了布局的变化。CSS 新增的 aspect-ratio 属性可以你为所有元素实现相同的效果，而不仅仅是图像。

在 iframe、组件div、网格布局和元素上使用该属性都可以得到一个固定的纵横比。

.whatever {
  aspect-ratio: 16 / 9;
}

这对于嵌入的内容、占位符或非HTML中的图像（如 CSS 背景）特别有用。

4. containment

containment是一个具有性能优势的 CSS 特性。该属性让开发人员可以告诉浏览器如何在屏幕上呈现内容，并隔离 DOM 子树。这反过来又使浏览器能够延迟渲染大小、窗格和布局，以提高速度和效率。

containment 也是容器查询的先决条件，下面会进行介绍。

5. Priority Hints

When fetching content, the browser will be as smart as possible and will prevent content from rendering from being given super high priority. Then, when the browser knows that the content is where, it gives higher priority to content in the viewport. But in some cases, the browser does not have enough information to make the right decision, such as two asynchronously loaded scripts, two preloaded images, two iframes, two visible images, one of which is more important.

Now we can use Priority Hints, recently supported in Chrome, to get images faster:

How does it work? Taking the code above as an example, the fetch-priority attribute allows us to add the loading priority for external files:

6. size-adjust

size-adjust is an experimental CSS property for web page layout that improves performance by reducing cumulative layout offsets (CLS).

How is it done? Fonts come in all shapes and sizes, and even fonts of the same size can look completely different. One 16-point font may look much larger than another. This is where size-adjusts comes into play. Using size-adjusts, users can make visual adjustments to font sizes (including local fonts) so that they look closer in shape to the web font they want to replace it with. Since web fonts replace local fonts after downloading, this reduces the overall cumulative layout offset of the page.

7. SIMD

In the past year, SIMD has been available in stable versions of Chromium and Firefox. SIMD stands for Single Instruction Multiple Data, a set of instructions that can copy multiple operands and pack them into large registers. It is a low-level way to run specific small operations in parallel, and it is a common optimization in C implementations of image, video, and audio processes.

#Until now, these optimizations were lost when compiling these programs to WebAssembly. Now, major browsers have implemented this feature, but Safari does not yet support it. We can compile WebAssembly twice, creating a package that uses SIMD and another package that doesn't use SIMD. This way, Chrome and Firefox will benefit from faster WebAssembly and still work fine in Safari. This is what is done on Squoosh to speed up image compression.

8. Interaction to Next Paint

Finally, this section looks at an experimental new performance indicator: Interaction to Next Paint (interaction with the next draw), It considers not just the first interaction, but all interactions on the page. For example, it will measure the time between the user pressing the play button and seeing the pause button replacing it.

More specifically, it records the time from user interaction until the next frame is drawn after all event handlers have run. This metric also better captures the interaction latency experienced by users, highlighting any unexpected slowness in the way the UI responds.

3. Privacy and Security

1. CHIPS

One of our long-term projects is to phase out third parties by Cookies and cross-site tracking to improve user privacy. Other browsers already do this, but this creates some compatibility issues. Therefore, we have been working on developing APIs that help us maintain our existing user-friendly functionality.

Suppose you have a chat application embedded in your site that manages its own login status. Traditionally, this would be achieved by allowing embedded sites to have their own set of cookies, regardless of where the site is embedded. This is the behavior of third-party cookies that is going away. This is great for privacy, but it destroys legitimately useful friendly cases like this embedded chat. If the chat doesn't have its own cookie, it won't remember that the user is logged in and will log out every time.

So what can we do? What if there was a way to keep the useful parts of the cookie but remove the cross-site tracking part. To do this, we are experimenting with cookies with independently partitioned state.

This is the attribute passed when setting the cookie, meaning the cookie will not be blocked, but will not be shared either.

#If the cookie is set when the chat application embeds A, it will only be available when the site embeds A. When the chat application is embedded in a different site, it will have a completely different cookie jar, so it cannot be used for cross-site tracking. However, we can still preserve the session.

2. Topics

Advertising platforms currently use tracking technology to serve relevant ads, but the door to these models has been closed. So we're looking at how we can enable platforms to serve meaningful ads without negatively impacting privacy. We propose an experimental Topics API.

It provides the page with some topics that the browser thinks the user will be interested in, which can be used to determine the best ads to show. Only premium themes are shared externally, not the user's browsing history, and different sites get different themes for the same user, making them not particularly useful as cross-site identifiers.

3. User-Agent Client Hints

We are taking steps together with other browsers to reduce the number of automatic hints in the User Agent string. The amount of data shared is very important for building user-customized experiences. But it's generally not a good idea to use User Agent strings to make styling decisions or conditionally serve different content. That being said, sometimes it's necessary for things like polyfills or to fix particularly nasty bugs.

Do not use the User Agent string, but view the User-Agent Client Hints API, which is currently supported by Chromium-based browsers:

4. WebAuth

Are passwords the most secure way to manage user accounts? While we're not yet a completely password-free world, there are emerging ways to provide better support for password managers to make the user experience seamless and more secure.

We are developing Passwords in WebAuth as part of the FIDO Alliance. This will allow registered credentials to be synced between Android devices, so passwords don't always have to be entered. To log in across devices, you can use your phone as a security key by scanning a QR code.

4. Web app capabilities

1. Media Session API

We hope that the Web has APP-like functions so that rich cross-platform experience. For example, most operating systems on desktop and mobile devices have some kind of media integration that tells us what is playing and provides controls for pausing, skipping, and searching.

In some cases, these controls appear on different devices. Songs played from the phone can display media controls on the watch. The Media Session API lets us do all of this over the web, displaying and reacting to media controls on Windows, Mac OS, Android, and iOS, including related devices like smartwatches.

As of this year, browser support is very good.

2. Window Controls Overlay

Window Controls Overlay is an integrated feature of the operating system, and this feature is much newer. It's currently a Chromium-only feature, but it's a nice progressive enhancement feature for installed apps.

When you install a web app on your desktop, it will open in a window that looks like this.

But a new feature in Chrome 99 could make it more like this:

Looks like it might be Oops. But this allows us to place the web content in that area in the middle, like this:

This feature can be activated using the option in the Web App Manifest, and then, we will get CSS environment variables and an API to tell the location of all window controls so that elements can be placed around them.

3. Navigation API

In order to control navigation, the browser has some APIs, such as history.pushState and popstate events to handle session history.

We redesigned it and called it Navigation API. This gives us the current Windows view of the same origin session history, unless we intercept navigation, which means no need to rely on click events on links. This will make it easier to manage state between reloads and traverse your web app.

It is now in raw trials in Chrome and will be stabilized soon.

4. PageTransition API

The PageTransition API is a API that uses familiar concepts like CSS animations to simplify creating richly animated transitions between pages and page states. API. Use this API to get smooth custom transitions between states.

5. Web App color scheme

Web App color scheme is a supplement to Web App Manifest, which allows us to create light and dark themes Available in different colors.

This is similar to the color scheme style, but it fits the color scheme of the website better. It works well with PWA interfaces. This is a seemingly small addition, but it makes a big difference to the user experience. This feature is currently in raw trials in Chromium.

6. Eyedropper API

The Eyedropper API is an input type and is a straw used to select color values.

Currently only supported in Chromium on the desktop, as it is a fairly desktop-specific interaction. The eyedropper can be activated upon user interaction with a quick API call, and the user can then click somewhere and send the captured color back to the web application. It can even capture colors outside of the browser, making it a completely app-like experience.

7. Virtual Keyboard API

Devices such as tablets or mobile phones often have virtual keyboards for entering text. Unlike a physical keyboard, a virtual keyboard appears and disappears based on the user's actions and needs.

Using the Virtual Keyboard API, users can programmatically access the virtual keyboard through JavaScript, pass information about the keyboard into CSS and its environment variables, and style it , and provides a policy for determining whether the virtual keyboard should be displayed.

5. Native functions

1. Structured cloning

can be used structuredClone Easily implement deep copy of JavaScript values. It currently works in all major browsers.

Not only is it cleaner, but you can clone more things, such as blobs, image bitmaps, and typed arrays. It can even clone object structures with circular references.

const clone = structuredClone(obj)

这不是 JavaScript 中的功能，它来自 HTML 规范。但它也在 Node.js 和 Deno 中实现。

2. createimageBitmap

下面来介绍如何将图像 blob 转换为可以在 Canvas 中显示的内容。使用以下方式就很容易导致内存泄漏：

但是现在所有浏览器都支持 createimageBitmap API：

使用它，上面的代码就变成了这样：

不仅如此，我们还可以更好地控制图像的加载方式。它对于为 2D canvas 和 WebGL 加载纹理非常有用。

3. JavaScript 功能

（1）顶层等待

现在可以像这样在 JavaScript 模块的顶层使用 await：

（2）私有属性和方法

类现在可以拥有私有属性和私有方法：

只要以#开头的属性和方法，就只有类内部的代码可以访问它。

（3）array.at

array.at 方法可以通过索引从数组中获取一个元素，如果传入的值为负数，就会从元素后边开始查找：

该方法也适用于字符串和类型化数组。所有这些现在都是跨浏览器的。

4. SharedArrayBuffer

SharedArrayBuffer 也是跨浏览器的。它 允许在页面和 workers 之间共享内存，内存共享对于使用 WebAssembly 的多个线程来说非常重要，因为它允许从 C++ 和 Rust 等移植代码，而性能损失最小。!

该功能在2018年出现了一些非常糟糕的 CPU 错误，浏览器出于安全原因不得不取消此功能。从那时起，浏览器一直在合作开发一种称为跨域隔离的功能，这大大减少了这些 CPU 错误的影响。所以现在，该功能已在所有引擎和平台上安全恢复。

5. URLPattern

URLPattern 允许我们根据模式验证 URL，并提取部分。该功能去年年底在 Chromium 浏览器中发布。它还没有出现在其他浏览器中，但是有一个 polyfill，让我们现在可以跨浏览器使用它。

6. WebCodecs API

WebCodecs API 实际上是一整套 API，可以对图像和视频解码和图像编码进行低级控制，从将帧从动画 GIF 中拉出，到对 WebGL 生成的场景进行编码，再到 H.264 视频，所有这些浏览器内。

多年来，浏览器已经内置了图像和视频编解码器，但这个 API 让我们可以对它们进行低级控制。这是 Chromium 领先的功能，期待未来有更多的跨引擎支持。

7. CSS 功能

（1）级联层

有时我们添加的选择器只是为了打败另一条规则的特异性，级联层就解决了这个问题。

我们可以将导入的样式放入图层中：

You can also use these layer blocks to group styles:

Now, by default, layers that appear one after another overwrite all of the previous layers style, regardless of selector specificity (weight). We can also predefine the order of layers. Styles within a layer have less specificity than styles outside the layer, unless the style is marked !important. When you do this, the styles apply it in reverse layer order.

(2):has()

:has() is a powerful tool for CSS selection , can be used to check any attribute of the parent within its scope. It is called a parent selector and is used to check whether the parent contains a child element.

For example, when using

figure:has(figcaption), how does figure contain the figcaption element, You can set styles for child elements, parent elements, or other elements.

(3) Container query

We can use media queries to create responsive designs that change which styles are applied based on the width of the browser window. But a wider browser window doesn't always mean wider components. Meeting this using media queries is difficult. Container queries solve this problem by applying styles based on the width, height, style, or state of any parent container, creating a truly responsive component-based interface.

#With container queries, each component has its own response information and will respond accordingly no matter where it is in the UI.

Another cool thing about container queries is named containers. If you have a child that is nested within one parent, but it needs to query another parent, you can create a container rule for this exact situation.

6. Summary

Over the past year, the Web has come a long way. We've been meeting and working with browser vendors to ensure an even better web development experience for developers through an initiative called Interop 2022. We aimed to roll out some of the most requested developer features and fixed some of the most annoying compatibility bugs.

In 2022, we aim to focus on these 15 key areas to ensure behavior is fully interoperable across browsers.

Ultimately, we want developers to be able to build great experiences on the web, and interoperability or browser support shouldn't be a roadblock. There are a lot of innovations coming!

Speech: https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/

Original address: https: //juejin.cn/post/7100815944833826824

Author: CUGGZ