chrome 新功能
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