前言
作为一名前端,太喜欢浏览器变得越来越强了。今日前端早读课文章由 @ConardLi 分享,公号:code 秘密花园授权。
前端早读课:有用的内容,值得看第二遍!
正文从这开始~~
Chrome 112 版本在 4.4 号发布了,我来带大家一起看看有哪些值得关注的更新。
一、CSS 支持嵌套语法
CSS 嵌套语法,基本上是大多数人最新换的 CSS 预处理框架(比如 Less、PostCSS)提供的能力之一了。
在以前,我们在原生的 CSS 中每个选择器都需要明确地声明,互相独立。这样会导致编写很多重复的样式,可读性以及编写体验都很差:
nav {
background-color: red;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
}
CSS 的原生嵌套语法在 Chrome 112 版本中正式支持了,支持嵌套的样式规则允许我们将规则嵌套在父选择器中,而不需要重复写父选择器,这样就可以极大简化 CSS 的编写,让代码更具有可读性:
nav {
background-color: red;
ul {
margin: 0;
padding: 0;
li {
list-style: none;
display: inline-block;
}
}
}
嵌套语法可以帮助开发者减少选择器的重复编写,同时将相关元素的样式规则放置到一起,也可以更快速的匹配到这些样式的 HTML ,比如现在我们在代码里删除了 nav 这个元素,我们就不需要在样式文件里去搜索所有和它相关的选择器的实例了,只需要把这个样式组删除了就可以。
另外,Chrome 的 Devtools 也在最新版本支持了识别 CSS 嵌套语法,并帮元素匹配到正确的样式。
随着 Chrome 112 版本的发布,除了 CSS 支持嵌套语法外,还有桌面版 Chrome Apps 正式被移除,<dialog>
初始焦点的算法更新,以及如果用户代理发现所有 service worker 的获取监听器都是无操作(no-op)的,那么 service worker 的启动和导航关键路径中的监听器分配将被省略。
详细说明大家可以阅读:https://developer.chrome.com/articles/css-nesting/
二、document.domain 正式禁用
document.domain 在 Chrome 112 版本正式变为只读属性,如果你的业务里有通过更改 document.domain 来进行跨域的场景目前应该不起作用了,建议大家及时用 postMessage 或其他方案替代。
之前有详细介绍过,详细了解请看:Chrome 又搞事情,这种跨域方案要被禁用了!
三、X-Requested-With Header 开启弃用实验!
Chrome 准备在 112 版本中启动对移除 WebView 发出的 HTTP 请求中默认的 X-Requested-With Header 的弃用实验。
X-Requested-With 有一个很常见的用法,只要是 Ajax 请求一般会带上这个 Header ,而传统的网页请求不会,所以我们一般可以用它来判断一个请求是不是 Ajax 发出的。
基于这个原理,有些场景也会用它检测来自恶意应用程序的点击欺诈。比如很多前端框架(jQuery、Dojo、Django) 会基于它来做 CSRF 攻击的防御,不过这种方式并不严谨,后来陆续出现了几个关于它的漏洞(比如可以通过这个 Header 来让浏览器扩展冒充网站)。
在移动端,它的用法就完全不同了,从 WebView 发出的请求一般会默认携带一个 X-Requested-With Header,它的值是当前嵌入 apk 的软件包名称,本次弃用主要是针对这种场景。
为啥要弃用呢?还是因为保护用户隐私...
这个 Header 中可能会包括有关用户当前访问 Web 内容的上下文的特定信息,在一定程度上可以作为一种用户指纹来追踪一个用户,这些信息可能会通过这个 Header 泄露给三方在线服务。
当前还不是正式弃用,可能有一小部分被灰度到的用户会收到影响,大家可以及时检查下代码中的相关用法并及时做出改造。
四、SPA 丝滑的过渡效果
在两年前它还是个提案的时候我就介绍过它啦,用几行原生 JS 就可以实现丝滑的元素过渡效果!
当时的效果还是非常让人震撼的:
现在终于被浏览器(Chrome 111 版本)支持了,但是 API 也发生了一定程度的变化,当时叫 Shared Element Transitions(共享元素转换) ,现在已经更名为 View Transitions(视图转换) 了。
在 Web 上实现平滑的过渡效果是一个非常复杂的任务,我们往往会借助一些三方的动画库去实现,这些库的兼容性和性能往往是比较困扰我们的事情。
新的 View Transitions API 可以通过快照视图的能力和允许 DOM 在状态之间没有任何重叠的情况下进行渲染来简化这种过渡的实现,比如通过下面这样简单的代码就可以实现一个淡入淡出的效果:
function spaNavigate(data) {
// 判断浏览器是否兼容
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// 使用 transition
document.startViewTransition(() => updateTheDOMSomehow(data));
}
调用 .startViewTransition()
时 ,API 会捕获页面的当前状态。执行完成后,它会将 callback 调用传递给 .startViewTransition()
。这时就会更改 DOM ,然后 API 会捕获页面的新状态。
注意,这个 API 目前只为单页应用程序 (SPA) 提供支持,其他的渲染模式的支持也正在施工中~
参考
Chrome 又搞事情,这种跨域方案要被禁用了!
用几行原生 JS 就可以实现丝滑的元素过渡效果!
https://www.chromestatus.com/features#milestone%3D108
https://github.com/WICG/view-transitions
关于本文
作者:@ConardLi
原文:https://mp.weixin.qq.com/s/0sC5Bk5_FAel6lq819_cYQ
这期前端早读课
对你有帮助,帮” 赞 “一下,
期待下一期,帮” 在看” 一下 。