chrome 新功能

2022-09-23 23:23  1555人阅读  评论 (0)
Tags: chrome

https://developer.chrome.com/blog/new-in-chrome-105/

chrome 122 2024-02-20

  • 使用 Storage Buckets API 改善存储空间管理。
  • 我们在“性能”面板中对开发者工具进行了改进。
  • 使用新的 Async Clipboard API unsanitized 选项，在复制和粘贴 HTML 时可选择保留准确性

chrome 121 2024-01-23

  • 使用 font-palette 动画和其他 CSS 更新为文本添加独特的风格。
  • 我们对 Speculation Rules API 进行了改进。
  • 您可以在源试用中试用 Element Capture API。

chrome 120 2023-12-05

  • 使用 CloseWatcher API 可以在处理关闭请求时获得一致的体验。
  • 使用 <details> 元素轻松实现手风琴式折叠模式。
  • 权限政策违规行为报告现已推出。

chrome 119 2023-10-31

  • 已存储的 Cookie 的失效日期上限更新
  • CSS 新增了伪类、相对颜色语法等。
  • 围栏框架增加了一些改进，例如广告尺寸宏等。
  • 有一个源试用，该试验向 window.open() JavaScript API 添加了 fullscreen windowFeatures 参数，以允许调用方直接以全屏模式打开弹出式窗口。

chrome 118 2023-10-10

  • CSS @scope 规则
<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

不使用 @scope

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

使用 @scope

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}
@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}
  • WebUSB API 现已向由浏览器扩展程序注册的 Service Worker 公开，这样一来，开发者便可以在响应扩展程序事件时使用 API。

chrome 117 2023-09-12

  • 通过三项新的 CSS 属性，可以轻松添加流畅的进入和退出动画

  • 数组分组

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

chrome 116 2023-08-15

  • 使用 Document Picture in Picture API 提高用户工作效率。

通过 Document Picture-in-Picture API，你可以打开始终处于打开状态的窗口，其中可以填充任意 HTML 内容。

  • 现在，您可以更轻松地在开发者工具中调试缺失的样式表

chrome 115 2023-07-13

  • 使用 ScrollTimeline 和 ViewTimeline 创建滚动驱动的动画，从而改善用户体验。

动画的进度使用滚动条进度, animation-timeline: scroll();

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}
  • 围栏框架可与其他 Privacy Sandbox API 搭配使用，以嵌入相关内容，同时防止不必要的上下文共享。
  • 借助 Topics API，浏览器可与第三方分享与用户兴趣相关的信息，同时保护隐私。

chrome 114 2023-05-30

  • CSS text-wrap: balance 可用于改进文本布局。
  • CHIPS：具有独立分区状态的 Cookie。。
  • 利用 Popover API，让弹出式窗口变得空前简单。

chrome 113 2023-05-03

  • WebGPU 现已推出，它可在网页上实现高性能 3D 图形和数据并行计算。
Babylon.js:：已提供全面的 WebGPU 支持。
PlayCanvas：已宣布初步支持 WebGPU。
TensorFlow.js:：支持大多数运算符的 WebGPU 优化版本。
Three.js:：WebGPU 支持正在开发中。
  • Devtools 现在可以替换网络响应标头。
  • First Party Set 是 Privacy Sandbox 的一部分，可让组织声明即将发布相关网站

First-Party Set (FPS) 即将发布稳定版。First Party Set 是 Privacy Sandbox 的一部分。组织可通过它来声明网站之间的关系，以便浏览器允许出于特定目的对第三方 Cookie 进行有限的访问。

chrome 112 2023-04-04

  • CSS 对嵌套的支持 CSS support for nesting

之前

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

之后

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

chrome 111 2023-03-07

  • 使用 View Transitions API 在单页应用中创建美观的转场。
  • 借助对 CSS 颜色级别 4 的支持，让颜色更上一层楼。
  • 在样式面板中探索新工具，充分利用新的颜色功能。

使用 color-mix()（用于将某种颜色的百分比混合到另一种颜色）时

chrome 110 2023-02-07

  • :picture-in-picture 画中画伪类
  • 在清单中使用 launch_handler 设置 Web 应用的启动行为
  • 在 iframe 中使用 credentialless 属性来嵌入未设置跨源嵌入器政策的第三方内容

chrome 109 2023-01-10

  • Android 版 Origin Private File System API

源私有文件系统 (OPFS) 是 File System Access API 的一部分，是网页源专属的存储端点。

  • CSS 中的新功能

lh CSS 单元等于使用它的元素的行高属性的计算值。这样一来，可以为 textarea 指定与预期文本的行数相同的高度。

  • MathML Core 支持

