Nouveaux développements dans la plateforme web que les développeurs ne peuvent pas manquer en 2022

Les 11 et 12 mai, Google a organisé la conférence mondiale des développeurs Google I/O 2022. Lors de la conférence, Jake Archibald et Una Kravet nous ont informés des derniers développements en matière de plateformes Web. Jetons un coup d'œil aux nouveautés de la plateforme web en 2022 !

Cet article examinera les nouvelles fonctionnalités dans des domaines tels que la confidentialité et la sécurité, la puissance, la conception de l'interface utilisateur, les performances et les mesures de base, ainsi que de nouveaux CSS et JavaScript pour améliorer les outils de développement.

1. Fonctionnalités de l'interface utilisateur

1. couleur d'accent

Nous sommes en 2022, pourquoi est-il encore si difficile de styliser les menus déroulants et les cases à cocher ? La propriété CSS accent-color peut facilement résoudre ce problème. accent-color 属性就可以轻松解决这个问题。

使用该属性，可以轻松更改以前难以访问的表单控件的主题颜色，例如复选框、单选按钮、范围控件和进度条等。

在一行 CSS 中，accent-color 使浏览器能够根据开发人员设置的背景来确定前景色，并且还可以与 color-scheme 属性一起为浅色和深色主题提供一些不错的自动调整。使用下面的代码片段，浏览器会自动创建明暗模式，并为表单控件使用 magenta 强调色。

该属性正在所有现代 Web 引擎中变得稳定。这包括为 Chrome、Edge、Opera、Safari、Firefox。

2. <dialog></dialog>

HTML dialog 是一个全新的开箱即用的 HTML 对话框元素。

通过这个元素可以轻松创建一个对话框，例如警报或提示。当将其添加到页面时，它开始是隐藏的，当使用 showModal 方法来展示它时，它会弹出来：

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

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

当然，这是一个最简单的例子，我们可以通过 CSS 来为它设置任何想要的样式，

它真正有用的部分是它处理可访问性。它被称为对话框。可以防止键盘焦点离开元素。它还会在一个特殊的顶层中弹出所有内容的顶部，因此即使对话框元素是在某些嵌套组件结构的深处创建的，它也可以填充视口，即使父元素隐藏了溢出隐藏或其他类型的隐藏。

如果在对话框的对话中有一个表单，提交该表单将自动关闭框对话并通过对话框的返回值告诉我们单击了哪个按钮。

3. selectmenu

Open UI 社区组正在积极的研究如何解决更复杂和扩展的表单控件。它们提出了一些实验性解决方案，例如 selectmenu 组件和pop-up属性。

selectmenu 组件可以为下拉菜单提供更广泛的样式。下面是微软的一个关于 selectmenu 组件的演示：

Open UI 也在考虑解决其他组件的体验，比如选项卡和锚定位等。

4. datetime-local

datetime-local

Utiliser Cette propriété facilite la modification de la couleur du thème des contrôles de formulaire auparavant inaccessibles, tels que les cases à cocher, les boutons radio, les contrôles de plage et les barres de progression.

à Dans une ligne CSS, accent-color permet au navigateur de déterminer la couleur de premier plan en fonction de l'arrière-plan défini par le développeur, et peut également être utilisé avec le color-scheme propriété pour les couleurs claires et sombres Le thème de couleur offre de jolis ajustements automatiques. À l'aide de l'extrait de code ci-dessous, le navigateur crée automatiquement des modes clair et sombre et utilise des couleurs d'accent magenta pour les contrôles de formulaire.

🎜2. <dialog>🎜🎜🎜La boîte de dialogue HTML est un tout nouvel élément de boîte de dialogue HTML prêt à l'emploi. 🎜🎜🎜🎜Passé Cet élément facilite la création d'une boîte de dialogue, telle qu'une alerte ou une invite. Lorsque vous l'ajoutez à la page, il commence masqué, et lorsque vous utilisez la méthode showModal pour l'afficher, il apparaît : 🎜

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

Copier après la connexion

🎜🎜🎜Bien sûr, c'est l'exemple le plus simple, nous pouvons définir ce que nous voulons via le style CSS, 🎜 🎜🎜 🎜Le vraiment une partie utile est qu'il gère l'accessibilité. C'est ce qu'on appelle une boîte de dialogue. Empêche le focus clavier de quitter l’élément. Il apparaît également au-dessus de tout dans une couche supérieure spéciale, donc même si l'élément de dialogue est créé au plus profond d'une structure de composants imbriqués, il peut remplir la fenêtre même si l'élément parent est masqué par un masquage de débordement ou autre type de masquage. 🎜🎜S'il y a un formulaire dans la boîte de dialogue, la soumission du formulaire fermera automatiquement la boîte de dialogue et nous indiquera sur quel bouton vous avez cliqué via la valeur de retour de la boîte de dialogue. 🎜🎜🎜

