CSS 将原生支持嵌套语法

1,866 阅读2分钟

前端快爆

  • Chrome 92 的开发者工具有如下更新
    • 在浏览器的 Console REPL 中,将自动隔离不同执行的指令,重复执行 const 常量定义将不再报错;
    • CORS 调试支持进行了增强,可在 Issue 中进行相关规则查看;
    • 网络面板中,Wasm 类型可单独筛选了;
    • 性能面板中,追加了 Compute Intersections 的耗时展现,可以知道 IntersectionObserver 的耗时了;
    • 支持了 CSS Grid 编辑器。

image.png

  • Chrome 的浏览器兼容年度报告 Compat 2021 在年中有了更新
    • CSS Flexbox 的 gap 属性在 Safari 14.1、Chrome 84+、Firefox 63+ 中支持,至此得到现代浏览器的完整支持;
    • CSS Grid 的使用增长到 9% PV,现代浏览器的 CSS Grid 特性支持都超过了 89%;
    • aspect-ratio 在 Chrome 88+、Firefox 89+ 和 Safari 15 Beta 中得到完整支持;
    • Chrome 正在研究 transform-style 和 transform 的插值补间动画;
    • Chrome 优化了 position: sticky 对于表头的展现,因此在 Chrome 中 position: sticky 兼容性达到 100%。

image.png

Group.png

  • 在浏览器中,有更方便的 UI 调试字体大小
    • Firefox 中可以直接通过开发者工具调整;
    • Chrome 中可以在开发者工具中,通过 Experiment 标签打开 “Enable the new Font Editor tool within the Styles pane” 的实验性功能来进行相关的调试。

image.png

百宝箱

  • beachball 是微软推出的 npm 包版本更新工具,他的亮点有:
    • 自动生成 Changelog;
    • 与 Git、npm 协作良好;支持 monorepo;
    • 允许依赖更新和版本号挂钩的声明机制;

image.png

点评:看看,这个精密的版本号更新机制,react-monaco-editor 学会了吗?之前它的 package.json 一度声明了依赖的 monaco-editor 版本号是 *

  • node-red 是一款用于 IoT 的逻辑编排工具,最近更新了 2.0 版本,新版允许使用 Monaco Editor,并强化了外部包的使用。

image.png

点评:不过这个逻辑编排看起来也很难,起码得是程序员能理解字符串和转义才能玩转这个……


编辑:承虎 & 审阅:一丝