Chrome 112 ：CSS 支持嵌套语法、document.domain 正式禁用！
大家好，我是 ConardLi。
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 嵌套语法，并帮元素匹配到正确的样式。
详细说明大家可以阅读：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
如果你想加入高质量前端、ChatGPT 交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。
点赞和在看是最大的支持⬇️❤️⬇️