🎜3. selectmenu🎜🎜🎜Le groupe communautaire Open UI recherche activement comment résoudre des contrôles de formulaire plus complexes et étendus. Ils proposent quelques solutions expérimentales, telles que le composant selectmenu et l'attribut pop-up. 🎜🎜🎜🎜< Le composant code>selectmenu peut fournir une plus large gamme de styles pour les menus déroulants. Ce qui suit est une démonstration du composant selectmenu de Microsoft : 🎜🎜🎜🎜Open UI envisage également de résoudre l'expérience d'autres composants, tels que les onglets et le positionnement des ancres. 🎜

🎜4. datetime-local🎜🎜🎜datetime-local est une fonctionnalité multi-navigateurs, c'est un type d'entrée. 🎜🎜🎜🎜🎜 On peut l'utiliser comme ça, l'utilisateur peut sélectionner la date et l'heure : 🎜

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

Copier après la connexion

Copier après la connexion

🎜 Voici à quoi ça ressemble sur Chrome sur PC et Chrome sur Android : 🎜🎜🎜🎜🎜 On peut aussi définir des contraintes de validation comme Dates minimales et maximales. 🎜

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. Conseils de priorité

Lors de l'obtention du contenu, le navigateur sera aussi intelligent que possible et empêchera le rendu du contenu d'obtenir une priorité très élevée, puis lorsque le navigateur saura où se trouve le contenu, il affichera le contenu dans la fenêtre d'affichage. priorité plus élevée. Mais dans certains cas, le navigateur ne dispose pas de suffisamment d'informations pour prendre la bonne décision, comme deux scripts chargés de manière asynchrone, deux images préchargées, deux iframes, deux images visibles dont une plus importante.

Nous pouvons désormais obtenir des images plus rapidement grâce aux indices de priorité, récemment pris en charge dans Chrome :

Comment ça marche ? En prenant le code ci-dessus comme exemple, l'attribut fetch-priority nous permet d'ajouter une priorité de chargement aux fichiers externes :

6 size-adjust

size-adjust est un expérimental. Propriété CSS pour la mise en page des pages Web qui améliore les performances en réduisant les changements de mise en page cumulés (CLS). size-adjust是一个用于网页排版的实验性 CSS 属性，通过减少累积布局偏移（CLS）来提高性能。

它是怎么做到的？字体有各种形状和大小，即使是相同大小的字体也可能看起来完全不同。一种 16 号字体可能看起来比另一种大很多。这就是 size-adjusts 可以发挥作用的地方。使用 size-adjusts

it Comment ça se fait ? Les polices sont de toutes formes et tailles, et même des polices de même taille peuvent être complètement différentes. Une police de 16 points peut paraître beaucoup plus grande qu'une autre. C'est là que size-adjusts entre en jeu. À l'aide de size-adjusts, les utilisateurs peuvent effectuer des ajustements visuels sur la taille des polices (y compris les polices locales) afin que leur forme ressemble plus à la police Web par laquelle ils souhaitent la remplacer. Étant donné que les polices Web remplacent les polices locales après avoir été téléchargées, cela réduit le décalage cumulatif global de la page.

7. SIMD

Au cours de la dernière année, SIMD a atterri dans les versions stables de Chromium et Firefox. SIMD signifie Single Instruction Multiple Data, un ensemble d'instructions qui peuvent copier plusieurs opérandes et les regrouper dans de grands registres. Il s'agit d'un moyen de bas niveau pour exécuter de petites opérations spécifiques en parallèle, et il s'agit d'une optimisation courante dans les implémentations C++ de processus d'image, vidéo et audio.

Jusqu'à présent, ces optimisations étaient perdues lors de la compilation de ces programmes dans WebAssembly. Désormais, les principaux navigateurs ont implémenté cette fonctionnalité, mais Safari ne la prend pas encore en charge. Nous pouvons compiler WebAssembly deux fois, en créant un package qui utilise SIMD et un autre package qui n'utilise pas SIMD. De cette façon, Chrome et Firefox bénéficieront d'un WebAssembly plus rapide et fonctionneront toujours correctement dans Safari. C'est ce qui est fait sur Squoosh pour accélérer la compression des images.

