跳到主要内容

Chrome Version

versiondatenotes
Chrome 122zstd
Chrome 121EditContext
Chrome 1202023-12-29
Chrome 119
Chrome 118
Chrome 117
Chrome 116
Chrome 115
Chrome 114popovertarget,popover
Chrome 113
Chrome 112
Chrome 111
Chrome 110<popup>
Chrome 109
Chrome 108
Chrome 107
Chrome 106
Chrome 1052022-08-30Container Query, :has, import.meta.resolve, HEVC
Chrome 104
Chrome 103Local Font Access
Chrome 1022022-05-24DNS HTTPS, Navigation
Chrome 101
Chrome 1002022-03-29
Chrome 99OPFS, @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
提示
警告
  • 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​

  • URL interop 2023

Interop 2023​

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 123​

  • import with
    • import data from 'data.json' with {type:'json'}
    • Chrome 91 增加的 import assert
  • pagereveal 事件
  • 支持 zstd
  • CSS
    • align-content 支持 block, list-item, table-cell
      • 不再需要 flex 或者 grid 也能方便 center 了
    • 颜色函数 - light-dark
    • text-spacing-trim
      • 主要用于 CJK 的括号等，让括号之类的变窄，更好看
    • field-sizing
      • 让输入内容自动调整输入框的大小
      • textarea

Chrome 122​

  • navigator.clipboard.read({ unsanitized: ['text/html'] })
    • 读取未经过清理的剪贴板内容
  • Iterator helper
    • iterator 增加 map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every, find
    • Iterator.from(object)
  • Set methods
    • Set 增加 intersection, union, difference, symmetricDifference, isSubsetOf, isSupersetOf, isDisjointFrom
  • Storage Buckets API

Chrome 121​

  • Array.fromAsync
  • EditContextAPI
  • HTMLSelectElement.showPicker()
    • 手动 select 的 option popover
  • ClipboardItem.supports('text/html')
    • 检测 ClipboardItem 支持的类型
    • 以前需要尝试写入
  • CSS
    • font-palette 支持动画
    • scrollbar-color
    • scrollbar-width
    • ::spelling-error - 拼写错误
    • ::grammar-error - 语法错误

Chrome 120​

Chrome 119​

Chrome 118​

Chrome 117​

Chrome 116​

  • AbortSignal.any()
  • BYOB support for Fetch
  • CSS Motion Path
  • Display and content-visibility animations
  • Document picture-in-picture

Chrome 115​

Chrome 114​

Chrome 113​

  • WebGPU
  • CSS
    • media - overflow-inline, overflow-block
    • media update - print, slow, fast
    • image-set
    • Linear easing - linear()
  • Fetch: Headers.getSetCookie()
  • Storage Access API
    • for iframe
    • document.hasStorageAccess()
    • document.requestStorageAccess()

Chrome 112​

Chrome 111​

  • CSS
    • oklch - 比 rgb,hsl 多 30% 颜色
    • baseline-source
    • CSS Color Module Level 4 and color-mix()
    • CSS Root Font Units: 'rex', 'rch', 'ric', 'rlh'
    • CSS Selectors 4 Pseudo-Class :nth-child(an + b of S)
    • CSS Trigonometric functions
    • font-variant-alternates and the @font-feature-values at-rule
    • Style Container Queries for CSS Custom Properties
  • Javascript
    • String.prototype.isWellFormed, toWellFormed
  • DOM
    • View Transitions API
  • Media
    • WebRTC Scalable Video Coding extensions

Chrome 110​

Chrome 109​

  • Anonymous iframes
    • COEP credentialless
  • CSS
    • lh 长度单位
    • hyphenate-limit-chars property
  • Private State Token API
    • propagating user signals across sites
  • Snap border, outline and column-rule widths before layout

Chrome 108​

  • Federated Credentials Management - WebID
  • FileSystemHandle::remove()
  • ContentVisibilityAutoStateChanged event
  • CSS
    • break-after, break-before, break-inside
    • Overflow for replaced elements
    • CSS Values and Units Module Level 4: Small/Large/Dynamic/Logical viewport units
  • LayoutNG printing
  • Variable COLRv1

Chrome 107​

  • HEVC
  • CSS
    • grid-template interpolation
  • <form rel="noreferrer">

Chrome 106​

  • CSS
    • ic 长度单位 - CJK 文字单位
  • Intl.NumberFormat v3

Chrome 105​

  • CSS
    • Container Query
    • :has
    • :modal
  • ESM import.meta.resolve()
  • fetch() 上传流
  • Federated Credentials Management/FedCM/WebID
  • script,style,link - blocking=render - 避免 FOUC
  • Writable directory prompts for the File System Access API
    • showDirectoryPicker 可以请求返回一个 可写 的目录
  • Sanitizer API MVP - https://web.dev/sanitizer/ 
// Sanitizer API
$div.setHTML(
  `<em>hello world</em><img src="" onerror=alert(0)>`,
  new Sanitizer({
    allowElements: ['b', 'em'],
    allowAttributes: { style: ['span'] },
  }),
);

Chrome 104​

  • CSS
    • object-view-box
    • visual-box on overflow-clip-margin
  • Media Queries Level 4 Syntax & Evaluation
  • Region Capture - 部分截取媒体流
    • CropTarget.fromElement()
    • cropTo
  • Multi-Screen Window Placement: Fullscreen Companion Window
  • Web Custom formats for Async Clipboard API

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
  • Local Font Access - https://web.dev/local-fonts
  • deflate-raw
  • Speculation Rules - 探测可预加载的 URL
  • Trial
    • Multi-Screen Window Placement: Fullscreen Companion Window
    • Focusgroup

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