妈妈技术周刊：Canvas 之春

前端快爆

• Google Docs 在接下来的几个月中 将从 HTML 迁移至基于 Canvas 的渲染，以便提升性能和渲染一致性。这可能会影响某些 Chrome 扩展程序。这个文档页面已经切换为 Canvas 渲染。

点评：Google 这盘棋下的非常深远，Web 文档开始新的技术洗牌。

• Chrome 意图实验性支持一系列新的 Canvas API，其中包括：

  • roundRect()：圆角矩形，ctx.roundRect(10, 10, 50, 50, [10])
  • createConicGradient()：径向渐变，Demo​
  • 允许使用 CSSColorValue 颜色，ctx.fillStyle = new CSSRGB(1, 0, 1, 0.5)
  • 支持 SVG 滤镜：whatwg/html#5621
  • Context loss：whatwg/html#4809
  • willReadFrequently：whatwg/html#5614
  • reset()：whatwg/html#5618
  • CSS text modifiers：whatwg/html#5617
  • 4×4 transforms：whatwg/html#5620

• Web 应用打包工具 Parcel 2 发布 beta 3 版本，使用 Rust 完全重写了 JavaScript 编译器，从而将整体构建性能提高了 10 倍。

• Rust 2021 计划在今年 10 月份发布，主要有一些特性：

  • 增强了 prelude 模块
  • Cargo 功能解析器增加 resolver="2" 选项
  • 改进用于数组的 IntoIterator
  • 闭包中不相交的捕获
  • 改进 Panic 宏的一致性
  • 将 bare-trait-objects 和 ellipsis-inclusive-range-patterns lint 规则由警告提升为硬错误

• Sublime Text 4 首个稳定版发布，带来了全新 UI、支持多选项卡、支持 Apple M1 平台和 Linux ARM64。此外还有感知上下文的自动补全，支持 TypeScript、JSX 和 TSX 等诸多新特性。由于支持了 GPU 渲染，UI 现在可以支持 8K 分辨率。

• Weex 已经从 Apache Incubator 中「退休（retirement）」，其主要原因是项目活跃度不够。但是 「退休」并不表示废弃，Weex 将会回归到 alibaba/weex 仓库继续维护，做到内外部代码及时同步，定时发布 Release 版本。

点评：官方开发者发布了《五年陈的 Weex，聊聊它的过去现在和未来》介绍了接下来的计划。

• Chrome 意图实验性支持 CSS [:has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) 选择器，可以用来选择父级元素。目前 Igalia 公司正在为 Chrome 实现该选择器，其团队成员 Brian Kardell 还发表了博文 Can I :has() 进行了详细介绍。

<style>
.parent:has(.red) { color: red } /* 将匹配 .red 的父元素 .parent */
.parent:has(.green) { color: green } /* 将匹配 .green 的父元素 .parent */
</style>

<div class="parent"> <!-- color: red -->
  <div class="red"></div>
</div>
<div class="parent"> <!-- color: green -->
  <div class="green"></div>
</div>
复制代码

点评：七年前，我就在知乎回答了「CSS 中能否选取父元素？」，今天终于可以在浏览器中实现了，泪目?。

优秀 Demo

• 狗头+猫咪 checkbox
• 使用 CSS 容器查询更改衣服颜色

本期编辑：@一丝，审阅：@墨尘