2023 年 CSS 新特性大盘点 css最新特性
yuyutoo 2024-10-12 00:22 3 浏览 0 评论
2023 年对 CSS 来说是重要的一年,在这一年中迎来了众多功能更新,从基础到展现,再到交互,让开发人员实现了曾经认为在 Web 开发中不可能实现的众多功能。container queries、subgrid、:has() 选择器、颜色函数等等已经被所有现代浏览器所支持。此外 Chrome 浏览器还可以使用 CSS 的滚动驱动动画,并能通过视图转换在网页视图之间流畅地显示动画。最重要的是,如 CSS 嵌套和 Scope 块级作用域等,也为开发人员带来了更好的开发体验。
主要特性如下:
- 基础篇
- 原生 CSS 嵌套
- Scope 作用域
- 三角函数
- 响应设计篇
- :has() and :empty()
- Size container queries
- Reduced-transparency media query
- Style container queries
- Scripting media query
- 交互体验篇
- Scroll-driven animations
- View transitions
- Linear-easing function
- @starting-style
- 其他
- :user-valid and invalid pseudo classes
- Horizontal rules in select
- color-mix function
1.基础篇
1.1.原生 CSS 嵌套
这个是小懒最喜欢的一个功能更新,在 《现代CSS系列》 的很多文章示例使用的都是 CSS 原生嵌套语法。
原生 CSS 嵌套可以像 SASS、LESS 预处理器一样,将相关的选择器组合在一起,从而减少需要编写的规则数量,它可以节省打字时间,并使语法更易于阅读和维护。您可以将选择器嵌套到任意深度,但要小心不要超过两层或三层。嵌套深度没有技术限制,但它会使代码更难以阅读,并且生成的 CSS 可能会变得不必要的冗长。
代码示例:
.button {
background-color: red;
&.warning {
background-color: blue;
}
& .icon {
width: 1rem;
height: 1rem;
}
}
兼容性:
需要注意的是,虽然原生 CSS 嵌套语法在过去几年中不断发展,使大多数 Web 开发人员感到满意,但不要指望所有 SCSS 代码都能像您期望的那样直接工作。
详细阅读:
1.2.Scope 作用域
Chrome 118 版本已经实现对 CSS @scope 的支持,以允许在样式表中对样式进行区块级作用域,进一步提高 BEM 的优势。这使样式更易于维护,同时提供对影响任何前端应用程序的 CSS 层叠的更严格的控制。
代码示例:
在此 HTML 中,我们可以使用以下方法对 .section-two 样式区域中的元素进行样式设置:
.container {
max-width: 600px;
margin: 0 auto;
.section {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
& h2 {
font-size: 16px;
line-height: 36px;
text-align: center;
background-color: #ccc;
margin: 0;
}
& p {
font-size: 24px;
text-align: center;
}
}
}
@scope (.section-two) {
p {
color: #f00;
}
}
兼容性:
详细阅读:
1.3.三角函数
Chrome 111 版本新增了对三角函数 sin()、cos()、tan()、asin()、acos()、atan()和atan2()的支持,使所有主要引擎都能使用这些函数。这些函数在制作动画和布局时非常方便。
语法规则:
/* Single <angle> values */
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));
/* Single <number> values */
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));
/* Other values */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));
兼容性:
2.响应设计篇
2.1.:has() 和 :empty()
:empty 伪类可以匹配任何没有子元素的元素。当前已经得到所有主流浏览器的支持。如果该元素是一个空元素,我们可以结合 display 属性使用来隐藏元素。
近 20 年来,开发人员一直要求在 CSS 中选择 "父选择器",直到 :has() 的出现,这一切都可以实现了。当 :has() 和 :not() 结合时,我们可以在很多复杂场景中应用,比如查找子元素有空元素的元素、隐藏一个不包含某个子元素的父元素等。
代码示例:
.box {
display: flex;
width: 80%;
height: 80px;
background-color: #ccc;
border-radius: 5px;
margin: 0 auto 10px;
justify-content: center;
align-items: center;
}
.box:not(span:has(:empty)) {
display: none;
}
兼容性:
详细阅读:
现代CSS:使用 :empty 和 :has() 隐藏空元素
2.2.Size container queries
通过容器查询,可以根据元素容器的大小对元素应用样式。例如,如果容器周围的可用空间较小,就可以隐藏某些元素或使用较小的字体。容器查询是媒体查询的一种替代方法,后者可根据视口大小或其他设备特性对元素应用样式。
代码示例:
article {
padding: 1rem;
font-size: 1rem;
}
@container (min-width: 60ch) {
article {
padding: 2rem;
font-size: 1.25rem;
}
}
兼容性:
详细阅读:
2.3.Reduced-transparency media query
Chrome 118 版本新支持的功能。不透明的界面会让各种视力缺陷的人感到头痛或视觉疲劳。这就是为什么 Windows、macOS 和 iOS 的系统偏好设置可以降低或移除用户界面透明度的原因。此 prefers-reduced-transparency 媒体查询与其他首选项媒体查询非常契合,既能让你发挥创意,又能为用户提供调整。
代码示例:
body {
--opacity: .5;
background: hsl(200 100% 50% / var(--opacity));
@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}
兼容性:
详细阅读:
现代CSS:新媒体查询 prefers-reduced-transparency 初探
2.4.Style container queries
Style queries 已在 Chrome 浏览器 111 中部分实现。目前,通过样式查询,您可以在使用 @container style() 时查询父元素上的自定义属性值。例如,查询自定义属性值是否存在,或是否设置为特定值,如@container style(--rain:true)。
代码示例:
我们可以使用 @container style() 检查容器是否具有 display: flex 样式,来定制子元素的展现样式。
.page-header {
display: flex;
}
@container style(display: flex) {
.page-header__start {
flex: 1;
display: flex;
align-items: center;
border-right: 1px solid lightgrey;
}
}
/* 也可应用于 CSS 变量 */
.card-container {
--boxed: true;
}
@container style(--boxed: true) {
.card {
/* boxed styles */
}
}
兼容性:
详细阅读:
CSS Container Style QueriesOpenReplay
2.5.Scripting media query
scripting media query 可用于检查 JavaScript 是否可用。这对渐进增强非常有用。在使用媒体查询之前,检测 JavaScript 是否可用的策略是在 HTML 中放置一个 nojs 类,然后用 JavaScript 将其移除。现在,直接使用 CSS 可以检测 JavaScript 并进行相应调整,因此这些脚本也可以移除。
该功能在最新的 Chrome 120 版本已经被支持,大家可以更新浏览器体验。
代码示例:
通过脚本媒体查询可以直接判断,当 JavaScript 脚本可用时,设置页面透明度为 1,否则设置为 0。
@media (scripting: none) {
.page {
opacity: 0;
}
}
@media (scripting: enabled) {
.page {
opacity: 1;
}
}
兼容性:
详细阅读:
scripting - CSS: Cascading Style Sheets | MDNMDN Web DocsMDN logoMozilla logo
3.交互体验篇
2023 年有许多交互设计相关的功能出现,使用这些功能实现部分场景的交互效果会更加容易。主要包括:滚动驱动动画、视图转换、渐进函数等功能。
3.1.Scroll-driven animations
Scroll-driven Animations 是网络上一种常见的用户体验模式。这些动画与滚动容器的滚动位置相关联。这意味着当你向上或向下滚动时,链接的动画会直接向前或向后刷新。想想有趣的效果,比如视差背景图片或随着滚动而移动的阅读指示器。一种类似的滚动驱动动画是与元素在其滚动容器中的位置相关联的动画。例如,有了它,元素可以在进入视图时淡入。
Scroll-driven Animation 规范中定义了两种新的 timeline,可以指定动画在元素滚动条滚动时运行,@keyframes 的进度也就跟着滚动进度进行。
- Scroll Progress Timeline: 表示容器已滚动的距离,从0%到100%
- View Progress Timeline: 标识容器内的元素相对于滚动距离的相对位置,从0%到100%。
代码示例:
main {
& section {
.pop-out-image {
view-timeline-name: --popper;
}
& figure {
& img {
animation-timeline: --popper;
animation-range: entry 100% cover 50%;
}
}
}
}
兼容性:
详细阅读:
现代CSS:纯 CSS 实现苹果风格(Apple-style)的图片滚动器
现代CSS:纯 CSS 实现滚动图像弹出(pop-out)效果
3.2.View transitions
View transitions 对页面的用户体验影响巨大。利用视图转换 API,您可以在单页应用程序的两个页面状态之间创建可视化转换。这些转换可以是整个页面的转换,也可以是页面上较小的内容,如在列表中添加或删除一个新项目。
视图转换 API 的核心是 document.startViewTranstion 函数。只要传递一个将 DOM 更新为新状态的函数,API 就会为你处理好一切。它的做法是获取之前和之后的快照,然后在两者之间进行转换。您可以使用 CSS 控制捕获的内容,还可以选择自定义这些快照的动画效果。
代码示例:
<style>
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 2s;
}
</style>
<details>
<summary>Toggle</summary>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam incidunt itaque accusantium, quis molestiae quia provident quas, rem consequuntur, fugiat placeat aperiam quo non! Aspernatur error et asperiores velit harum?
</details>
<script>
if (document.startViewTransition) {
document.addEventListener('click', function (event) {
if (event.target.matches('summary')) {
event.preventDefault()
// toggle the element
const details = event.target.closest('details')
document.startViewTransition(() => details.toggleAttribute('open'))
}
})
}
</script>
兼容性:
详细阅读:
3.3.Linear-easing function
不要被这个函数的名字所迷惑。linear() 函数(不要与 linear 关键字混淆)允许您以简单的方式创建复杂的缓和函数,但会损失一些精度。
在使用 Chrome 113 中的 linear() 之前,在 CSS 中创建反弹或弹簧效果是不可能的。有了 linear(),我们就可以将这些缓和效果简化为一系列点,然后在这些点之间进行线性插值。
代码示例:
:root {
--custom-easing: linear(
0,
0.06,
0.25 18%,
1 36%,
0.81,
0.75,
0.81,
1,
0.94,
1,
1
);
}
.bounce[data-method="css"] {
animation: move var(--custom-easing) 2s infinite both;
}
@keyframes move {
to {
translate: 0% 200%;
}
}
兼容性:
3.4.@starting-style
@starting-style CSS 规则建立在新的 Web 能力的基础上,用于在 display: none 和其他属性之间进行动画。这个规则提供了一种在元素打开之前,浏览器可以查找的 “before-open” 样式的方法。这对于进入动画以及动画显示弹出框或对话框等元素非常有用。它还可以在创建元素并希望给它动画效果时使用。
代码示例:
/* IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* EXIT STATE */
dialog {
transition: translate 0.7s ease-out, overlay 0.7s ease-out, display 0.7s ease-out allow-discrete;
translate: 0 100vh;
}
/* BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
兼容性:
详细阅读:
@starting-style - CSS: Cascading Style Sheets | MDNMDN Web DocsMDN logoMozilla logo
4.其他
4.1.:user-valid and invalid pseudo classes
Chrome 119 新增对 :user-invalid 和 :user-valid CSS伪类的支持,Chrome 119 稳定版本将于2023年10月25日正式发布。Firefox 88 和 Safari 16.5 已增加对改伪类的支持。
代码示例:
使用 :user-valid 和 :user-invalid 伪类,在 input 失去焦点时会自动提示
<style>
:root {
--color-default: grey;
--color-invalid: red;
--color-valid: green;
}
input:user-invalid {
border-color: var(--color-invalid);
}
input:user-invalid ~ .error-message {
display: block;
}
input:user-valid {
border-color: var(--color-valid);
}
</style>
<form>
<label for="email">E-MAIL:</label>
<input type="email" id="email" placeholder="" required autocomplete="off"/>
<p class="error-message">Please enter a valid e-mail address</p>
</form>
详细阅读:
前端快讯|Chrome 119 新增对 :user-invalid 和 :user-valid CSS 伪类的支持
4.2.Horizontal rules in select
Chrome 在 119 版本对 <select> 元素进行了小而强大的升级,Safari 17 中也实现了这项功能。现在,您可以在 select 选项列表中添加 <hr>(横向规则)元素,它们将显示为分隔符,有助于在视觉上分割选项,从而获得更好的用户体验。
详细阅读:
Chrome 119:select 元素支持添加 hr 元素,用户体验更好!
4.3.color-mix function
有了 color-mix() 您不仅可以将白色或黑色混合成一种颜色,还可以将透明度混合成一种颜色,并且可以在您选择的任何色彩空间中实现这一切。这既是基本的色彩功能,也是高级的色彩功能。
a {
&::before {
position: absolute;
left: -20px;
bottom: 10px;
width: 20px;
height: 100%;
content: "";
background-color: color-mix(in srgb, var(--color), black 20%);
transform: skewY(45deg);
transition: background-color 200ms;
}
&::after {
position: absolute;
left: -10px;
top: -20px;
width: 100%;
height: 20px;
content: "";
background-color: color-mix(in srgb, var(--color), black 20%);
transform: skewX(45deg);
}
}
.circle-02 {
--t: 2;
--k: calc(var(--t)/20);
fill: none;
transform: rotate(-90deg);
stroke-linecap: round;
stroke: color-mix(in hsl shorter hue, #8a9b0f calc(var(--k)*100%), #940a3d);
stroke-dasharray: var(--k) 1;
}
详细阅读:
总结
2023 年 CSS 经历了一次复兴,实现很多现代 CSS 功能,对 Web 开发者来说是一大利好,过去很多需要使用 JavaScript 实现的功能,现在可以直接使用 CSS 来实现了。让我们对未来充满期待,相信 CSS 还会带来更多的新功能。
相关推荐
- 野路子科技!2步教你把手机改造成一个FTP服务器,支持PC互传
-
哈喽,大家好,我是野路子科技,今天来给大家带来一个教程,希望大家喜欢。正如标题所言,就是教大家如何把售价改造成FTP服务器,而这个时候估计有朋友会问了,把手机改造成FTP服务器有什么用呢?现在有Q...
- 不得不看:别样于Server-U的群晖文件存储服务器的搭建与使用
-
我先前的作品中,有着关于Server-U的ftp文件存储服务器的搭建与访问的头条文章和西瓜视频,而且我们通过各种方式也给各位粉丝介绍了如何突破局域网实现真正意义上的公网访问机制技术。关于Server-...
- Qt三种方式实现FTP上传功能_qt引入qftp库
-
FTP协议FTP的中文名称是“文件传输协议”,是FileTransferProtocol三个英文单词的缩写。FTP协议是TCP/IP协议组中的协议之一,其传输效率非常高,在网络上传输大的文件时,经...
- Filezilla文件服务器搭建及客户端的使用
-
FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户...
- 美能达柯美/震旦复印机FTP扫描怎么设置?
-
好多网友不知道怎么安装美能达/震旦复印机扫描,用得最多是SMB和FTP扫描,相对于SMB来说,FTP扫描安装步骤更为便捷,不容易出问题,不需要设置文件夹共享,所以小编推荐FTP来扫描以美能达机器为例详...
- CCD(简易FTP服务器软件)_简单ftp服务器软件
-
CCD简易FTP服务器软件是一款很方便的FPT搭建工具,可以将我们的电脑快速变成一个FPT服务器。使用方法非常简单,只要运行软件就会自动生效,下载银行有该资源。该工具是不提供操作界面的,其他用户可以输...
- Ubuntu系统搭建FTP服务器教程_ubuntu架设服务器
-
在Ubuntu系统上搭建FTP服务器是文件传输的一个非常实用方法,适合需要进行大量文件交换的场景。以下是一步步指导,帮助您在Ubuntu上成功搭建FTP服务器。1.安装vsftpd软件...
- 理光FTP扫描设置教程_理光ftp扫描设置方法
-
此教程主要用来解决WIN10系统下不能使用SMB文件夹扫描的问题,由于旧的SMB协议存在安全漏洞,所以微软在新的系统,WIN8/WIN10/SERVER201220162018里使用了新的SMB传...
- 纯小白如何利用wireshark学习网络技术
-
写在前面工欲善其事必先利其器!熟悉掌握一种神器对以后的工作必然是有帮助的,下面我将从简单的描述Wireshark的使用和自己思考去写,若有错误或不足还请批评指正。...
- 京东买13盘位32GB内存NAS:NAS系统安装设置教程
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:yasden你没有看错,我在京东自营商城购买硬件,组装了一台13盘位,32GB内存的NAS,硬盘有13个盘位!CPU是AMD的5500!本文...
- python教程之FTP相关操作_python ftps
-
ftplib类库常用相关操作importftplibftp=ftplib.FTP()ftp.set_debuglevel(2)#打开调试级别2,显示详细信息ftp.connect(“I...
- xftp怎么用,xftp怎么用,具体使用方法
-
Xftp是一款界面化的ftp传输工具,用起来方便简单,这里为大家分享下Xftp怎么使用?希望能帮到有需要的朋友。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作、数据备份、到期提醒、自动更新...
- 树莓派文件上传和下载,详细步骤设置FTP服务器
-
在本指南中,详细记录了如何在树莓Pi上设置FTP。设置FTP可以在网络上轻松地将文件传输到Pi上。FTP是文件传输协议的缩写,只是一种通过网络在两个设备之间传输文件的方法。还有一种额外的方法,你可以用...
- win10电脑操作系统,怎么设置FTP?windows10系统设置FTP操作方法
-
打印,打印,扫描的日常操作是每一个办公工作人员的必需专业技能,要应用FTP作用扫描文件到电脑上,最先要必须一台可以接受文件的FTP服务器。许多软件都需要收费标准进行,但人们还可以应用Windows的系...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)