技术周刊 2020-11-23：Safari 14 首先默认支持 HTTP/3

• 随着 macOS Big Sur 的推出，Safari 14 发布：
  • • DOM 层面支持了 translate 属性以标识内容是否可以用于自动翻译；
    • 支持了 HTTP/3：
      • Safari 成为首个支持 HTTP/3 的浏览器；
      • Chrome 正在进行小流量测试中，可以通过 --enable-quic 及 --quic-version=h3-29 指令打开相关支持；
      • Firefox 需要 network.http.http3.enabled 打开相关支持；
      • HTTP/3 协议依然在草案状态，目前最新版本是 h3-31；
    • 支持了 WebP 图片格式，此前 Firefox 65+、Chrome 32+ 均已支持；
    • 可以经由 WebAuthn 使用 Face ID 或 Touch ID 登入网站了；
    • CSS 层面，支持了 image-orientation 属性和 :where()、:is() 选择器
    • JS 层面，支持了 optional chaining 和 BigInt；
    • 不再支持 Flash；
    • 支持 Safari Web Extensions，兼容了 Chrome 插件；
    • 对 iframe 元素和 overflow: scroll 的滚动体验进行了优化；
    • IndexedDB、for-of 操作、Promise、cookie 读写、delete 操作也进行了优化；
  • 隐私安全：
    • 跨域资源的 Cookie 完全被禁用，除非经由 Storage Access API 显式获取用户的同意；
    • 第三方 CNAME 的域名 Cookie 最多可设置 7 天有效期。

• Firefox 83 发布：
  • 支持了锥形渐变 conic-gradient()；
  • DevTools 会显式展现可滚动元素了。

• Chrome 87 发布：
  • 可以在 JavaScript 层面控制摄像头的平移、倾斜和缩放了；
  • Service Worker 支持了 HTTP range requests；
  • 获取本机可用字体列表的 Font Access API 进入了初期试用。

• Chrome 意欲实现 Self-profiling API （自动运行时报告生成）:
  • 允许开发者每隔一段时间采样运行情况；
  • 根据定义，开启此功能需要通过 Permissions Policy 显式获得用户对 js-profiling 操作的许可。

• HTTP Archive 最近正在整理 2020 年网络流量报告，从已放出的 CSS 数据我们可以得到一些结论：
  • 开启 CSS Source Map 的部分占 15% 左右；
  • 使用了 CSS 变量的站点桌面端占 14%，在移动端占 19%；
  • CSS 变量造成 2 层以上级联关系的占 2%，最多的站点到达了 21 层；
  • 单页面中最高选择器权重的中位数是 1 个 ID 选择器及 3 个 CSS 类选择器，最多统计到的权重是 1065 个 ID 选择器；
  • 最受欢迎的长度单位前三名是：px、<number>、%；
  • Flexbox 使用率今年占桌面端的 63% 和移动端的 65%，比去年涨了约 50%；
  • CSS-in-JS 在网站中的使用率约占 2%。

• mermaid 允许我们使用一种类似 markdown 的格式来绘制控制流图、时序图和甘特图。

• 使用 WebGL + ThreeJS 能做到什么？这里有一个玉镇纸 Demo，使用了屏幕空间折射（Screen Space Refraction）和深度剥离（Depth Peeling）实现。

• Adobe XD 发布了 VSCode 插件，允许开发者直接引用在 Adobe XD 中定义的设计系统变量。

• 如果你想把 node 库改为 deno 库，denoify 可能能帮助到你。

编辑：承虎 & 审阅：一丝