8. Interaction avec la peinture suivante

Enfin, cette section examine une nouvelle mesure de performance expérimentale : l'interaction avec la peinture suivante (interaction avec la peinture suivante), qui prend en compte non seulement la première interaction, mais également le contenu de la peinture suivante. page toutes les interactions. Par exemple, il mesurera le temps écoulé entre l’appui de l’utilisateur sur le bouton play et le fait de voir le bouton pause le remplacer.

Plus précisément, il enregistre le temps écoulé entre l'interaction de l'utilisateur et le moment où l'image suivante est dessinée après l'exécution de tous les gestionnaires d'événements. Cette métrique capture également mieux la latence d'interaction ressentie par les utilisateurs, mettant en évidence toute lenteur inattendue dans la façon dont l'interface utilisateur répond.

3. Confidentialité et sécurité

1. CHIPS

L'un de nos projets à long terme consiste à améliorer la confidentialité des utilisateurs en supprimant progressivement les cookies tiers et le suivi intersites. D'autres navigateurs le font déjà, mais cela crée des problèmes de compatibilité. Par conséquent, nous avons travaillé sur le développement d’API qui nous aident à maintenir nos fonctionnalités conviviales existantes.

Supposons que vous ayez une application de chat intégrée à votre site qui gère son propre statut de connexion. Traditionnellement, cela serait réalisé en permettant aux sites intégrés d'avoir leur propre ensemble de cookies, quel que soit l'endroit où le site est intégré. C'est le comportement des cookies tiers qui disparaît. C'est excellent pour la confidentialité, mais cela détruit les cas conviviaux légitimement utiles comme ce chat intégré. Si le chat ne dispose pas de son propre cookie, il ne se souviendra pas que l'utilisateur est connecté et se déconnectera à chaque fois.

Alors, que pouvons-nous faire ? Et s'il existait un moyen de conserver les parties utiles du cookie mais de supprimer la partie de suivi intersites. Pour ce faire, nous expérimentons des cookies avec un état partitionné indépendamment.

C'est l'attribut transmis lors du paramétrage du cookie, ce qui signifie que le cookie ne sera pas bloqué, mais il ne sera pas non plus partagé.

Si le cookie est posé lorsque l'application de chat embarque A, alors il ne sera disponible que lorsque le site embarque A. Lorsque l’application de chat est intégrée à un site différent, elle aura un pot de cookies complètement différent, elle ne peut donc pas être utilisée pour le suivi intersites. Cependant, nous pouvons toujours conserver la session.

2. Sujets

Les plateformes publicitaires utilisent actuellement la technologie de suivi pour diffuser des publicités pertinentes, mais la porte à ces modèles a été fermée. Nous étudions donc comment permettre aux plateformes de diffuser des publicités significatives sans nuire à la confidentialité. Nous proposons une API Topics expérimentale.

Il donne à la page certains sujets qui, selon le navigateur, intéressent l'utilisateur, qui peuvent être utilisés pour déterminer les meilleures annonces à diffuser. Seuls les thèmes premium sont partagés en externe, pas l'historique de navigation de l'utilisateur, et différents sites obtiennent des thèmes différents pour le même utilisateur, ce qui les rend peu utiles en tant qu'identifiants intersites.

3. Conseils client User-Agent

Nous prenons des mesures avec d'autres navigateurs pour réduire la quantité de données automatiquement partagées dans la chaîne User Agent, ce qui est très important pour créer des expériences personnalisées pour les utilisateurs. Mais ce n'est généralement pas une bonne idée d'utiliser des chaînes d'agent utilisateur pour prendre des décisions de style ou pour proposer un contenu différent sous certaines conditions. Cela étant dit, cela est parfois nécessaire pour des choses comme les polyfills ou pour corriger des bugs particulièrement désagréables.

Au lieu d'utiliser la chaîne User Agent, consultez l'API User-Agent Client Hints, qui est actuellement prise en charge par les navigateurs basés sur Chromium :

4. gérer les comptes d'utilisateurs ? Qu'en est-il des méthodes sécurisées ? Même si nous ne sommes pas encore dans un monde totalement sans mot de passe, il existe de nouveaux moyens de fournir une meilleure prise en charge des gestionnaires de mots de passe afin de rendre l'expérience utilisateur transparente et plus sécurisée.

