跳至正文
Wener Notes

Chrome Version

约 15 分钟阅读
标签：版本
versiondatenotes
Chrome 131Direct Sockets API
Chrome 1302024-10-09
Chrome 1252024-05-08css anchor
Chrome 123WebSocketStream
Chrome 123css field-sizing
Chrome 122zstd
Chrome 121EditContext
Chrome 1202023-12-29
Chrome 119
Chrome 118
Chrome 117@starting-style
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,
, 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
  • 参考

Versions

Chrome 145

Chrome 137

  • CSS if()
  • CSS reading-flow, reading-order
  • Ed25519 in Web Cryptography
  • Canvas Floating Point Color Types
    • CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, ImageData
    • 高精度、高动态范围颜色

Chrome 136

  • Explicit Compile Hints with Magic Comments
    • //# allFunctionsCalledOnLoad
  • H265 (HEVC) codec support in WebRTC

Chrome 135

html
<button commandfor="mypopover" command="toggle-popover">Toggle the popover</button>
<!-- popover 内置 command -->
<div id="mypopover" popover>
  <button commandfor="mypopover" command="hide-popover">Close</button>
  Popover content
</div>
html
<!-- 自定义 command 处理 -->
<button commandfor="my-img" command="--rotate-left">Rotate left</button>
<button commandfor="my-img" command="--rotate-right">Rotate right</button>
<img id="my-img" src="photo.jpg" alt="[add appropriate alt text here]" />
JavaScript
const myImg = document.getElementById('my-img');

myImg.addEventListener('command', (event) => {
  if (event.command === '--rotate-left') {
    myImg.style.rotate = '-90deg';
  } else if (event.command === '--rotate-right') {
    myImg.style.rotate = '90deg';
  }
});

Chrome 134

  • 自定义 <select> 元素
  • Dialog light dismiss
    • <dialog closedby=none|closerequest|any>
    • closerequest - ESC 或 close trigger
    • any - closereques+点击外部 - 类似于 popover=auto
  • Explicit resource management
  • fetchLater API
    • 用于发送监控数据
  • highlightsFromPoint API
    • CSS.highlights.highlightsFromPoint(mouseX, mouseY)
  • LLM-powered on-device detection of abusive notifications on Android
  • Support Web Locks API in Shared Storage
    • worklet 环境支持 navigator.locks.request
    • { withLock: <resource>} 选项

Chrome 133

  • Animation.overallProgress
  • Atomics.pause
  • CSS
    • Scroll State Container Queries
      • container-type: scroll-state
      • @contaner scroll-state(stuck: top){}
    • text-box, text-box-trim, text-box-edge
  • DOM State-Preserving Move
    • moveBefore
    • iframe 保留加载状态
    • 保留 focus
    • popover, 全屏, 模态对话框 依然开启
    • 保留 CSS transition 和 动画
    • React 目前支持 moveBefore
  • FileSystemObserver interface
    • 监听文件系统变化
  • popover=hint
    • 实现类似 tooltip 的效果
    • 之前支持 auto|manual
  • ESM Multiple import maps

Chrome 132

  • CSS Anchor Positioning: allow anchor-size() in inset and margin Properties
  • Device Posture API
  • Dialog Toggle Events
    • newState=open|close
    • 之前是检测 open 属性
  • MediaStreamTrack Element Capture
  • fetch Request,Response .bytes()
    • 返回 Uint8Array
  • File System Access for Android
  • Keyboard-focusable scroll containers

Chrome 131

Chrome 130

Chrome 129

  • Intl.DurationFormat
  • scheduler.yield()
    • 让长时间运行的任务让出时间片
    • mdn Scheduler
      • postTask, Chrome 94+

Chrome 128

  • Isolated Web Apps
    • by admin policy on enterprise-managed ChromeOS devices
  • Promise.try
  • CSS zoom

Chrome 127

  • CSS
    • font-size-adjust
      • based on the height of lowercase letters rather than the height of capital letters.

Chrome 125

Chrome 124

JavaScript
const wss = new WebSocketStream(url, {
  // 扩展协议选择
  protocols: ['chat', 'chatv2'],
  // 避免长时间 handshake
  signal: AbortSignal.timeout(1000),
});
const { readable, writable, protocol, extensions } = await wss.opened;
const reader = readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  await process(value);
}
//
wss.close({ closeCode: 4000, reason: 'Game over' });
const { closeCode, reason } = await wss.closed;