chrome 108 2022-11-29

  • 使用新的视口大小单位 dvh lvh svh
  • COLRv1 现在支持可变字体
  • FileSystemSyncAccessHandle 方法现在是同步方法

chrome 107 2022-10-25

  • Screen Capture API 中的新属性
  • 识别阻塞渲染的资源
  • PendingBeacon API 源试用

chrome 106 2022-09-27

  • 新单位ic

width: 10ic; 能容纳10个全角字符宽度 或20个半角字符.

chrome 105 2022-08-30

  • 元素容器 媒体查询
card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}
  • CSS :has() pseudo-class
p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

chrome 104 2022-08-02

  • 使用区域拍摄指定剪裁区域

现在，在使用 getDisplayMedia() 捕获当前标签页时，您可以使用区域捕获来指定剪裁区域。

如需使用该元素，请选择要共享的元素，然后基于该元素创建新的 CropTarget。接下来，调用 getDisplayMedia() 以开始屏幕共享。这会提示用户授予共享屏幕的权限。然后，调用 track.cropTo() 并传递之前创建的 cropTarget。

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);
  • 屏幕宽度媒体查询

之前

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

现在

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

chrome 103 2022-06-21

  • 资源预加载 和 HTTP 103 响应码
<link as="font" crossorigin="anonymous" href="..." rel="preload">
<link as="font" crossorigin="anonymous" href="..." rel="preload">
<link href="cdn.example.com" rel="preconnect">
````

HTTP 103 Early Hints


- 本地字体访问权限 API

