你可能不知道的10个CSS新功能(2021版)

凯特林 等级 707 2 2

多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。

为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个快速的例子。

CSS的新功能:现代CSS可以做什么

这是CSS如今具备的一些令人惊奇的功能

自定义属性/变量

自定义属性基本上允许你在一个集中的地方定义CSS属性的替身,以用于你的设计。要理解为什么这很有用,最好的方法就是去看一个例子。

通常,在构建一个主题时,你会选择一个配色方案,然后每次都要声明这些颜色。

a {  
    color: #cd2653;  
}  

.social-icons a {  
    background: #cd2653;  
}  

.wp-block-button.is-style-outline {  
    color: #cd2653;  
}  

这种方法的问题是,如果你想对其中一种颜色进行更改,你必须更改它的每一个实例。虽然代码编辑器可以通过搜索和替换轻松做到这一点,但这仍然很烦人。特别是当你只是想做一个快速的测试,而又要把所有的东西反过来的时候。

有更好的解决方案

自定义属性可以解决这个问题。在它们的帮助下,你可以将有关颜色指定给一个变量一次,然后每次使用时只需将该变量作为CSS属性输入即可,就像这样:

:root {  
    --global--color-primary: #28303d;  
}  

a {  
    color: var(--global--color-primary);  
}  

.social-icons a {  
    background: var(--global--color-primary);  
}  

这样,当您要进行更改时,只需要在一个地方进行更改即可。酷吧?过去,你需要采用SASS这样的预处理程序来使用变量,现在它是CSS的一个原生功能。

正如您在上面看到的,自定义属性也非常易于使用。在文档开头的 :root 选择器下定义你的变量(注意双连字符 -- 在变量前面,这就是将它们定义为自定义属性的原因,而且它们是区分大小写的!)。之后,你可以通过 var() 函数在整个文档中使用它们。

如果你想改变一个变量,只需改变 :root 下的声明就可以了。

至于此CSS功能的采用程度如何,浏览器支持非常好:

你可能不知道的10个CSS新功能(2021版)

@supports

接下来,我们有一个类似于媒体查询的CSS规则。然而,@supports 并不是让CSS规则以屏幕大小或手机类型为条件,而是允许你根据用户浏览器支持的CSS属性和值来做同样的事情。

这有什么用?

正如你将在这篇文章中看到的那样,并非所有的浏览器和设备都支持所有的CSS功能。虽然你通常可以使用回退声明来处理这个问题,但在某些情况下,如果你不特别包含对旧技术的支持,就会严重破坏你的网站。

此外,你还可以使用 @supports 为更现代的浏览器添加额外的功能或样式,以便处理它们(这就是为什么使用 @supports 的查询也被称为“功能查询”)。

如何使用功能查询

如果你熟悉媒体查询,使用支持检查将非常容易。下面是如何使用它:

@supports (display: grid) {  
    .site-content {  
        display: grid;  
    }  
}  

正如你所看到的,它只是简单的规则,后面的括号里是你要检查的属性或属性值对。之后就是通常的CSS声明,如果满足条件,要应用什么规则。

上面的例子指出,如果浏览器支持CSS grid(稍后会有更多的说明),它应该将 display: grid; 应用到带有 .site-content 类的元素上。

还需要注意的是,@supports 理解操作符notand、和 or(也可以组合)来创建更具体的规则,比如为不支持该特定功能的浏览器提供回退。

@supports not (display: grid) {  
    .site-content {  
        float: left;  
    }  
}  

为了正确地使用@supports,你需要知道哪些浏览器支持它,好消息是所有现代浏览器都支持。

你可能不知道的10个CSS新功能(2021版)

但是,由于这些查询的目标是启用或禁用旧浏览器无法处理的特性,所以请确保正确地构造它们。这意味着,如果要使用特性查询,请为支持特性查询的浏览器创建它。

Flexbox Gaps

Flexbox是我们之前详细讨论过的另一个CSS布局模块。长期以来,它的一个弱点就是flexbox间隙,也就是可以定义行和列之间的中断。

值得庆幸的是,浏览器对这个CSS功能的支持正在改善。现在您可以开始使用 gaprow-gapcolumn-gap 在使用Grid、Flexbox和Multi-Column Layouts创建的布局中创建空间。

这是一个简短的示例,说明在flexbox中的外观:

.flex-gap-test {  
    display: inline-flex;  
    flex-wrap: wrap;  
    gap: 16px;  
}  

<div class="flex-gap-test">  
    <div>1</div>  
    <div>2</div>  
    <div>3</div>  
    <div>4</div>  
    <div>5</div>  
    <div>6</div>  
</div>  

这是在页面上:

你可能不知道的10个CSS新功能(2021版)

虽然可以通过页边距来实现同样的布局,但它需要更多的标记和变通方法,而不是简单地声明间隙大小。

content-visibility

content-visibility 是一个非常酷的新CSS功能,可以提高网站性能。它的工作原理基本上就像懒惰加载一样,只是不针对图片,而是针对任何HTML元素。您可以使用它来阻止网站的任何部分加载,直到其可见为止。

使用也超级简单,只需将其应用到你所选择的元素上,就像这样:

.content-below-fold {  
    content-visibility: auto;  
}  

content-visibility 有三个值。默认情况下,它被设置为可见,在这种情况下,元素会像往常一样加载。另外,你也可以将其设置为hidden,在这种情况下,无论元素是否可见,都不会被渲染。另一方面,当设置为 auto 时,可见区域外的元素将被跳过,一旦出现在屏幕上,就会被渲染。

