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

1、@scope:

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

举例：

以前的写法：

bash 复制代码

<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:

bash 复制代码

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

用@scope：

bash 复制代码

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

CSS:

bash 复制代码

  @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 特性，并不是什么遥不可及的黑科技，它们的浏览器兼容性已经非常好（主流浏览器早已支持）。