简单聊一聊 Chrome 一些小技巧(1)

ti138729
193 阅读2分钟

「这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」

grid 编辑器

这个功能在 chrome 92 以上包括 chrome 92 版本支持，在 element 查看元素样式时，如果样式应用 grid，可以在display:grid 右侧发现一个小图标如下图

001.png

添加小图标弹出一个对话框(如下图)，在弹出的对话框中，可以修改 grid 一些相关属性

002.png

输出面板(console)支持重复声明一个关键字 const 的变量

这个功能在 chrome 92 以上包括 chrome 92 版本支持，也就是可以重复使用 const 声明来声明同一个变量。

003.png

通常功能也支持 flex ，在display:flex 的也提供了类似 grid 功能供开发者使用。

CSS 支持自定义变量

<body>
    <h1 class="title">What new in Chrome 49</h1>
</body>

无需借助其他 CSS 预处理，就可以定义 CSS 变量，然后就可以使用该变量，在修改时候无需通过查找替换来更新 CSS 的一些属性值，主要需要改变变量值即可，使用时需要var函数从定义好的变量中提取值。

:root{
    --primary-color:lightblue;
}

h1{
    color:var(--primary-color)
}

CSS 自定义属性，还有一个更强大的功能，就是允许开发者在任何位置定义自定义属性或者对其进行修改。例如，可以在media query(媒体查询)中定义变量，或通过 JavaScript 来改变其值。这些工作在预处理程序中是无法做到的，CSS 自定义属性在 Chrome 49 或者更高版本中才支持。

:root{
    --primary-color:lightblue;
}

@media (min-width:600px) {
    :root{
        --primary-color:darkblue;
    }
}

h1{
    color:var(--primary-color)
}

这个特性已经在 Firefox 42, Safari 9.1, iOS Safari 9.3 中得到了支持。

实时查看网页

令网页效能的测量更视觉化 core web Vitals 是谷歌提倡的使用者体验量化方式，只在提供你一些参考指标 帮助你优化用户体验。

打开commend菜单 执行show Rendering指令

012.png

011.png

然后勾选 core web Vitals 网页中会出现三个指标 015.png

010.png

  • Largest Contentful Paint 显示网站初次载入的速度
  • First Input Delay显示网站互动的顺畅程度
  • Comulative Layout Shift 显示网页元件视觉的稳定性
avatar
文章
阅读
粉丝