Nous développons des mots de passe dans WebAuth dans le cadre de l'Alliance FIDO. Cela permettra de synchroniser les informations d'identification enregistrées entre les appareils Android, de sorte que les mots de passe ne doivent pas toujours être saisis. Pour vous connecter sur plusieurs appareils, vous pouvez utiliser votre téléphone comme clé de sécurité en scannant un code QR.

4. Capacités des applications Web

1. API Media Session

Nous espérons que le Web dispose de fonctions de type APP afin que de riches expériences multiplateformes puissent être créées. Par exemple, la plupart des systèmes d'exploitation sur ordinateur de bureau et sur appareils mobiles disposent d'une sorte d'intégration multimédia qui nous indique ce qui est en cours de lecture et fournit des commandes pour la pause, le saut et la recherche.

Dans certains cas, ces commandes apparaissent sur différents appareils. Les chansons lues depuis le téléphone peuvent afficher les commandes multimédias sur la montre. L'API Media Session nous permet de faire tout cela sur le Web, en affichant et en réagissant aux commandes multimédias sur Windows, Mac OS, Android et iOS, y compris les appareils associés comme les montres intelligentes.

Depuis cette année, la prise en charge du navigateur est très bonne.

2. Superposition des contrôles de fenêtre

La superposition des contrôles de fenêtre est une fonctionnalité intégrée du système d'exploitation, et cette fonctionnalité est beaucoup plus récente. Il s'agit actuellement d'une fonctionnalité uniquement Chromium, mais il s'agit d'une fonctionnalité d'amélioration progressive intéressante pour les applications installées.

Lorsque vous installez une application Web sur votre bureau, elle s'ouvrira dans une fenêtre similaire à celle-ci.

Mais une nouvelle fonctionnalité dans Chrome 99 peut rendre les choses plus semblables à ceci :

Cela pourrait paraître mauvais. Mais cela nous permet de placer le contenu Web dans cette zone au milieu, comme ceci :

Cette fonctionnalité peut être activée à l'aide des options du manifeste de l'application Web, puis nous obtiendrons des variables d'environnement CSS et une API pour indiquez à tous les contrôles de la fenêtre Position afin que les éléments puissent être placés autour d'eux.

3. API de navigation

Afin de contrôler la navigation, les navigateurs disposent de certaines API, telles que les événements history.pushState et popstate pour gérer l'historique des sessions. history.pushState 和 popstate事件来处理会话历史。

我们对其进行了重新设计，并将其称为 Navigation API。这为我们提供了同源 session history 的当前 Windows 视图，除非我们拦截导航，这意味着不需要依赖链接上的点击事件。这将使管理重新加载和遍历 Web app 之间的状态变得更加容易。

它现在正在 Chrome 中进行原始试验，很快就会稳定下来。

4. PageTransition API

PageTransition API 是一个使用 CSS 动画等熟悉的概念来简化在页面和页面状态之间创建丰富动画转换的 API。使用该 API 可以在状态之间获得平滑的自定义转换。

5. Web App color scheme

Web App color scheme 是对 Web App Manifest 的补充，它可以让我们为浅色和深色主题提供不同的颜色。

这类似于配色方案样式，但它更适合网站的配色方案。它适用于 PWA 界面。这是一个看似很小的补充，但它对用户体验产生了很大的影响。该功能目前正在 Chromium 中进行原始试验。

6. Eyedropper API

Eyedropper API 是一种输入（input）类型，是用于选择颜色值的吸管。

目前仅在桌面端的 Chromium 中支持，因为它是一个相当具体的桌面交互。通过快速的 API 调用就可以在用户交互后激活吸管，然后用户可以单击某处并将捕获颜色发送回 Web 应用程序。它甚至可以在浏览器之外捕捉颜色，使其成为完全类似于应用程序的体验。

7. Virtual Keyboard API

平板电脑或手机等设备通常具有用于输入文本的虚拟键盘。与物理键盘不同，虚拟键盘会根据用户的操作和需求出现和消失。

使用 Virtual Keyboard API，用户可以通过 JavaScript 以编程方式访问虚拟键盘，将有关键盘的信息传递到 CSS及其环境变量中，并为其设置样式，并提供确定是否应显示虚拟键盘的策略。

五、原生功能

1. 结构化克隆

可以使用 structuredClone

