web新技术双周报

Heagle
174 阅读3分钟

web新技术双周报（8.16-8.30）

chrome(100-101)

  1. @support：用来检测浏览器是否支持某个期望的样式功能，支持声明语法、函数语法、not操作符、and操作符、or操作符

相比于使用js检测，该方法不会导致页面闪现，避免多余辅助代码等问题

@support文档：@supports - CSS（层叠样式表） | MDN

js提供了Window.CSS.supports()检查浏览器对css属性是否支持

CSS.supports()文档：CSS.supports() - Web API 接口参考 | MDN

  1. Recorder

可以通过该功能录制 Web 页面的操作并支持回放，编辑，测量性能 等诸多功能。

Chrome101支持将Recoder导出、导入json文件

Recorder用途：

  • 测试某一个业务流程在各种不同的网络和硬件环境下的表现，甚至你可以看其在不同平台的表现（比如 PC，手机，平板等）。

  • 测试同学录制一段Recorder， 然后发送给开发，开发根据这段视频定位问题。

  • 自动化测试。录制一段视频，然后通过修改其中部分参数的形式来自动化生成很多测试用例。

在回放的过程中，还可以获取页面的性能数据

如何分析页面性能数据：segmentfault.com/a/119000002…

Recorder文档：developer.chrome.com/docs/devtoo…

  1. 代码段Snippets

它允许你存放 JavaScript 代码到 DevTools 中，方便你复用这些 JavaScript 代码段，

入口：打开控制台->选择Sources->在右边点击>>箭头可以选择Snippets(默认是隐藏着的)->添加我们的代码片段

Snippets文档：developer.chrome.com/docs/devtoo…

Snippets用途：可以保存经常会用到的工具代码，例如获取 url 参数，rgb转16进制，打印下当前页面的性能数据，给所有的 span 加个样式，要用的时候直接拿出来用，非常方便

  1. 级联层@layer

@layer声明了一个级联层，同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。

作用：一般会使用选择器权重和顺序作为控制级联的方法，但是这样却会时常碰到：

使用较高权重的选择器来防止你的代码被后面的代码（或别人的代码）覆盖。但这也会引起另一个不良的现象，可能会在代码中新增很多带有 !important 的样式规则，这本身就会引起更多的问题，比如 !important 在 CSS 样式表中随处可见，需要覆盖的时候难以被覆盖 。通过@layer规则，可以让 CSS 声明的优先级下降或提升一整个级联级别。

优先级：page>component>base

@layer文档：developer.chrome.com/blog/cascad…

详解日后定会大规模使用的CSS @layer 规则 « 张鑫旭-鑫空间-鑫生活

5.支持 hwb() 颜色函数

在样式边栏里，按住 Shift 键，然后点击任意颜色并留意颜色格式的变化。会发现 HWB 颜色格式已经被添加上去。（也可在rgb和16进制之间切换）

HWB (hue,whiteness and blackness）

表示色相、白色浓度、黑色浓度。跟HSL一样，色相值可以是0-360度数，其他两个参数则是控制此色相中应该混合多少白色和黑色（白色浓度跟黑色浓度可以直接导致最后结果是全白还是全黑）。如果白色浓度跟黑色浓度的比例越接近，越会增加灰调。

可以在该链接上玩一下这个函数codepen.io/smashingmag…

avatar
文章
阅读
粉丝