Skip to main content

Chrome Version

versiondatenote
Chrome 103
Chrome 102DNS HTTPS
Chrome 101
Chrome 1002022-03-29
Chrome 99@layer
Chrome 98
Chrome 97
Chrome 96
Chrome 952021-09-20
Chrome 94
Chrome 93
Chrome 92
Chrome 91
Chrome 902021-02-28
Chrome 89
Chrome 88
Chrome 87
Chrome 862020-10-06File System Access API
Chrome 86
Chrome 85
Chrome 84
Chrome 83
Chrome 81
Chrome 802019-12-05
Chrome 702018-08-29AV1
Chrome 602017-05-23
Chrome 492016-03-02last Windows XP, Vista; Mac OS X 10.6, 10.7, 10.8
Chrome 282013-07-09Blink
Chrome 12008-12-11
tip
caution
  • blocked ports
    • 989, 990 - FTPS
    • 10080, 554
      • NAT Slipstream 2.0 attack
      • samy.pl/slipstream/
    • 5060, 5061 - SIP
      • slipstream attack
    • 69, 137, 161, 1719, 1720, 1723, 6566
      • NAT Slipstream 2.0 attack
      • 1720 - H.323
  • 部分特性受 Feature-Policy/Permissions-Policy 控制
    • 需要服务端返回 Header 包含
    • 避免被 iframe 滥用
    • mdn Feature Policy
  • 外部设备
    • SerialPort, HIDDevice, WebUSB, WebMIDI, WebBluetooth, GamePad

Interop 2022

  • 2022 Focus Areas
    • Cascade Layers - @layer
    • Collor Spaces and Functions - accent-color, color-schema
    • Containment
    • Dialog Element
    • Forms
    • Scrolling - scroll snap, scroll-behavior, overscroll-behavior
    • Subgrid
    • Typography and Encodings - font-variant-alternates, font-variant-position, ic
    • Viewport Units - {d,l,s}v{h,w,min,max}
    • Web Compat
  • 2021 Focus Areas
    • Aspect Ratio
    • Flexbox
    • Grid
    • Sticky Positioning
    • Transforms
  • 2022 Investigation
    • Editing, contentEditable, execCommand
    • Pointer and Mouse Events
    • Vieport Measurement
  • 参考

Chrome 104

  • script,style,link - blocking=render - 避免 FOUC
  • Media Queries Level 4 Syntax & Evaluation

Chrome 103

  • AbortSignal.timeout
  • Block external protocol in sandboxed iframe
    • 恢复 allow-top-navigation-to-custom-protocols
      • allow-popups
      • allow-top-navigation
      • allow-top-navigation-with-user-activation
  • Focusgroup
  • Local Font Access - https://web.dev/local-fonts
  • Multi-Screen Window Placement: Fullscreen Companion Window

Chrome 102

Chrome 101

  • MediaCapabilities API for WebRTC
  • Priority Hints - fetchpriority=auto|low|high
  • @font-palette-values

Chrome 100

  • AbortSignal.prototype.throwIfAborted
  • Capability Delegation API - 类似 <iframe allow>
  • Digital Goods API - Android Play Billing API
  • Hints delegation for third-party content - <meta name="accept-ch" content="sec-ch-width=( https://foo.bar )">
  • Multi-Screen Window Placement - https://github.com/w3c/window-placement

Chrome 99

  • CSS
    • @layer
    • cacl 允许 infinity,-infinity,NaN
    • text-emphasis: text-emphasis-{color,position,style}
  • ShadowDOM
    • adoptedStyleSheets: FrozenArray -> ObservableArray
      • 可以 push 而不需要整个替换
  • HTMLInputElement.showPicker - 显示 input 的选择器
  • Handwriting Recognition API - WICG/handwriting-recognition
  • Intl Enumeration API
  • Intl.Locale
  • New Canvas 2D API - https://github.com/fserb/canvas2d

Chrome 98

  • CSS
    • color-scheme: only light
  • self.structuredClone
  • COLRv1 Color Gradient Vector Fonts
  • FS
    • FileSystemHandle::Remove - 之前需要获取到 Parent 来删除

Chrome 97

  • JavaScript Array, TypedArray: findLast, findLastIndex
  • HTMLScriptElement.supports(type)
  • WebTransport

Chrome 96

Chrome 95

  • Cookie size limits
    • RFC 6265
    • 总 4K, 单个最大 1K
  • EyeDropper API - <input type=color> 支持屏幕取色
  • Note taking new note URL
  • Remove FTP support
  • URLPattern
    • URL 匹配接口
  • self.reportError()
  • DevTool
    • CSS 长度单位选择、滑动修改
    • 自定义属性会粗体优先显示

Chrome 94

Chrome 93

Chrome 92

  • Relative indexing method for Array, String, and TypedArrays
    • [1,2,3,4].at(-1) 返回 4
  • crypto.randomUUID() - 生成 UUIDv4
  • DevTool
    • CSS Grid editor
    • console 允许 const 重复定义
    • Elements iframe 右键详情
    • Network 新增 Wasm 资源类型
    • 实验 Puppeteer Recorder

Chrome 91

  • Class static initializer blocks
  • Clipboard: read-only files support
    • 剪切板支持读取文件
  • ES Modules for service workers
    • service worker 支持 ESM
  • GravitySensor API
  • Import Assertions
  • JSON Modules
    • 请求使用 cors + strict MIME type checking
  • WebAssembly SIMD
  • WebOTP API: cross-origin iframe support
  • WebSockets over HTTP/2
    • RFC 8441
  • DevTool
    • Performance 显示 Web Vitals
    • CSS scroll-snap 可视化
    • ArrayBuffer Memory inspector
    • Styles 右键查看计算后的值
