2023 年值得关注的 15 个 CSS 趋势

本文链接：https://blog.csdn.net/qq_36863796/article/details/131640629

在这里插入图片描述

文章目录

前言

过去那种简单而朴素的 HTML 网站已经过时，无法迅速吸引观众的注意力。随着技术和设计的不断升级，趋势发生了变化，更加偏向于动画和图形。在开发网站时，需要具备创意和技术技能。布局、动画和图形等因素可以大大改变网站的外观和感觉。

层叠样式表（CSS）是为网页设计增添色彩的理想方式。它是一种基础技术，允许开发人员控制网站或网络应用的布局和视觉外观。

根据 W3Techs 的数据，截至 2023 年 1 月，约 96.9% 的网站使用 CSS，这本身就表明它是现代网页设计的一个重要组成部分。

随着网页开发的发展，新的 CSS 趋势不断涌现，帮助开发人员创建更加视觉引人注目的网站。从响应式设计和动画到新技术和样式，CSS 趋势不断变化和适应现代网页设计的需求。由于 CSS 趋势是循环的，到2023年，网页开发中将出现一些新的 CSS 趋势。

在本文中，我们将介绍 2023 年值得关注的 15 个最佳 CSS 趋势。这些趋势将帮助你通过发挥 CSS 的强大功能，创建出视觉上令人惊叹的响应式设计。

下面让我们开始介绍 2023 年最佳的 CSS 趋势。

注意：此处的浏览器兼容性数据来自 CanIUse。

1. CSS Grid

CSS Grid 是一个强大的布局模块，允许创建复杂的响应式网格布局。支持目前主流的浏览器，并在 Web 开发人员中越来越受欢迎。它可以轻松处理行或列。

Subgrid 是 Grid 布局中新增的一个实用功能。可以使用 Subgrid特性创建一个 Subgrid，会模仿父级网格的布局。当嵌套在另一个网格显示中时，子网格选择自己的尺寸和间隔。

浏览器支持：95.91%

2. CSS Writing Mode

根据语言的不同，CSS Writing Mode 属性调整文本的对齐方式，使其可以从上到下或从左到右阅读。例如，我们希望添加一些从左到右、从上到下阅读的文本。

这对于那些文本经常以垂直方式排列的语言非常有用，比如中文、日文或韩文。可能希望在英文中也使用这个特性，以美观为目的，借助这个 CSS 新功能。

浏览器支持：97.7%

3. Scroll Snap Behavior

CSS 提供了一组有用的属性来控制网页浏览器的 CSS 滚动捕捉行为。其中一些功能已经存在很长时间，但更高版本的浏览器才刚刚开始使用其他功能。这个 CSS 趋势最好的一点是，只有三分之一的 CSS 用户知道。

使用 scroll-snap-type 属性，可以以各种方式修改容器中的滚动位置。开发人员可以获得更高的精确度，而最终用户则可以获得更流畅、更可控的用户体验。

浏览器支持：95.89

4. Container Queries

CSS 尚未完全支持容器查询，但未来会支持。这将对如何理解响应式设计产生重大影响。基本思想是除了视口和媒体大小之外，还可以根据父容器的大小指定断点。

这将包括根据用户界面的嵌套层级中出现的各种容器的尺寸来调整布局。CSS 容器查询不仅仅是一种 CSS 趋势，它是一个重要的举措，可能引发一系列界面增强的浪潮。

浏览器支持：76.94%

5. 新的配色方案

CSS 开发者已经开始使用 RGB 来美化网页。最近，CSS 引入了三种新的配色方案：HWB、LAB 和 LCH。

HWB： 分别是色相（Hue）、白度（Whiteness）和黑度（Blackness）的缩写。这对于人们来说很容易理解：选择一种颜色，然后添加白色和黑色。最新版本的 Chrome、Firefox 和 Safari 都支持。

浏览器支持：87.71%

LAB： 是根据 CIA LAB 颜色理论创建的，被认为是新颜色空间中最理论上复杂的。LAB 颜色描述符包括人类可感知的所有颜色，这是一个大胆的说法。目前只有 Safari 与这种 CSS 趋势兼容，就像 LCH 一样。

LCH： 代表亮度（Lightness）、色度（Chroma）和色相（Hue），以扩大可访问的颜色范围而闻名。只有 Safari 支持 LCH。

浏览器支持：15.38%

6. CSS 变量

CSS 变量，也称为 CSS 自定义属性，自 2015 年以来一直是市场上热门的 CSS 趋势，现在越来越受到 CSS 用户的关注。CSS 变量允许在 HTML 代码的其他位置存储和使用值。有助于消除代码中的冗余，提供灵活性，并改善代码的可读性。