nous Elle a été repensée et appelée Navigation API. Cela nous donne la vue Windows actuelle du même historique de session d'origine, à moins que nous n'interceptions la navigation, ce qui signifie qu'il n'est pas nécessaire de s'appuyer sur des événements de clic sur les liens. Cela facilitera la gestion de l'état entre les rechargements et la navigation dans votre application Web.

4. API PageTransition🎜🎜L'API PageTransition est une API qui utilise des concepts familiers tels que les animations CSS pour simplifier la création de transitions richement animées entre les pages et les états de page. Utilisez cette API pour obtenir des transitions personnalisées fluides entre les états. 🎜🎜🎜

5. Schéma de couleurs de l'application Web🎜🎜Le schéma de couleurs de l'application Web est un complément au manifeste de l'application Web, qui nous permet de fournir différentes couleurs pour les thèmes clairs et sombres. 🎜🎜🎜🎜Ceci Semblable au style de palette de couleurs, mais il correspond mieux à la palette de couleurs du site Web. Cela fonctionne bien avec les interfaces PWA. Il s’agit d’un ajout apparemment mineur, mais qui fait une grande différence dans l’expérience utilisateur. La fonctionnalité est actuellement en essai brut dans Chromium. 🎜

6. API Eyedropper🎜🎜L'API Eyedropper est un type d'entrée et est une paille utilisée pour sélectionner les valeurs de couleur. 🎜🎜🎜🎜Actuellement Uniquement pris en charge dans Chromium sur le bureau, car il s'agit d'une interaction assez spécifique au bureau. La pipette peut être activée lors de l'interaction de l'utilisateur avec un appel API rapide, et l'utilisateur peut ensuite cliquer quelque part et renvoyer la couleur capturée à l'application Web. Il peut même capturer des couleurs en dehors du navigateur, ce qui en fait une expérience totalement semblable à celle d'une application. 🎜🎜🎜

7. API de clavier virtuel🎜🎜Les appareils tels que les tablettes ou les téléphones mobiles disposent souvent de claviers virtuels pour saisir du texte. Contrairement à un clavier physique, un clavier virtuel apparaît et disparaît en fonction des actions et des besoins de l'utilisateur. 🎜🎜🎜🎜Utiliser L'API du clavier virtuel permet aux utilisateurs d'accéder par programmation au clavier virtuel via JavaScript, en transmettant des informations sur le clavier en CSS et ses variables d'environnement, en le stylisant et en fournissant des stratégies pour déterminer si le clavier virtuel doit être affiché. 🎜🎜🎜

5. Fonctions natives

1. Clonage structuré🎜 🎜 Vous pouvez utiliser structuredClone pour implémenter facilement une copie complète des valeurs JavaScript. Il fonctionne actuellement dans tous les principaux navigateurs. 🎜🎜🎜🎜🎜Non seulement c'est plus propre, mais vous pouvez cloner plus de choses, comme des blobs, des bitmaps d'images, des tableaux saisis. Il peut même cloner des structures d'objets avec des références circulaires. 🎜

const clone = structuredClone(obj)

Copier après la connexion

这不是 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）级联层

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

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

Les styles peuvent également être regroupés à l'aide de ces blocs de calques :

Désormais, par défaut, les calques qui apparaissent les uns après les autres peuvent remplacer tous les styles du calque précédent, quelle que soit la spécificité (poids) du sélecteur. Nous pouvons également prédéfinir l'ordre des calques. Les styles au sein d'un calque sont moins spécifiques que les styles en dehors du calque, sauf si le style est marqué !important. Lorsque vous faites cela, les styles l’appliquent dans l’ordre inverse des calques. !important。执行此操作时，这些样式会以相反的图层顺序应用它。

（2）:has()

:has() 是 CSS 选择的强大工具，可以用来检查父级在其范围内的任何属性，它被称为父选择器，用来检查父级中是否包含某个子元素。

例如，使用

figure:has(figcaption) 时，figure 如何包含figcaption

(2):has()

:has() est un outil puissant de sélection CSS, qui peut être utilisé pour vérifier si le parent est dans sa portée Tout attribut, appelé sélecteur de parent, est utilisé pour vérifier si le parent contient un élément enfant.

(3) Requêtes conteneur

À l'aide des requêtes de conteneur, chaque composant possède ses propres informations de réponse et répondra en conséquence, peu importe où il se trouve dans l'interface utilisateur.

6. Résumé

En 2022, nous visons à nous concentrer sur ces 15 domaines clés pour garantir que le comportement est pleinement interopérable entre les navigateurs.