2023 css新特性简单总结

2023 css新特性简单总结

CSS 是一种用于设计网页和用户界面样式的强大语言。它在不断发展，不断添加新特性。2023 年，将有许多令人激动新的 CSS 新特性。

容器查询

最重要的新功能之一是容器查询。容器查询允许我们根据父容器的大小设置元素的样式。这使我们可以更好地控制布局，并更轻松地创建响应式设计。

例如，我们可以使用容器查询来根据按钮是在狭窄的侧边栏还是在宽的主要内容区域中来设置不同的样式。这将使我们能够在不同的设备和屏幕尺寸上创建更加一致和用户友好的体验。

:has() 选择器

另一个新功能是:has()选择器。此选择器允许我们根据特定子元素的存在来设置元素的样式。这可用于创建更复杂和动态的用户界面。

例如，如果标题下方有副标题，我们可以使用:has()选择器以不同的方式设置标题样式。这将使我们能够为用户创建更具视觉吸引力和信息丰富的标题。

嵌套

CSS 嵌套是一个非常令人兴奋的新功能，它有可能使 CSS 代码更具可读性和可维护性。

以下是 CSS 嵌套的一些主要优点：

• 提高可读性和可维护性： CSS 嵌套使我们可以更轻松地阅读和理解 CSS 代码，因为它允许我们将相关的 CSS 规则分组在一起。这可以更轻松地查找和修复错误，也可以更轻松地与其他开发人员协作。
• 减少代码重复： CSS 嵌套允许我们在整个代码库中重用 CSS 规则，从而帮助我们减少代码重复。这可以使我们的 CSS 代码更高效且更易于更新。
• 更模块化的 CSS： CSS 嵌套可以帮助我们编写更模块化的 CSS 代码。这意味着我们可以将 CSS 代码分解为更小、更易于管理的部分。这可以使我们的 CSS 代码更可重用且更易于共享。

其他新功能

还有许多其他新的 CSS 功能也值得注意：

• 第 n 个微语法：这提供了一种更简洁、更易读的方式来选择列表中的特定元素。
• text-wrap:balance：此属性允许我们平衡容器中的文本换行，以便行间距更加均匀。
• 首字母：此属性允许我们以独特的方式设置文本块的第一个字母的样式。
  动态视口单位：这些单位允许我们定义相对于视口大小的字体大小和其他 CSS 值，但能够根据用户首选项覆盖这些值。
• 广色域色彩空间：这些空间允许我们在 UI 中使用更广泛的颜色，从而产生更加生动、逼真的图像和图形。
• color-mix()：此函数允许我们通过混合两种或多种现有颜色来创建自定义颜色。
• 级联层：这些层允许我们将 CSS 规则分组在一起并控制它们之间的交互方式。这对于创建更复杂和细致的 UI 非常有用。
• 作用域样式：这些样式允许我们将 CSS 规则应用于特定元素或其后代，而不影响文档的其余部分。这有助于使我们的 CSS 代码更加模块化和可重用。
• 三角函数：这些函数允许我们在 CSS 代码中执行三角计算。这对于创建复杂的动画和效果非常有用。
• 单独的变换属性：这些属性允许我们将单独的变换属性应用于元素，例如scale()、rotate()和translate()。这使我们可以更好地控制元素的转换。

如何使用这些新功能

其中许多新的 CSS 功能仍在开发中，但它们已经受到 Chrome、Firefox 和 Edge 等主要浏览器的支持。要使用这些功能，我们只需将它们添加到 CSS 代码中即可。

例如，要使用容器查询，我们需要向 CSS 代码添加一条@container规则。此规则将指定我们要查询的父容器，以及我们要设置样式的 CSS 属性

@container my-container ( min-width : 500px ) { 
  /* 宽容器的 CSS 规则 */
 }
1
2
3

@container my-container ( max-width : 499px ) { 
  /* 窄容器的 CSS 规则 */
 }
1
2
3

要使用:has()选择器，我们只需将其添加到 CSS 规则中即可。此选择器将指定我们要检查的子元素，以及我们要在子元素存在时设置样式的 CSS 属性。

.parent :has (.child) { 
  /* 具有子元素的父元素的 CSS 规则 */
 }
1
2
3

要使用:has()选择器嵌套 CSS 规则，只需将其添加到父元素的 CSS 规则中即可。该选择器将指定我们要检查的子元素，并且仅当子元素存在时才会应用子元素的 CSS 规则。

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.container h1 {
  font-size: 32px;
  margin-top: 0;
}

.container p {
  font-size: 16px;
  margin-bottom: 0;
}

/* With nesting */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;

  h1 {
    font-size: 32px;
    margin-top: 0;
  }

  p {
    font-size: 16px;
    margin-bottom: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

如何使用新的 CSS UI 功能的示例

以下是一些示例，说明如何使用新的 CSS UI 功能来创建响应更快且更易于访问的 UI：

使用容器查询创建响应式网格布局。我们可以使用容器查询创建网格布局，该布局根据父容器的宽度调整其列和行。这将确保我们的布局在所有设备上看起来都不错并且功能良好。

使用:has()选择器创建一个下拉菜单，当用户将鼠标悬停在菜单项上时，该菜单会自动打开。为此，我们首先要为菜单项创建一个元素div，并为下拉列表创建一个元素ul。然后，我们可以将选择器添加:has()到该div元素，并将该ul元素指定为要检查的子元素。最后，我们将添加要应用于菜单项和下拉列表的 CSS 属性。

例如，以下 CSS 代码将创建一个下拉菜单，当用户将鼠标悬停在“菜单”项上时，该菜单将打开：

.dropdown-menu:has(.dropdown-list) {
  cursor: pointer;
}

.dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 1;
}

.dropdown-list li {
  padding: 10px;
}

.dropdown-menu:hover .dropdown-list {
  display: block;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

要使用此 CSS 代码，我们只需将dropdown-menu添加到菜单项的元素div的类名中，并将dropdown-list添加到下拉列表的元素ul的类名中。然后，我们可以将菜单项添加到该ul元素。

例如，以下 HTML 代码将创建一个包含两个菜单项的下拉菜单：

<div class="dropdown-menu">
  Menu
  <ul class="dropdown-list">
    <li>Homeli>
    <li>Aboutli>
  ul>
div>
1
2
3
4
5
6
7

当用户将鼠标悬停在“菜单”项上时，下拉列表将自动打开。然后，用户可以单击菜单项之一导航到该页面。

使用其他新的 CSS UI 功能

我们还可以使用其他新的 CSS UI 功能来创建响应更快且更易于访问的 UI。例如，我们可以使用动态视口单位来确保字体大小和其他 CSS 值始终根据用户的设备进行适当缩放。我们还可以使用广色域色彩空间来创建更加生动、逼真的图像和图形。