// import 断言 - JSON Module
import json from './foo.json' assert { type: 'json' };

class C {
static s_field;
// 新支持
static {
this.s_field = doSomeInitialization();
}
}

Chrome 90

  • AV1 Encoder
  • AbortSignal in addEventListener
    • 可以更方便移除 listener
  • CSS overflow: clip, overflow-clip-margin
    • 完全禁止 scroll
  • Declarative Shadow DOM - 直接 HTML 定义 ShadowDOM
  • Protect application/x-protobuffer via Cross-Origin-Read-Blocking
  • DevTool
    • CSS flexbox 编辑器
    • Core Web Vitals overlay
    • Network Remote Address Space 列
    • fn.displayName -> fn.name
<!-- 声明式 Shadow DOM -->
<template shadowroot="open">
<!-- 只影响内部 -->
<style>
button {
color: seagreen;
}
</style>
<link rel="stylesheet" href="/comicsans.css" />
<button>
<slot></slot>
</button>
</template>
// 获取包含 shadowdom 的 HTML
const html = element.getInnerHTML({ includeShadowRoots: true, closedRoots: [] });

Chrome 89

  • SameParty cookie attribute
    • 限定允许的 cookie
    • 避免三方钓鱼
  • CSS ::target-text
    • style scroll-to-text fragments
  • CSS flow-relative Corner Rounding properties
    • border-*-radius
    • 新支持 逻辑角落定义 - border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
      • 映射为 physical
      • 受 writing-mode, direction, text-orientation 影响
    • 之前支持 物理 角落定义 top-left, bottom-left, top-right, bottom-right
  • FLoC - Federated Learning of Cohorts
  • Import maps
    • ESM Import 映射
  • Sec-CH-UA Client Hints
  • Top-level await
  • Web NFC
  • Web Serial API
  • Web Share API
  • Web Share API Level 2
  • Web Share Target
  • Web Share Target Level 2
  • WebHID - Human Interface Device
  • navigator.webdriver === false
    • 检测是否自动化
  • performance.measureUserAgentSpecificMemory()
GET /downloads HTTP/1.1
Host: example.site

Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
Sec-CH-UA-Mobile: ?0

Chrome 88

  • CSS :is(), :where()
  • CSS 复杂 :not() - 例如 :not(.a + .b .c)
  • CSS aspect-ratio
  • Remove Flash Player

Chrome 87

const segmenter = new Intl.Segmenter('zh', { granularity: 'word' });
// 输出 ['你好', '世界']
Array.from(segmenter.segment('你好世界')).map((v) => v.segment);
// 可用于优化 CPU 重场景
navigator.scheduling.isInputPending({ includeContinuous: true });

Chrome 86

  • well-known URL for changing passwords
    • /.well-known/change-password
  • beforematch 事件
    • find-in-page (ctrl+f)
    • element fragment navigation (example.com/#foo)
    • scroll-to-text navigation (example.com/#:~:text=foo)
  • CSS Selectors 4 Pseudo-Class :focus-visible
    • 避免隐藏全部 focus outlines,可以针对 a 和 button 设置 :not(:focus-visible) 隐藏 outline
    • 例如 给 button :focus-visible 样式只有在键盘 tab 过去的时候会显示,鼠标不会显示
  • Document-Policy: force-load-at-top
  • FetchEvent.handled
  • File System Access - 访问本地文件目录
  • Imperative Shadow DOM Distribution API
  • Intensive throttling of Javascript timer wake ups
  • DOM ParentNode.replaceChildren
  • registerProtocolHandler 包含 cabal, dat, did, dweb, ethereum, hyper, ipfs, ipns, ssb
  • Third-party origin trials
  • WebRTC Insertable Streams
  • Clipboard API 支持 async text/html
    • HTML is sanitized
  • document.fragmentDirective - scroll-to-text-fragment
    • #:~:text=
    • 滚动到文字
var portal = document.createElement('portal');
portal.src = 'http://example.com';
document.body.appendChild(portal);

window.onportalactivated = function (oldPortal) {};
// 替换当前页面
portal.activate();

Chrome 85

Chrome 84

  • Content Indexing API
  • CSS flexbox: row-gap, column-gap
  • JavaScript WeakReferences
  • JavaScript 私有 方法 和 accessors
  • Screen Wake Lock API
  • CSS appearance unprefixed
  • CSS ruby-position unprefixed
  • Web Animations API
  • WebOTP
    • navigator.credentials
    • 短信包含内容,自动验证 - 最后一行格式 @www.example.com #123456
    • https://web.dev/web-otp/
  • CSS revert 关键字 - 恢复属性

Chrome 83

  • CSS font-display: optional without relayout
  • CSS @supports selector() 特性检测
  • Barcode Detection API
  • CSS contain-intrinsic-size
    • 优化渲染
  • Cross-Origin-Embedder-Policy
  • Cross-Origin-Opener-Policy
  • ES Modules for shared workers
  • IndexedDB relaxed durability transactions

Chrome 81

  • CSS image-orientation property

Chrome 80

  • Compression Streams
  • Contacts API
  • ES Modules for dedicated workers
  • 移除 Custom Elements V0
  • 移除 HTML Imports
  • JavaScript optional chaining - o?.func()
  • JavaScript Nullish coalescing - a ?? b
  • Media Capabilities: decoding encrypted media
  • Periodic Background Sync
  • Scroll to Text Fragment - #:~:
  • 移除 Shadow DOM v0
  • SVG in favicons
  • WebAssembly Multi-Value
  • WebVR v1.1
  • Payments shipping address and contact info delegation
  • CSS line-break: anywhere
  • CSS overflow-wrap: anywhere