本文是 MDN | @scope 的翻译，并根据我自己的理解进行了适当地修改和补充。采取与原文相同的许可证。
截至 2024 年 5 月，Firefox 任然不支持 @scope 规则，但是 Chrome 与 Safari 已经支持。详情查看 Can i use @scope。
@scope 可以让我们精确的定位 DOM 子树中的元素，而无需编写难以覆盖的过于特定的选择器，并且不会将选择器与 DOM 结构耦合得太紧密。
在 JavaScript 里，可以使用 CSSScopeRule 访问 @scope 规则。
最近在写一个碧蓝档案学生 Pixiv 收藏数统计的网站，想要实现两个炫酷的功能：模仿碧蓝档案游戏内什亭之匣的页面切换动画和圆形扩散的明暗主题切换动画（就像 Android 版 Telegram 那样）。
本来已经把 SVG 和动画的关键帧画好了，忽然发现一个问题，我的网站是基于 Next.js App Router 的，但是 App Router 不支持监听 Router 事件，也就是说，我并不知道下一个页面什么时候完成加载，也就没办法选择合适的时机播放页面进入的动画。
一搜 Google，千篇一律全是使用 Framer Motion 或者 React Transition Group，但是我 CSS 的 @keyframes 动画已经写好了，不想再重写一遍，难道只用纯 CSS 不能实现？
正好昨天在 MDN 上看到了 View Transitions API 的介绍，这个 API 拿来做动画是真的方便，于是去 Can I use 查了一下，发现现在只有 Chrome 支持，不过也没关系，先实现再说。
经过一番尝试，终于实现了两个动画效果，本文就来介绍一下 View Transitions API 的基本用法。
今天在 medium 看到一篇关于 Google Photos 的文章，里面详细的介绍了谷歌的一名工程师是如何设计 Google Photos 的布局的，文章地址：Building the Google Photos Web UI。
观察了一下 Google Photos 的布局，发现它的布局非常的有意思，有以下特点：
感觉很神奇，但是那篇文章里的实现方法太过复杂，虽然性能非常好，但是我觉得可以用更简单的方法来实现，于是就有了这篇文章。