Platform:
- focus on fully capable web applications (PWA)
- WebAssembly Summit, Feb 10 (bit.ly/wasm-summit-20…)
- Backdrop filter
- SMS receiver API
![](https://pbs.twimg.com/media/EJHKhzzUYAAUU3J.jpg)
![](https://pbs.twimg.com/media/EJHKiUKU8AAqrsU.jpg)
![](https://pbs.twimg.com/media/EJHKi8JUYAcVGM-.jpg)
- lighthouse-ci, tool to run Lighthouse reports in CI (github.com/GoogleChrome/l…)
![](https://pbs.twimg.com/media/EJHRBf1UwAAhULA.jpg)
- Chrome will show a new warning, if domain contains visually similar characters. Like Cyrillic "a" in exаmple.com
- EV certificate is now will move to popup
- simplified url bar
- Suspicious site reporter
#chromedevsummit
![](https://pbs.twimg.com/media/EJHYi8YU0AAdirl.jpg)
![](https://pbs.twimg.com/media/EJHYj1AVAAAiWGh.jpg)
![](https://pbs.twimg.com/media/EJHYkWLUUAA6Lm-.jpg)
![](https://pbs.twimg.com/media/EJHYk2XUEAALkui.jpg)
Special extension for Chrome that shows full url and many more
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJHZA5_VAAAEUi5.jpg)
- goo.gle/private-join-a…
- federated.withgoogle.com
- goo.gle/cookie-blockin…
#chromedevsummit
![](https://pbs.twimg.com/media/EJHaYHjUcAAgl7s.jpg)
![](https://pbs.twimg.com/media/EJHaYprUUAAlmM_.jpg)
goo.gle/samesite-none-…
#chromedevsummit
![](https://pbs.twimg.com/media/EJHbloaUEAA07VA.jpg)
Use navigator.sms.receive()
Learn more: goo.gle/SMSReceiverAPI
#chromedevsummit
![](https://pbs.twimg.com/media/EJHnayVU0AAHRkx.jpg)
![](https://pbs.twimg.com/media/EJHn2MZUwAAhuNC.jpg)
![](https://pbs.twimg.com/media/EJHn2pYU4AAY9FY.jpg)
#chromedevsummit
![](https://pbs.twimg.com/media/EJHrT6sU0AERUZj.jpg)
goo.gle/FIDO
webauthn.guide
goo.gle/WebAuthnReauth…
bit.ly/AwesomeWebAuthn
#chromedevsummit
![](https://pbs.twimg.com/media/EJHsSo1VUAAP521.jpg)
![](https://pbs.twimg.com/media/EJHsTXdUUAAxBvW.jpg)
- Largest Contentful Paint (LCP)
- Total Blocking Time (TBT)
- Cumulative Layout Shift (CLS)
web.dev/metrics
#chromedevsummit
![](https://pbs.twimg.com/media/EJHvE5VU0AAQ1ym.jpg)
![](https://pbs.twimg.com/media/EJHvFmYUUAA-WBc.jpg)
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJHwUgHUUAA9Gvh.jpg)
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJHwuBxU8AAHEQv.jpg)
![](https://pbs.twimg.com/media/EJHwuwfU8AAnlGY.jpg)
Adapt your content for low-end devices or network.
(Angular or Vue available too)
bit.ly/react-adaptive
bit.ly/adaptive-angul…
bit.ly/adaptive-vue
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJINDXMU8AAYJnC.jpg)
![](https://pbs.twimg.com/media/EJIND3hU8AA1kHn.jpg)
bit.ly/csswg-prd
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJINywnUYAACFRR.jpg)
npm.im/comlink
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJIXRNXVUAAVQ1h.jpg)
![](https://pbs.twimg.com/media/EJIXRsFVUAAN-uj.jpg)
Use scroll-snap-type for carousel-like lists to stop on each element while scrolling
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJIjJNcUcAAri9-.jpg)
- reduced-motion to reduce animation
- color-scheme for dark mode
- contrast
- reduced-transparency
- light-level
- forced-colors
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJIkINOVAAAvoKX.jpg)
![](https://pbs.twimg.com/media/EJIkIxMUYAAua9a.jpg)
![](https://pbs.twimg.com/media/EJIkJSJUUAALtfF.jpg)
![](https://pbs.twimg.com/media/EJIkJqMU4AEd06J.jpg)
![](https://pbs.twimg.com/media/EJImuSXU8AAVafU.jpg)
![](https://pbs.twimg.com/media/EJInVraU0AMTI70.jpg)
![](https://pbs.twimg.com/media/EJInWLJU4AEkoBp.jpg)
- size
- aspect-ratio
- min(), max(), clamp()
- list style type 🔥🔥🔥
- display: outer inner
- css regions
- css modules
Learn more: a.nerdy.dev/css-at-cds
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJIqbZsUUAAxjnC.jpg)
Optimize your site for international usage (RTL or other languages)
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJIs8rZUUAEbLGI.jpg)
![](https://pbs.twimg.com/media/EJIs9EjUUAEV6Gj.jpg)
![](https://pbs.twimg.com/media/EJIs9rKU0AAWo4B.jpg)
- promote your PWA, but not to
your native app users web.dev/get-installed-…
- hide mini infobar using 'beforeInstallPromt' listener
- don't forget the analytics
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJIu1hAU0AEkwsg.jpg)
![](https://pbs.twimg.com/media/EJIu10_UUAI-FCy.jpg)
![](https://pbs.twimg.com/media/EJIu2HQUYAEVG7M.jpg)
![](https://pbs.twimg.com/media/EJIu2XyU0AAH2n4.jpg)
- Modify default focus ring
- Don't ship default UI components
- Disable text selection
- Set theme color
- Disable overscroll or set a background color on <html>
- Safe-area-inset
- Don't allow navigation to another domain
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJIwDWHU8AANlIZ.jpg)
![](https://pbs.twimg.com/media/EJIwDfHU8AA9z0V.jpg)
![](https://pbs.twimg.com/media/EJIwDxoVUAAA5hM.jpg)
![](https://pbs.twimg.com/media/EJIwEBnUYAAvJoo.jpg)
Which one is your favorite?
goo.gle/fugu-api-track…
![](https://pbs.twimg.com/media/EJI5VAzWoAEEP_7.jpg)
![](https://pbs.twimg.com/media/EJI5VpjUEAAWjkO.jpg)
![](https://pbs.twimg.com/media/EJI5WTrXUAIPrzM.jpg)
![](https://pbs.twimg.com/media/EJI5W-3XYAEReUE.jpg)
![](https://pbs.twimg.com/media/EJMK6kwU8AAJjbm.jpg)
- new <meter>
- <range>
- <checkbox> and <radio>
- time picker! 🔥
#chromedevsummit
![](https://pbs.twimg.com/media/EJMXimfUEAARPse.jpg)
![](https://pbs.twimg.com/media/EJMXja7UcAA-Xwe.jpg)
![](https://pbs.twimg.com/media/EJMXj7XUUAAkE0M.jpg)
![](https://pbs.twimg.com/media/EJMXmvMVUAAc8N0.jpg)
- color picker (with high contrast via media query forced colors)
#chromedevsummit
![](https://pbs.twimg.com/media/EJMYJGHVUAEVVjI.jpg)
![](https://pbs.twimg.com/media/EJMYLQGUYAE6JQm.jpg)
![](https://pbs.twimg.com/media/EJMYLxAUEAE_yuC.jpg)
![](https://pbs.twimg.com/media/EJMZ-bAUwAAu7cv.jpg)
#chromedevsummit
![](https://pbs.twimg.com/media/EJMa2K8U4AE7c4p.jpg)
github.com/MicrosoftEdge/…
#chromedevsummit
![](https://pbs.twimg.com/media/EJMduxGVAAIVf4Z.jpg)
#chromedevsummit
![](https://pbs.twimg.com/media/EJMhjAWVAAI0i5-.jpg)
![](https://pbs.twimg.com/media/EJMhjiGVAAE7KTr.jpg)
- implicit cashing
- threads (Chrome 74+)
- feature detection (github.com/GoogleChromeLa…)
- SIMD (mediapipe.page.link/web)
#chromedevsummit
![](https://pbs.twimg.com/media/EJM58B6U4AAhne5.jpg)
![](https://pbs.twimg.com/media/EJM58tRUcAQ-TCA.jpg)
![](https://pbs.twimg.com/media/EJM59XEUEAA43gq.jpg)
github.com/WebAudio/web-a…
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJNbQtvUcAAIFQR.jpg)
To migrate you'll need:
• background context changes
• host permission changes
• remotely hosted code restrictions
• network requests modification changes
bit.ly/mv3-migration
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJNxcZqU4AAdy-w.jpg)
![](https://pbs.twimg.com/media/EJNxc92UEAAU8YT.jpg)
![](https://pbs.twimg.com/media/EJNxdeTUEAAxIBD.jpg)
github.com/WICG/raw-clipb…
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJNy2U1UEAAjL5-.jpg)
- Googlebot is evergreen (up to date)
- do NOT detect bot by user agent (it will change)
- lazy loading is supported 🔥
- shadow DOM is supported too
- there is special api for high res images
- Structured data bit.ly/rich-results-g…
#ChromeDevSummit
![](https://pbs.twimg.com/media/EJN35HhUUAAhRjp.jpg)
![](https://pbs.twimg.com/media/EJN353LU8AEEtp-.jpg)
![](https://pbs.twimg.com/media/EJN36PIU4AEy6Ak.jpg)
![](https://pbs.twimg.com/media/EJN7KXpW4AA_uoc.jpg)