浏览器支持：95.81%

7. Viewport Units

设置 Viewport Units 对于那些尝试在 iOS 上为 Safari 编写网站的人来说很麻烦。这款移动浏览器显示使用 vh 单位设置的容器的大小比实际应该显示的要小。

为了解决这个问题，需要使用一个脚本来自动调整容器的大小。除了加载新脚本的不便之外，一些解决方案还会对 Chrome 用户造成问题。

CSS 现在支持新的相对长度和视口规范。其中一些是 “vw”、“svw”、“lvw” 和 “dvw”。这些测量单位是小型、大型和动态视口尺寸以及 UA 默认视口尺寸的宽度的 1%。

浏览器支持：97.53%

8. Cascade Layers

如果级联中的下一个元素具有更高的特异性级别，CSS 将覆盖对第一个元素的样式更改。在大型项目中，由于庞大的代码库，问题总是存在。这就是 CSS Cascade Layers 发挥作用的地方。

Cascade Layers 给开发人员更好的灵活性，可以充分利用级联系统来处理主题、框架和设计。与原始的基于启发式的级联相比，层叠图层直接操作和管理底层级联逻辑，确保组件不总是遵循基本样式。

这种 CSS 趋势将通过在级联中添加第二层来定义样式变体，从而确保组件不总是遵循基本样式。相反，组件将根据该层上编写的规则和已建立的层次结构生成。

浏览器支持：87.57%

9. 内容可见性

CSS 中的内容可见性属性有助于加快网页上内容的渲染，使用户可以在页面的其余部分加载时与内容进行交互。借助这个属性，开发人员可以告诉浏览器页面的哪个部分包含了独立的内容。反过来，它帮助浏览器通过延迟计算来优化网页内容。

内容可见性依赖于 CSS Containment 规范的基本原理。到目前为止，只有 Chromium 85 支持 content-visibility 属性，然而，CSS Containment 规范在所有主要浏览器上都得到支持。

浏览器支持：71.40%

10. Gap

Gap 属性是一种新兴的 CSS 趋势，用于定义行和列之间的间隔，也称为网格间隙。它可以替代以下属性：

Row-gap
Column-gap

我们使用单个值的 gap 属性来指示行和列之间的相同空间。如果行和列之间的间距不同，我们可以使用具有两个值的 gap 函数，首先定义行之间的距离，然后是列之间的距离。你可以使用 row-gap 和 column-gap 两个属性，使代码更清晰和易懂。

在使用gap属性之前，设计师需要使用 margin 属性来添加容器元素与容器边缘之间的缩进等限制。相比之下，gap 属性允许你在不使用这些技巧和花招的情况下指定项目之间的缩进，而仅仅依靠语言的基本结构。

浏览器支持：93.29%

11. Object View Box

列表中的另一个 CSS 趋势是 object-view-box 属性。使网页只显示图像或视频的指定区域。它的效果与 viewBox SVG 属性大致相似。当你只想显示图像或视频的某一部分，或者在不同元素或不同分辨率下显示时，object-view-box 属性会很有用。此外，它可以用于平移和缩放图像和视频。

在 object-view-box 属性出现之前，解决图像或视频裁剪问题需要在容器内部放置和调整内容，并使用 “overflow: hidden;” 属性。通过在代码中添加顶部、底部、左侧和右侧的值来完成。

浏览器支持：66.99%

12. 插入

插入属性帮助设置元素与父元素之间的距离。它取代了 Top、Right、Left 和 Bottom 这四个属性，并允许你一次性从四个方向看到元素的插入。CSS 插入属性要求在代码中添加这四个命令来进行定位。

浏览器支持：90.29%

13. 可变字体

可变字体允许将多种字体变体整合到单个文件中，而不是为每个宽度、粗细或样式创建单独的字体文件。它是开放类型字体规范的进化版本。

虽然可变字体可以像常规字体一样使用，但它们提供了更多的功能。标准字体的 font-weight 属性接受 100 到 900 之间的值，而对于可变字体，它接受 1 到 999 之间的任何整数。

对于常规字体，font-style 属性接受普通和斜体两个值，而对于可变字体，你可以为可变字体指定 -90 度到 90 度之间的斜体角度。可变字体还具有一个 font-stretch 功能，范围从 50%（用于窄字体）到 200%（用于宽字体），标准比例为 100%。另外，还有一个 font-optical-sizing 属性，根据大小调整字体的外观。

浏览器支持：94.89%