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

chrome 105 元素容器 媒体查询

card-container {
  container-type: inline-size;
}

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

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

chrome 105 CSS :has() pseudo-class

p:has(span) {
  /* magic styles */
}

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

chrome 104 屏幕宽度媒体查询

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}
It can be written like this:

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

chrome 103 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 });

chrome 101 hwb() color notation

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

chrome 99 CSS Cascade Layers

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

chrome 99 显示 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 Opting out of auto-dark themes on Android

<meta name="color-scheme" content="only light">

:root {
  color-scheme: only light;
}

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

chrome 97 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);

chrome 97 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...
}

chrome 95 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 93 CSS Module Script

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

chrome 93 是否扩展屏幕

const isExtended = window.screen.isExtended;

chrome 91 选择文件夹 选择文件 先泽保存文件

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

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

chrome 90 溢出剪切

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

chrome 88 长宽比例

.square {
  aspect-ratio: 1 / 1;
}

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

chrome 86 css :focus-visible

获取焦点 并且是可见的

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

chrome 85 设置和修改 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,
});

chrome 85 String.replaceAll

'hello world'.replaceAll('l', 'L');

chrome 81 Web NFC

const reader = new NDEFReader();

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

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