很酷的东西,对不对?

在这种情况下,有一点可能也很重要,那就是 contain-intrinsic-size。由于设置为 content-visibility: hidden; 的元素实际上大小为零,这让你可以为隐藏的元素应用一个理论上的高度和宽度,以便浏览器可以从一开始就考虑到它,而不是在元素渲染时才考虑。这样,您可以避免在滚动过程中布局突然改变。

浏览器对 content-visibility 的支持还有点不完善,但也在不断完善中。同样的,对于contain-intrinsic-size的支持也是如此。

你可能不知道的10个CSS新功能(2021版)

一旦被更广泛地采用,我预测它将成为加快渲染过程的最有效工具之一。

Transitions, Transforms, Animations

在以前,如果你想让东西在你的网站上移动,你通常不得不求助于JavaScript(或动画GIF,对于那些属于MySpace一代的人)。然而,你可能不知道的是,多年来CSS也有能力让东西动起来。实现这类事情的三大工具是:

  • 过渡 Transitions——允许你使一个属性值到另一个属性值的变化(如悬停效果)平滑而不是突然。

  • 转换 Transformations——使您可以在2D和3D空间中移动,旋转和缩放元素。

  • 动画 Animations——在CSS中设置简单或复杂的动画,并配置它们的运行方式和时间。

自然,我们没有篇幅在这里详细介绍这三个方面的内容。然而,让我们为每个人做一些速成的例子,让你对可能的事情有一个印象。

CSS过渡

这是CSS过渡的快速示例:

div {  
    width: 100px;  
    height: 100px;  
    transition: height 3s;  
}  

div:hover {  
    height: 500px;  
}  

当有人悬停在元素上时,上面的标记将使 div 高度的增加速度减慢到3秒。

CSS转换

以下是CSS转换的示例。当有人将鼠标悬停在元素上方时,它将使元素顺时针旋转30度:

div:hover {  
    transform: rotate(30deg);  
}  

CSS动画

最后,是展示CSS动画的简短代码段:

@keyframes color-change {  
    from {background-color: blue;}  
    to {background-color: yellow;}  
}  

div:hover {  
    animation-name: color-change;  
    animation-duration: 3s;  
}  

注意如何使用 @keyframes 命名动画并定义其功能,然后使用 animation-name 将其应用于元素。animation-duration 控制完成的时间,还有其他类似的属性。

如果你想尝试所有这些,好消息是,浏览器的支持非常好,因此,没有任何障碍可以让您随意旋转CSS过渡,转换和动画。

滚动捕捉

Scroll snapping让你可以选择将用户的视口锁定在你网站的某个部分或元素上。它对创建酷炫的过渡非常有用,并帮助用户在向下滚动页面时关注最重要的页面元素。

这种效果在移动应用程序中很多可见,但是,通过滚动捕捉,您也可以将其带到网站上。

在最基本的层面上,使用也相对简单。你只需将滚动捕捉的类型应用到一个容器上,并定义它的子代应该捕捉到哪里。

.container {  
    scroll-snap-type: y mandatory;  
}  

.container div {  
    scroll-snap-align: start;  
}  

浏览器的兼容性还算不错。

你可能不知道的10个CSS新功能(2021版)

然而,请注意,所有可用的滚动捕捉属性的支持有点不均衡。因此,请务必检查您的特定用例。

:is 和 :where

在我们的新CSS特性列表中,你可能不知道的最后一个条目是 :is:where 伪类。它们允许你通过缩短CSS选择器的列表来减少CSS标记的重复。

例如,比较一下:

.main a:hover,  
.sidebar a:hover,  
.site-footer a:hover {  
    /* markup goes here */  
}  

对此:

:is(.main, .sidebar, .site-footer) a:hover {  
    /* markup goes here */  
}  

相同的东西适用于 :where

:where(.main, .sidebar, .site-footer) a:hover {  
    /* markup goes here */  
}  

如果标记是一样的,有什么区别呢?不同的是 :is 更具体。它取括号中最特殊的元素的特殊性程度。相比之下,:where 的特异性永远是零。因此,再往下覆盖就容易多了。

浏览器的应用还有点不稳定,但慢慢就会有了。所以,请随意开始尝试。

还有其他值得一看的CSS新功能吗?

像所有其他的Web技术一样,CSS标记也在不断发展。这意味着,总是有新的CSS功能可以发现,有新的东西可以尝试和试验。

上面,我们已经看了一些CSS如今已经能够做到的事情的例子,你可能会忽略。

你最喜欢现代CSS的什么功能?在下面的评论区分享吧

收藏
评论区

相关推荐

《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS基础知识整理
### **1 什么是CSS?** CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ###
CSS定位概要
关于css定位,你需要知道的5件事 ----------------- 近年来前端工程师已经可以通过不同的css布局技巧制作出很复杂的布局。其中有些技巧有很长的历史(比如:[floats](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdrafts.csswg.org%2Fcss-box
CSS扩展语言
CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有! // 语法 // <custom-preperty-name> 自定义属性名 // <declaration-value>
SASS入门教程及用法指南
作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。面对这些问题,我们现在来引进一个[SASS](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.haoro
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
Selenium2学习(六)
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求。css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁。 这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到。两篇对比学习,更容易理解。 一、css:属性定位