Chrome 123

  • import with
    • import data from 'data.json' with {type:'json'}
    • Chrome 91 增加的 import assert
  • pagereveal 事件
  • 支持 zstd
  • CSS
    • light-dark(a,b) - 根据 prefers-color-scheme 选择 a 或 b
    • align-content 支持 block, list-item, table-cell
      • 不再需要 flex 或者 grid 也能方便 center 了
    • text-spacing-trim
    • field-sizing=content
      • 让输入内容自动调整输入框的大小
      • textarea

Chrome 122

  • navigator.clipboard.read({ unsanitized: ['text/html'] })
    • 读取未经过清理的剪贴板内容
    • iterator 增加 map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every, find
    • Iterator.from(object)
    • 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

  • CSS
    • :user-valid,:user-invalid
      • 类似于 :valid, 但是在用户交互过后
    • Relative Color Syntax (RCS)
  • HTML
    • select 内可以有 hr 来分割选项
  • WebAssembly Garbage Collection (WasmGC)
  • Read Chrome device attributes
  • WebSQL
  • Sanitizer API

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
      (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
    • ArrayBuffer.prototype.{resize,resizable,maxByteLength}
  • 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
  • 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 - web.dev/sanitizer
JavaScript
// 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 - web.dev/local-fonts
  • deflate-raw
  • Speculation Rules - 探测可预加载的 URL
  • Trial
    • Multi-Screen Window Placement: Fullscreen Companion Window
    • Focusgroup

Chrome 102

  • Navigation API - window.navigation -
    • 焦点管理
    • 提升 history 体验
  • DNS HTTPS 记录触发跳转 HTTP->HTTPS
  • Capture Handle
  • File Handling - Web 定义有能力处理指定类型文件
  • Secure Payment Confirmation API V3
  • inert 属性
    • 性能优化
    • polyfill wicg-inert
    • Temporarily offscreen/hidden content
    • On-screen but non-interactive content - pointer-events: none，user-select: none

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 -

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 -
  • Intl Enumeration API
  • Intl.Locale
  • New Canvas 2D API -

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
    • 类似 WebSocket 和 RTCDataChannel 的角色
    • 期望未来替代 WebSockets
    • 基于 HTTP/3 UDP
    • web.dev/webtransport

Chrome 96

Chrome 95

Chrome 94

Chrome 93

  • CSS Flexbox: alignment start, end, self-start, self-end, left, right
  • CSS module scripts
    • import styleSheet from "./styles.css" assert { type: "css" };
  • Error.cause
  • meta[name="theme-color"]
  • Object.hasOwn
    • Object.hasOwn(o,'key') 等同于 o.hasOwnProperty('key')
  • 从新添加 contain:strict 和 contain:content
  • WebOTP API: cross-device support
  • User Preference Media Features Client Hints Headers
    • http 请求带客户端的 prefers-color-scheme
    • Sec-CH-Prefers-Color-Scheme: dark
  • DevTool
    • 预览 Web bundle - chrome://flags#enable-experimental-web-platform-features
    • 格式化响应 JSON

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 右键查看计算后的值
JavaScript
// 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
html
<!-- 声明式 Shadow DOM -->
<template shadowroot="open">
  <!-- 只影响内部 -->
  <style>
    button {
      color: seagreen;
    }
  </style>
  <link rel="stylesheet" href="/comicsans.css" />
  <button>
    <slot></slot>
  </button>
</template>
JavaScript
// 获取包含 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()
text
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
    (),
    ()
  • CSS 复杂
    () - 例如 :not(.a + .b .c)
  • CSS aspect-ratio
  • Remove Flash Player

Chrome 87

JavaScript
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/#:~
      =foo)
  • CSS Selectors 4 Pseudo-Class
    • 避免隐藏全部 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
    • #:~
      =
    • 滚动到文字
JavaScript
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
    • 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

关联信息

反向链接、本文链接的其他页面和外部资料。

反向链接

  • 系统升级
    笔记 · Chrome 版本变化

    避免常见 CVE · 例如: 借助 quay 扫描版本 CVE https://quay.io/repository/wener/base?tab=tags · 避免手生 - 太久不升级就再也不敢升级 · 小版本升级可解决一些 Bug 也值得升级

参考资料

GitHub24 条
Wikipedia1 条
标准文档1 条
  • RFC 7616datatracker.ietf.org/doc/html/rfc7616
    RFC

    IETF Request for Comments standard document.

其他外链93 条
最近更新commit 11c4f58编辑

Chrome URLs

上一页

Chromium

下一页