【学习记录】CSS: clamp、@scope

1、@scope:

允许将样式作用域限定在指定的DOM树中，不会影响到全局。
:scope 伪类：引用作用域根元素
w3school解释：CSS @scope 规则

举例：
以前的写法：

<div class="card"><h3 class="card-title">CSS</h3><p class="card-subtitle">CSS 是我们用来为 HTML 文档设置样式的语言。CSS 描述了 HTML 元素应该如何显示。<a class="card-link" href="/css/index.asp">本教程将教你从基础到高级的 CSS 知识</a>。</p>
</div>

css:

  .card {background-color: salmon;padding: 10px;.card-title {color: white;}.card-link {color: maroon;}.card-link:hover {color: blue}}

用@scope：

<div class="card"><h3>CSS</h3><p>CSS 是我们用来为 HTML 文档设置样式的语言。CSS 描述了 HTML 元素应该如何显示。<a href="/css/index.asp">本教程将教你从基础到高级的 CSS 知识</a>。</p>
</div>

CSS:

  @scope (.card) {:scope {background-color: salmon;padding: 10px;}h3 {color: white}a {color: maroon;}a:hover {color: blue;}}

变得更简洁，其中scope 伪类：引用作用域根元素

2、 clamp

它接收三个参数：最小值、首选值、最大值，clamp(MIN, VAL, MAX)
兼容性：主流浏览器基本都支持了
MDN解释：clamp()
具体例子：别再用 px 做单位了！用这个 CSS 新特性，轻松实现响应式布局

clamp() 在布局中的应用clamp() 的威力远不止于此，我们可以将它应用到任何需要动态调整的地方：例如我们想让一个内容区块的宽度自适应，但又不想它在小屏幕上太窄，或在大屏幕上太宽？
.container { width: clamp(320px, 90%, 1200px); margin: 0 auto; }
在小屏幕上，宽度是 90%，但最小不会低于 320px在超大屏幕上，宽度也是 90%，但最大不会超过 1200px是时候从 px 的思维定势中解放出来了，clamp() 这个现代 CSS 特性，并不是什么遥不可及的黑科技，它们的浏览器兼容性已经非常好（主流浏览器早已支持）。