<div class="outer"> <p>堆代码 duidaima.com</p> <div class="inner"> <p>ConardLi</p> </div> </div>在没有 @scope 的情况下,应用的规则是最后声明的样式。
.inner p { color: goldenrod; } .outer p { color: green; }所以两个 P 标签的样式都是这样的:
@scope (.inner) { a { color: goldenrod; } } // 堆代码 duidaima.com @scope (.outer) { a { color: green; } }
<div class="first-box"> <h1 class="first-box__main-content"> code秘密花园</h1> </div> <div class="second-box"> <h1 class="second-box__main-content"> ConardLi</h1> </div> .first-box__main-content { color: red; } .second-box__main-content { color: green; } <div class="first-box"> <h1 class="main-content"> code秘密花园 </h1> </div> <div class="second-box"> <h1 class="main-content"> ConardLi </h1> </div>使用 @scope:
@scope(.first-box){ .main-content { color: grey; } } @scope(.second-box){ .main-content { color: mediumturquoise; } }
@media (scripting: none) { .script-none { color: red; } }prefers-reduced-transparency 则允许开发者根据用户选择的偏好来调整网页内容,从而降低操作系统中的透明度,例如 macOS 上的 “降低透明度” 设置。
.translucent { opacity: 0.4; } @media (prefers-reduced-transparency) { .translucent { opacity: 0.8; } }
Sanitizer API 的目标是帮助大家构建一个安全的 API 来清理浏览器上不安全的 HTML。Chrome 根据当时的规范草案,在 Chrome 105 中发布了 Sanitizer API 第一个版本,但是,这个 API 规范最近做了比较大的更改,API 的使用方式也发生了重大变化。为了防止当前的 API 被广泛使用,当前版本的实现预计会在 Chrome 119 中弃用。