首页 > 文章 > web前端 > CSS 4 中的一些新特性

CSS 4 中的一些新特性

DDD原创: 2024-10-30 17:01:02834浏览

在本文中，我们将探索 2024 年的一些新 CSS 功能。

如果你喜欢我的文章，可以请我一杯咖啡:)
Some new features CSS in 4

1.CSS容器查询

容器查询允许您根据项目容器的大小将样式应用于项目。容器查询的工作方式类似于媒体查询。

使用容器查询

使用容器查询，您可以根据父元素内的子元素的大小动态调整子元素的样式。

为此，您必须首先为父元素定义一个容器上下文。您可以使用容器类型属性来指定它。

容器类型：尺寸；设置为时，可以同时按宽度和高度值进行查询。
容器类型：内联大小；设置为时，仅对宽度（水平尺寸）进行查询。

借助此功能，子元素的样式属性可以根据父元素的大小进行更改。

示例 :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

输出 :

Some new features CSS in 4

2.CSS嵌套

使用 CSS 嵌套，您可以将一个规则放置在另一个规则中。这对于管理依赖于上下文的样式特别有用。例如，如果您有一个 .container 类并想要为其 .item 元素设置样式，您可以直接在 .container 规则内编写 .item 规则。 CSS 嵌套由浏览器直接解析。 这意味着您不需要预处理器来编译嵌套规则；它们在浏览器中本地工作。

示例 :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

输出 :

Some new features CSS in 4

3. :scope 伪类

范围选择器用于定义 CSS 中样式的范围。

用法：

如果 :scope 位于 CSS 的 根级别，则相当于 :root

示例 :

<html></html>

:scope {
  background-color: orange;
}

输出 :

Some new features CSS in 4

在 @scope 块中使用 :scope 可以根据类名定义的上下文实现清晰且有针对性的样式。

示例 :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

输出 :

Some new features CSS in 4

4. :has() 伪类

CSS 中的 :has() 选择器允许您设置 父元素的样式（如果它包含特定的子元素。

）

示例 :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

输出 :

Some new features CSS in 4

5. 颜色函数

您可以使用新的颜色函数，例如 color-mix() 和 color-contrast() 来更好地控制 颜色

的色调和对比度

示例 :

<html></html>

6. 锚点定位

CSS 锚点定位模块定义了允许您将元素连接在一起的功能。某些元素被定义为锚元素；然后，锚定位的元素可以根据它们所绑定的锚元素的大小和位置设置其大小和位置。

结论

在本文中，我们探索了 2024 年 CSS 的一些新功能。您可以将此功能用于应用程序。

以上是CSS 4 中的一些新特性的详细内容。更多信息请关注PHP中文网其他相关文章！

css define if for using class Property this location position

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Dynamically Style HTML Elements with Sass Variables: Includes vs Mixins?下一篇：How to Apply Linear Gradients to SVG Rect Elements Using CSS?

查看更多