```js
// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

然后

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);
  • Easier Timeouts with AbortSignal.timeout()
const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });
  • Element.isVisible() 可告知您某个元素是否可见

chrome 102 2022-06-09

  • 已安装的 PWA 可以注册为文件处理程序，以便用户直接从磁盘打开文件。
  • 借助 inert 属性，您可以将 DOM 的某些部分标记为 inert。
  • 借助 Navigation API，单页应用可以更轻松地处理网址的导航和更新

chrome 101 2022-05-03

  • hwb() color notation
h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

chrome 100 2022-03-29

  • chrome 100 有一个三位数的版本号
  • 漫步记忆，庆祝 #100CoolWebMoments 自 Chrome 首次发布以来。
  • 用户代理字符串发生了一些重要变化。
  • 借助 Multi-Screen Window Placement API，您可以枚举连接到用户计算机的屏幕，并将窗口放置在特定屏幕上。

chrome 99 2022-03-01

  • CSS 级联层 CSS Cascade Layers
@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}
  • 显示 input color/date/time showPicker
const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

chrome 98 2022-02-01

  • 在 Android 设备上停用自动深色主题
<meta name="color-scheme" content="only light">

:root {
  color-scheme: only light;
}

.only-light, #my-element {
  color-scheme: only light;
}

chrome 97 2022-01-04

  • Web Transport 发送数据报文
const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);
  • Script type feature detection 脚本类型特征检测
if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}
  • 新的数组原型
Array.findLast
array1.findLastIndex

chrome 96 2021-11-16

  • 利用清单 id 属性，您可以为 PWA 指定唯一 ID。
  • 借助 protocol_handlers 属性，您可以在安装时自动将 PWA 注册为协议处理程序。
  • 通过优先级提示源试用，您可以指定下载资源的提取优先级。

chrome 95 2021-10-19

  • URLPattern 使用URLPattern路由
const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);

chrome 94 2021-09-21

  • <canvas> 元素的默认颜色空间现已在规范中正式定义为 SRGB，您可将其更改为 Display P3。
  • WebCodecs 是一种低级的全新方式，用于访问内置音频和视频编解码器，对于流式游戏、视频编辑器等而言非常重要。
  • WebGPU 开始进行源试用。

chrome 93 2021-08-31

  • CSS Module Script CSS 模块脚本
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
  • 是否扩展屏幕
const isExtended = window.screen.isExtended;

chrome 92

chrome 91 2021-05-26

  • 选择文件夹 选择文件 先泽保存文件

读写文件 https://web.dev/file-system-access/

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});
  • 从剪贴板读取文件
window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

chrome 90 2021-04-13

  • CSS 溢出剪切
.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

chrome 89 2021-03-02

  • WebHID、WebNFC 和 Web Serial 已完成源试用，现在提供稳定版。
  • 我们正在填补一些开发者用来规避 PWA 可安装性检查的漏洞。
  • 网络共享和网络共享目标在桌面设备上推出。
  • Chrome 现在允许在 JavaScript 模块中使用顶级 await

chrome 88 2021-01-19

  • 长宽比例
.square {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .square {
    height: 4rem;
    width: 4rem;
  }
}

chrome 87 2020-11-17

  • 你现在可以在支持此功能的摄像头上控制平移、倾斜和缩放。
  • 范围请求和 Service Worker 不需要那么多的解决方法。
  • 字体访问 API 开始进行源试用。
// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    console.log(`${metadata.family} (${metadata.fullName})`);
    // const sfnt = await metadata.blob();
    // makeMagic(metadata.family, sfnt);
  }
} catch (err) {
  console.error(err);
}

chrome 86 2020-10-06

  • File System Access API 现已发布稳定版。
  • Web HID

  • Multi-screen Window Placement API 新增了源试用。

  • css :focus-visible

获取焦点 并且是可见的

button:focus-visible {
  outline: 4px dashed black;
}

chrome 85 2020-08-25

  • 设置和修改 css 变量

Separate JavaScript file (Chromium 78)

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

Included in CSS file (Chromium 85)

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}
  • Origin Trial: Streaming requests with fetch()
fetch body pipe

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});
  • String.replaceAll
'hello world'.replaceAll('l', 'L');

chrome 84 2020-07-14

  • 用户可以通过应用图标快捷方式在您的应用中启动常见任务。
  • Web Animations API 增加了对许多以前不受支持的功能的支持。
  • 唤醒锁定可防止屏幕变暗或锁定。
  • Content Indexing API 有助于显示可离线访问的内容。
  • 我们提供了针对空闲检测和 Web Assembly SIMD 的新源试用。
  • 同网站 Cookie 政策变更即将重新开始发布。

chrome 83 2020-05-19

  • 表单控件更新

  • 有使用 measureMemory() 测量内存

chrome 82

chrome 81 2020-04-07

  • 应用图标标记

设置应用图标标记后，您可以轻松以不易察觉的方式来通知用户某些新 activity 可能需要用户注意，或者指明少量信息，例如未读计数。

  • WebXR 针对增强现实的命中测试现已在浏览器中可用

  • Web NFC

const reader = new NDEFReader();

async function startScan() {
  await reader.scan();
  reader.onreading = (e) => {
    console.log(e.message);
  };
}

chrome 80 2020-02-04

  • 可选链接

之前

let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

现在

const nameLength = db?.user?.name?.length;

chrome 78 CSS Properties and Values API

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

chrome 77 The formdata event

form表单转formdata的时候

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

chrome 77 Native lazy loading 懒加载

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

chrome 76 暗黑模式

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

chrome 75 Share files with the Web Share API web的文件分享

const webShareAvailable = {
  links: 'share' in navigator,
  files: 'canShare' in navigator,
};

if (webShareAvailable.files) {
  const shareData = { files: filesArray };
  if (navigator.canShare(shareData)) {
    shareData.title = 'Squooshed files.';
    navigator.share(shareData)
      .then(...)
      .catch(...);
  } else {
    // File sharing not supported
  }
}

chrome 71 CSS text-underline-position

.left {
  text-underline-position: left;
}

chrome 65 display: contents

display: contents
取消元素的盒子模型 像text一样显示

chrome 64 import.meta

可以知道js文件的url路径了 import.meta.url
这样就可以根据url路径 家在相对路径的图片和css了

chrome 63 Dynamic module imports 动态引入js文件

https://jakearchibald.com/2017/es-modules-in-browsers/
https://ponyfoo.com/articles/es6-modules-in-depth

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

chrome 63 Over-scroll behavior

https://developer.chrome.com/blog/overscroll-behavior/

chrome 62 网络类型

console.log(navigator.connection.type);
> wifi

console.log(navigator.connection.effectiveType);
> 4G

chrome 61 JavaScript Modules

<script type="module">
  import {addText} from './utils.js';
  addText('Modules are pretty cool.');
</script>

chrome 61 Web Share API

navigator.share({
  title: document.title, text: 'Hello',
  url: window.location.href
}).then(() => {
  console.log('Successful share');
});

chrome 59 Image capture API

https://developer.chrome.com/blog/imagecapture/

chrome 56 Web Bluetooth API

Web Bluetooth API

chrome 56 CSS position: sticky; 吸顶

h3 {
  /* Element will be 'fixed' when it ... */
  position: sticky;
  /* ... is 10px from the top of the viewport */
  top: 10px;
}

chrome 55 Pointer Events

Pointer Events

chrome 55 async await

async await

chrome 54 Custom elements

Custom elements

chrome 54 BroadcastChannel API

BroadcastChannel API
js es module 示例 >>
<< fibjs 生成验证码
豫ICP备09035262号-1