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

Hi, I'm a dialog.

ok

Open Dialog

<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/

refs

https://web.dev/baseline/

https://web.dev/introducing-baseline/

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---