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) 提供支持，其他的渲染模式的支持也正在施工中 ~

最后

参考：

• https://www.chromestatus.com/features#milestone%3D108
• https://github.com/WICG/view-transitions

如果你想加入高质量前端、ChatGPT 交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。

点赞和在看是最大的支持⬇️❤️⬇️