技术周刊 2021-04-15：2021最值得期待的新技术 JPEG XL、CSS 容器查询

前端快爆

• Chrome 90 正式发布，主要包含以下特性：
  • 支持 AV1 视频解码器，AV1 是开放媒体联盟（AOM）开发的开源、免版权费的视频格式，它比 H.265/264/VP9 在相同画质下有更高的压缩率，也就是同等带宽下可以传输更高清的画质。这也是 WebRTC 中使用的编码格式（推荐阅读 AV1 vs HEVC——WebRTC编解码器之争卷土重来？一）。此前 Firefox 67 已经支持。
  • CSS overflow 新增 clip 属性值，其效果与 hidden 类似，区别是 clip 还会禁止一切程序滚动，包括通过 DOM API 调整滚动位置。此外 clip 不会产生新的格式化上下文（Formatting context），如果希望同时建立格式化上下文（比如闭合浮动时），可以使用新的 display: flow-root。
  • CSS 纵横比属性 aspect-ratio 现在支持插值动画。
  • 剪切板 API 现在支持读取文件路径。
  • 禁用 HTTP、HTTPS、FTP 的 554 端口，以减缓 NAT Slipstream 2.0 攻击，Edge、Firefox、Safari 也均已禁用。
  • 支持声明式 Shadow DOM，可以直接在 <template> 元素中使用 shadowroot 属性创建 Shadow DOM。

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>
 

• 本期 Chrome 90 DevTools 的新功能，官方制作了中文视频介绍。

• Deno 1.9 发布，此版本包含诸多新功能、性能改进以及错误修复：

  • 全新的原生 HTTP/2 Web 服务器。
  • 使用 serde_v8 提升 Rust 性能。
  • Blob URL 支持和 fetch 改进。
  • LSP 中的目录自动补全功能。
  • 交互式权限提示。

• Chrome Canary 实验性支持了 JPEG XL 图片格式，使用 chrome://flags/#enable-jxl 开启。该格式（扩展名 .jxl）是 JPEG 委员会的下一代通用图像压缩编解码器，支持有损、无损压缩、动画以及 Alpha 透明度。（这里可以对比效果）。其主要特点有：

  • 有损压缩时：相同的视觉质量，比 JPEG 小约 60％。
  • 无损压缩时：比 PNG 减小约 35％（对于 HDR，减小 50％）。
  • 支持无损 JPEG 转码，减小约 20％ 文件大小。
  • 专为摄影和合成图像而设计。
  • 渐进式解码。
  • 编码和解码更快。
  • 全面支持广色域和 HDR。
  • 无版权费。

几种格式的文件大小对比（查看原始图片）

点评：在 Mac 中可以使用 brew install jpeg-xl 安装 JXL 编码器，安装完毕后通过 cjxl 命令转换图片为 .jxl 格式。

• Chrome Canary 还实验性支持了 CSS 容器查询功能，使子元素可以根据父元素宽高动态调整布局和其他样式。需要开启：chrome://flags/#enable-container-queries 。

点评：这是 2021 最值得期待 CSS 新特性，没有之一！

优秀 Demo

• Figma 渐变生成插件

• 当 emoji 遇见可变字体技术

---

本期编辑：@一丝，审阅：@承虎
题图来源：cloudinary.com/blog/how_jp…