New features of Web Tech 2023 in Action All In One
New features of Web Tech 2023 in Action All In One
- The
dialog
element Individual
CSS transform properties- New
viewport units
Deep copy
in JavaScript- The
:focus-visible
pseudo-class - The
TransformStream
interface
https://www.youtube.com/watch?v=x9rh0Du4Czg&t=1s
https://web.dev/baseline-features/
demos
<dialog id="d">
<form method="dialog">
<p>Hi, I'm a dialog.</p>
<button>ok</button>
</form>
</dialog>
<button onclick="d.showModal()">
Open Dialog
</button>
https://web.dev/building-a-dialog-component/
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
/* 等价于 */
.target {
transform: translateX(50%) rotate(30deg) scale:(1.2);
}
使用独立
的属性,可以简化
CSS 的动画代码量
,更方便灵活
https://web.dev/css-individual-transform-properties/
/* svh / lvh */
https://web.dev/viewport-units/
const original = {id: 0, prop: {name: "Tom"}}
/* Old hack */
const deepCopy = JSON.parse(JSON.stringify(original));
/* New way */
const deepCopy = structuredClone(original);
https://web.dev/structured-clone/
/* focus with tab key */
:focus-visible {
outline: 5px solid pink;
}
/* mouse click */
:focus:not(:focus-visible) {
outline: none;
}
https://web.dev/learn/css/focus/
gzip
// TransformStream
let responses = [
/* conjoined response tree */
];
let { readable, writable } = new TransformStream();
responses.reduce(
(a, res, i, arr) => a.then(() => res.pipeTo(writable, {
preventClose: i + 1 !== arr.length
})),
Promise.resolve(),
);
https://developer.mozilla.org/en-US/docs/Web/API/TransformStream
https://developer.chrome.com/articles/fetch-streaming-requests/
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
refs
https://web.dev/introducing-baseline/
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/17619165.html
未经授权禁止转载,违者必究!