5월 11~12일, Google은 2022 Google I/O 글로벌 개발자 컨퍼런스를 개최했습니다. 컨퍼런스에서 Jake Archibald와 Una Kravet은 웹 플랫폼의 최신 개발에 대해 업데이트했습니다. 2022년 웹플랫폼에는 어떤 변화가 있을지 살펴보겠습니다!
이 기사에서는 개인 정보 보호 및 보안, 성능, UI 디자인, 성능 및 핵심 지표와 같은 영역의 새로운 기능은 물론 개발자 도구를 향상시키는 몇 가지 새로운 CSS 및 JavaScript를 살펴보겠습니다.
2022년인데 아직도 드롭다운 메뉴와 체크박스 스타일을 지정하는 것이 왜 그렇게 어려운가요? CSS accent-color 속성을 사용하면 이 문제를 쉽게 해결할 수 있습니다. accent-color 属性就可以轻松解决这个问题。
使用该属性，可以轻松更改以前难以访问的表单控件的主题颜色，例如复选框、单选按钮、范围控件和进度条等。
在一行 CSS 中，accent-color 使浏览器能够根据开发人员设置的背景来确定前景色，并且还可以与 color-scheme 属性一起为浅色和深色主题提供一些不错的自动调整。使用下面的代码片段，浏览器会自动创建明暗模式，并为表单控件使用 magenta 强调色。
该属性正在所有现代 Web 引擎中变得稳定。这包括为 Chrome、Edge、Opera、Safari、Firefox。
<dialog></dialog>HTML dialog 是一个全新的开箱即用的 HTML 对话框元素。
通过这个元素可以轻松创建一个对话框，例如警报或提示。当将其添加到页面时，它开始是隐藏的，当使用 showModal 方法来展示它时，它会弹出来：
<dialog id="dialog">
hello world!
</dialog>
<script>
someBotton.onclick = () => {
const dialog = document.getElementById('dialog');
dialog.showModal();
};
</script>当然，这是一个最简单的例子，我们可以通过 CSS 来为它设置任何想要的样式，
它真正有用的部分是它处理可访问性。它被称为对话框。可以防止键盘焦点离开元素。它还会在一个特殊的顶层中弹出所有内容的顶部，因此即使对话框元素是在某些嵌套组件结构的深处创建的，它也可以填充视口，即使父元素隐藏了溢出隐藏或其他类型的隐藏。
如果在对话框的对话中有一个表单，提交该表单将自动关闭框对话并通过对话框的返回值告诉我们单击了哪个按钮。
Open UI 社区组正在积极的研究如何解决更复杂和扩展的表单控件。它们提出了一些实验性解决方案，例如 selectmenu 组件和pop-up属性。
selectmenu 组件可以为下拉菜单提供更广泛的样式。下面是微软的一个关于 selectmenu 组件的演示：
Open UI 也在考虑解决其他组件的体验，比如选项卡和锚定位等。
datetime-local
at CSS의 한 줄에 있는 accent-color를 사용하면 개발자가 설정한 배경을 기반으로 브라우저가 전경색을 결정할 수 있으며 color-scheme과 함께 사용할 수도 있습니다. 밝은 색상과 어두운 색상에 대한 속성 색상 테마는 멋진 자동 조정 기능을 제공합니다. 아래 코드 조각을 사용하면 브라우저가 자동으로 밝은 모드와 어두운 모드를 생성하고 양식 컨트롤에 마젠타 강조 색상을 사용합니다.
<dialog>🎜🎜🎜HTML 대화 상자는 바로 사용할 수 있는 새로운 HTML 대화 상자 요소입니다. 🎜🎜
🎜🎜통과 이 요소를 사용하면 경고나 프롬프트와 같은 대화 상자를 쉽게 만들 수 있습니다. 페이지에 추가하면 숨겨진 상태로 시작되고, showModal 메서드를 사용하여 표시하면 팝업으로 표시됩니다. 🎜<label> Start data & time: <input type="datetime-local" /> </label>
🎜🎜물론 이것은 가장 간단한 예입니다. CSS 스타일을 통해 원하는 대로 설정할 수 있습니다. 🎜 🎜
🎜selectmenu 구성 요소 및 pop-up 속성과 같은 몇 가지 실험적인 솔루션을 제안합니다. 🎜🎜
🎜🎜< code>selectmenu 구성 요소는 드롭다운 메뉴에 더 넓은 범위의 스타일을 제공할 수 있습니다. 다음은 Microsoft의 selectmenu 구성 요소에 대한 데모입니다. 🎜🎜
🎜🎜Open UI에서는 탭, 앵커 위치 지정 등 다른 구성 요소의 경험도 해결하는 것을 고려하고 있습니다. 🎜datetime-local은 크로스 브라우저 기능이며 입력 유형입니다. 🎜🎜🎜🎜🎜 다음과 같이 사용할 수 있습니다. 사용자는 날짜와 시간을 선택할 수 있습니다. 🎜<img src="..." alt="..." loading="lazy" /> <iframe src="..." loading="lazy"></iframe>
COLRv1 是浏览器中的一种新的字体格式。它是 COLRv0 字体格式的演变，其添加了渐变、合成和混合，并改进了内部形状重用，以获得更清晰、更紧凑的字体文件，从而更有效地压缩。
和该方法的替代方案bitmap相比，这种压缩带来了不错的性能提升：
COLRv1 字体往往更清晰，而且它们的缩放效果也更好。
这种新格式可以更轻松地在风格上使用彩色字体和表情符号等图标来创建富有表现力的标题和高性能界面。
例如，可以将它们呈现为彩色字体，而不是使用图像作为图标。有一些新的实验性属性，例如 font-palette和 override-colors，它们为用户提供了使用 COLRv1 设置 Web 字体样式的新方式。下面的例子就使用override-colors属性来重新设置 Bungee 字体的样式。
bfcache 意为往返缓存。它在 Firefox和 Safari 中已存在多年，现在 Chromium 中也支持了该功能。
在一个网页上点击一个链接到另一个页面后，但前一页会保留一段时间，在后台冻结，这意味着如果按下返回，它会立即触发。
并非所有页面都会发生这种情况，只有不太可能导致问题的页面才会发生这种情况。DevTools 可以告诉我们它是否适用于给定页面，如果不适用，会给出相应的理由。
图像是页面的一部分，它会提前开始加载。一旦浏览器在源代码中看到它们，就会提示下载。即使图像被隐藏，即使它位于一个非常长的页面的底部，也会提前加载。现在，一个简单的 loading 属性就可以让浏览器在开始下载时考虑图像的可见性和位置。
它也适用于 iframe：
<img src="..." alt="..." loading="lazy" /> <iframe src="..." loading="lazy"></iframe>
如果将 loading="lazy" 放在页面顶部的重要大图上，它们的加载速度会变慢，所以要格外小心。如果将它添加到不太重要和屏幕外的图像中时，它们不会争夺带宽，而更重要的东西（如样式、脚本和更高优先级的图像）会优先考虑。
现在它可以跨浏览器使用，并且可以在WordPress、Wix、Silverstripe、Drupal 等中使用。
如果我们为图像设置了height和width属性，并将高度设置为自动，它们将保持其纵横比，在加载之前，这避免了布局的变化。CSS 新增的 aspect-ratio 属性可以你为所有元素实现相同的效果，而不仅仅是图像。
在 iframe、组件div、网格布局和元素上使用该属性都可以得到一个固定的纵横比。
.whatever {
aspect-ratio: 16 / 9;
}这对于嵌入的内容、占位符或非HTML中的图像（如 CSS 背景）特别有用。
containment是一个具有性能优势的 CSS 特性。该属性让开发人员可以告诉浏览器如何在屏幕上呈现内容，并隔离 DOM 子树。这反过来又使浏览器能够延迟渲染大小、窗格和布局，以提高速度和效率。
containment 也是容器查询的先决条件，下面会进行介绍。
컨텐츠를 가져올 때 브라우저는 최대한 똑똑해 렌더링 컨텐츠가 매우 높은 우선순위를 얻지 못하도록 차단합니다. 그런 다음 브라우저가 컨텐츠의 위치를 알게 되면 뷰포트에 컨텐츠를 제공합니다. 더 높은 우선순위. 그러나 비동기적으로 로드된 스크립트 2개, 미리 로드된 이미지 2개, iframe 2개, 표시되는 이미지 2개(그 중 하나가 더 중요함)와 같이 올바른 결정을 내리는 데 필요한 정보가 브라우저에 충분하지 않은 경우도 있습니다.
이제 최근 Chrome에서 지원되는 우선순위 힌트를 사용하여 이미지를 더 빠르게 얻을 수 있습니다.
어떻게 작동하나요? 위의 코드를 예로 들면, fetch-priority 속성을 사용하면 외부 파일에 로딩 우선순위를 추가할 수 있습니다.
size-adjust는 실험적입니다. CLS(누적 레이아웃 이동)를 줄여 성능을 향상시키는 웹 페이지 레이아웃용 CSS 속성입니다. size-adjust是一个用于网页排版的实验性 CSS 属性，通过减少累积布局偏移（CLS）来提高性能。
它是怎么做到的？字体有各种形状和大小，即使是相同大小的字体也可能看起来完全不同。一种 16 号字体可能看起来比另一种大很多。这就是 size-adjusts 可以发挥作用的地方。使用 size-adjusts
크기 조정이 작동합니다. 크기 조정을 사용하면 사용자는 글꼴 크기(로컬 글꼴 포함)를 시각적으로 조정하여 대체하려는 웹 글꼴에 모양이 더 가깝게 보이도록 할 수 있습니다. 웹 글꼴은 다운로드 후 로컬 글꼴을 대체하므로 페이지의 전체 누적 레이아웃 오프셋이 줄어듭니다.
7. SIMD
8. 다음 페인트에 대한 상호 작용
1. CHIPS
그럼 우리는 무엇을 할 수 있나요? 쿠키의 유용한 부분을 유지하면서 사이트 간 추적 부분을 제거할 수 있는 방법이 있다면 어떨까요? 이를 위해 우리는 독립적으로 분할된 상태의 쿠키를 실험하고 있습니다.
쿠키 설정 시 전달되는 속성으로, 쿠키가 차단되지는 않지만 공유되지도 않는다는 의미입니다.
채팅 애플리케이션에 A가 포함될 때 쿠키가 설정되면 사이트에 A가 포함될 때만 쿠키를 사용할 수 있습니다. 채팅 애플리케이션이 다른 사이트에 포함되면 완전히 다른 쿠키 용기를 갖게 되므로 교차 사이트 추적에 사용할 수 없습니다. 그러나 여전히 세션을 보존할 수 있습니다.
현재 광고 플랫폼은 관련 광고를 제공하기 위해 추적 기술을 사용하지만 이러한 모델에 대한 문은 닫혀 있습니다. 따라서 우리는 개인 정보 보호에 부정적인 영향을 주지 않으면서 플랫폼이 의미 있는 광고를 제공할 수 있는 방법을 모색하고 있습니다. 우리는 실험적인 Topics API를 제안합니다.
브라우저에서 사용자가 관심을 갖고 있다고 생각하는 몇 가지 주제를 페이지에 제공하며, 이는 표시할 최고의 광고를 결정하는 데 사용될 수 있습니다. 사용자의 검색 기록이 아닌 프리미엄 테마만 외부에 공유되며, 서로 다른 사이트는 동일한 사용자에 대해 서로 다른 테마를 가지므로 교차 사이트 식별자로 특별히 유용하지 않습니다.
우리는 사용자 에이전트 문자열에서 자동으로 공유되는 데이터의 양을 줄이기 위해 다른 브라우저와 조치를 취하고 있습니다. 이는 사용자 맞춤형 경험을 구축하는 데 매우 중요합니다. 그러나 스타일 결정을 내리거나 조건부로 다른 콘텐츠를 제공하기 위해 사용자 에이전트 문자열을 사용하는 것은 일반적으로 좋은 생각이 아닙니다. 즉, 때로는 폴리필과 같은 작업이나 특히 불쾌한 버그를 수정하는 데 필요합니다.
사용자 에이전트 문자열을 사용하는 대신 현재 Chromium 기반 브라우저에서 지원되는 User-Agent Client Hints API를 살펴보세요.
비밀번호가 가장 좋은 방법입니다. 사용자 계정을 관리하는 방법은 어떻습니까? 아직 완전히 비밀번호가 없는 세상은 아니지만 사용자 경험을 원활하고 안전하게 만들기 위해 비밀번호 관리자에 대한 더 나은 지원을 제공하는 새로운 방법이 있습니다.
우리는 FIDO Alliance의 일환으로 WebAuth에서 비밀번호를 개발하고 있습니다. 이렇게 하면 등록된 자격 증명을 Android 기기 간에 동기화할 수 있으므로 항상 비밀번호를 입력할 필요가 없습니다. 여러 장치에 걸쳐 로그인하려면 QR 코드를 스캔하여 휴대폰을 보안 키로 사용할 수 있습니다.
웹에 APP와 같은 기능이 있어 풍부한 크로스 플랫폼 경험을 만들 수 있기를 바랍니다. 예를 들어, 대부분의 데스크톱 및 모바일 장치 운영 체제에는 재생 중인 항목을 알려주고 일시 중지, 건너뛰기 및 검색을 위한 제어 기능을 제공하는 일종의 미디어 통합 기능이 있습니다.
어떤 경우에는 이러한 컨트롤이 다른 장치에 표시됩니다. 휴대폰에서 재생되는 노래는 시계에 미디어 컨트롤을 표시할 수 있습니다. 미디어 세션 API를 사용하면 스마트워치와 같은 관련 장치를 포함하여 Windows, Mac OS, Android 및 iOS의 미디어 컨트롤을 표시하고 이에 반응하여 웹을 통해 이 모든 작업을 수행할 수 있습니다.
올해 현재 브라우저 지원이 매우 좋습니다.
창 컨트롤 오버레이는 운영 체제의 통합 기능이며 이 기능은 훨씬 새로운 기능입니다. 현재는 Chromium 전용 기능이지만 설치된 앱에 대한 점진적인 개선 기능입니다.
데스크톱에 웹앱을 설치하면 이와 비슷한 창이 열립니다.
그러나 Chrome 99의 새로운 기능을 사용하면 다음과 같이 만들 수 있습니다.
안좋아 보일 수도 있습니다. 하지만 이렇게 하면 다음과 같이 중간 영역에 웹 콘텐츠를 배치할 수 있습니다.
이 기능은 웹 앱 매니페스트의 옵션을 사용하여 활성화할 수 있으며, 그런 다음 CSS 환경 변수와 API를 사용하여 요소가 주위에 배치될 수 있도록 모든 위치 창 컨트롤에 지시합니다.
탐색을 제어하기 위해 브라우저에는 세션 기록을 처리하는 history.pushState 및 popstate 이벤트와 같은 일부 API가 있습니다. history.pushState 和 popstate事件来处理会话历史。
我们对其进行了重新设计，并将其称为 Navigation API。这为我们提供了同源 session history 的当前 Windows 视图，除非我们拦截导航，这意味着不需要依赖链接上的点击事件。这将使管理重新加载和遍历 Web app 之间的状态变得更加容易。
它现在正在 Chrome 中进行原始试验，很快就会稳定下来。
PageTransition API 是一个使用 CSS 动画等熟悉的概念来简化在页面和页面状态之间创建丰富动画转换的 API。使用该 API 可以在状态之间获得平滑的自定义转换。
Web App color scheme 是对 Web App Manifest 的补充，它可以让我们为浅色和深色主题提供不同的颜色。
这类似于配色方案样式，但它更适合网站的配色方案。它适用于 PWA 界面。这是一个看似很小的补充，但它对用户体验产生了很大的影响。该功能目前正在 Chromium 中进行原始试验。
Eyedropper API 是一种输入（input）类型，是用于选择颜色值的吸管。
目前仅在桌面端的 Chromium 中支持，因为它是一个相当具体的桌面交互。通过快速的 API 调用就可以在用户交互后激活吸管，然后用户可以单击某处并将捕获颜色发送回 Web 应用程序。它甚至可以在浏览器之外捕捉颜色，使其成为完全类似于应用程序的体验。
平板电脑或手机等设备通常具有用于输入文本的虚拟键盘。与物理键盘不同，虚拟键盘会根据用户的操作和需求出现和消失。
使用 Virtual Keyboard API，用户可以通过 JavaScript 以编程方式访问虚拟键盘，将有关键盘的信息传递到 CSS及其环境变量中，并为其设置样式，并提供确定是否应显示虚拟键盘的策略。
可以使用 structuredClone
🎜
🎜
🎜🎜이것 색 구성표 스타일과 비슷하지만 웹 사이트의 색 구성표에 더 잘 맞습니다. PWA 인터페이스와 잘 작동합니다. 이는 사소해 보이는 추가 사항이지만 사용자 경험에는 큰 변화를 가져옵니다. 이 기능은 현재 Chromium에서 원시 시험판으로 제공되고 있습니다. 🎜
🎜🎜현재 이는 데스크톱에 특화된 상호작용이므로 데스크톱의 Chromium에서만 지원됩니다. 빠른 API 호출을 통해 사용자 상호 작용 시 스포이드가 활성화될 수 있으며, 사용자는 아무 곳이나 클릭하여 캡처된 색상을 웹 애플리케이션으로 다시 보낼 수 있습니다. 브라우저 외부에서도 색상을 캡처할 수 있어 완전히 앱과 같은 경험을 선사합니다. 🎜🎜🎜
🎜🎜사용 가상 키보드 API를 사용하면 사용자는 JavaScript를 통해 프로그래밍 방식으로 가상 키보드에 액세스하여 키보드에 대한 정보를 CSS 및 해당 환경 변수에 전달하고, 스타일을 지정하고, 가상 키보드 표시 여부를 결정하기 위한 전략을 제공할 수 있습니다. 🎜🎜
🎜
structuredClone을 사용하면 JavaScript 값의 전체 복사본을 쉽게 구현할 수 있습니다. 현재 모든 주요 브라우저에서 작동합니다. 🎜🎜🎜🎜🎜더 깔끔할 뿐만 아니라 블롭, 이미지 비트맵, 형식화된 배열과 같은 더 많은 항목을 복제할 수 있습니다. 순환 참조를 사용하여 객체 구조를 복제할 수도 있습니다. 🎜const clone = structuredClone(obj)
这不是 JavaScript 中的功能，它来自 HTML 规范。但它也在 Node.js 和 Deno 中实现。
下面来介绍如何将图像 blob 转换为可以在 Canvas 中显示的内容。使用以下方式就很容易导致内存泄漏：
但是现在所有浏览器都支持 createimageBitmap API：
使用它，上面的代码就变成了这样：
不仅如此，我们还可以更好地控制图像的加载方式。它对于为 2D canvas 和 WebGL 加载纹理非常有用。
现在可以像这样在 JavaScript 模块的顶层使用 await：
类现在可以拥有私有属性和私有方法：
只要以#开头的属性和方法，就只有类内部的代码可以访问它。
array.at 方法可以通过索引从数组中获取一个元素，如果传入的值为负数，就会从元素后边开始查找：
该方法也适用于字符串和类型化数组。所有这些现在都是跨浏览器的。
SharedArrayBuffer 也是跨浏览器的。它 允许在页面和 workers 之间共享内存，内存共享对于使用 WebAssembly 的多个线程来说非常重要，因为它允许从 C++ 和 Rust 等移植代码，而性能损失最小。!
该功能在2018年出现了一些非常糟糕的 CPU 错误，浏览器出于安全原因不得不取消此功能。从那时起，浏览器一直在合作开发一种称为跨域隔离的功能，这大大减少了这些 CPU 错误的影响。所以现在，该功能已在所有引擎和平台上安全恢复。
URLPattern 允许我们根据模式验证 URL，并提取部分。该功能去年年底在 Chromium 浏览器中发布。它还没有出现在其他浏览器中，但是有一个 polyfill，让我们现在可以跨浏览器使用它。
WebCodecs API 实际上是一整套 API，可以对图像和视频解码和图像编码进行低级控制，从将帧从动画 GIF 中拉出，到对 WebGL 生成的场景进行编码，再到 H.264 视频，所有这些浏览器内。
多年来，浏览器已经内置了图像和视频编解码器，但这个 API 让我们可以对它们进行低级控制。这是 Chromium 领先的功能，期待未来有更多的跨引擎支持。
有时我们添加的选择器只是为了打败另一条规则的特异性，级联层就解决了这个问题。
我们可以将导入的样式放入图层中：
스타일은 다음 레이어 블록을 사용하여 그룹화할 수도 있습니다.
이제 기본적으로 차례로 나타나는 레이어는 선택기 특정성(가중치) 방식에 관계없이 이전 레이어의 모든 스타일을 재정의할 수 있습니다. 레이어 순서를 미리 정의할 수도 있습니다. 스타일이 !important로 표시되지 않는 한 레이어 내의 스타일은 레이어 외부의 스타일보다 덜 구체적입니다. 이렇게 하면 스타일이 레이어 역순으로 적용됩니다. !important。执行此操作时，这些样式会以相反的图层顺序应用它。
:has() 是 CSS 选择的强大工具，可以用来检查父级在其范围内的任何属性，它被称为父选择器，用来检查父级中是否包含某个子元素。
例如，使用
figure:has(figcaption) 时，figure 如何包含figcaption
:has()는 CSS 선택을 위한 강력한 도구로, 상위 요소가 다음인지 확인하는 데 사용할 수 있습니다. 해당 범위 내에서 상위 선택자라고 하는 모든 속성은 상위 요소에 하위 요소가 포함되어 있는지 확인하는 데 사용됩니다.
Figure:has(figcaption)을 사용할 때 Figure에 figcaption 요소가 포함되어 있으면 하위 요소, 상위 요소 또는 기타 요소에 대한 스타일을 설정할 수 있습니다.
컨테이너 쿼리를 사용하면 각 구성 요소에는 고유한 응답 정보가 있으며 UI 어디에 있든 그에 따라 응답합니다.
6. 요약지난 1년 동안 웹은 많은 발전을 이루었습니다. 우리는 Interop 2022라는 이니셔티브를 통해 개발자에게 훨씬 더 나은 웹 개발 환경을 보장하기 위해 브라우저 공급업체와 만나고 협력해 왔습니다. 우리는 가장 많이 요청된 개발자 기능 중 일부를 출시하고 가장 짜증나는 호환성 버그 중 일부를 수정하는 것을 목표로 했습니다.
궁극적으로 우리는 개발자가 웹에서 훌륭한 경험을 구축할 수 있기를 원하며 상호 운용성이나 브라우저 지원이 장벽이 되어서는 안 됩니다. 많은 혁신이 다가오고 있습니다! 🎜🎜🎜연설: https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/🎜🎜🎜🎜원본주소: https://juejin.cn/post/7100815944833826824🎜 🎜 🎜작성자: CUGGZ🎜🎜2022년에는 브라우저 전반에서 동작이 완전히 상호 운용될 수 있도록 이러한 15가지 핵심 영역에 중점을 두는 것을 목표로 합니다.
![자바스크립트 심층 분석 [웹 프론트엔드의 기본은 알아야 한다]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
