不容错过的CSS新特性

更新日期: 2022-03-09阅读: 799标签: 特性

一、容器查询

1. 基本概念

容器查询使我们能够根据其父元素的大小设置元素的样式,它类似于 @media查询,不同之处在于它根据容器的大小而不是视口的大小进行判断。这一直是响应式设计的一个问题,因为我们有时候希望组件能够适应它的上下文。

2. 使用方法

对于容器查询,需要使用 container 属性(它是 container-type 和 container-name 的缩写)指定一个元素作为容器。container-type 可以是width、height、inline-size、block-size。inline-size 和 block-size 是逻辑属性,根据文档的写入模式,它们可能会产生不同的结果。

main, aside {
    container: inline-size;
}

可以使用类似于媒体查询的方式来使用@container。需要注意,两者在括号中表达规则的方式有所不同(在容器查询中应该使用 inline-size > 30em 而不是 min-width: 30em)。这是媒体查询 4 级规范的一部分。当容器宽度大于 30rem 时,就切换到 flex 布局:

@container (inline-size > 30em) {
    .card {
        display: flex;
    }
}

css Containment Level 3 规范目前处于工作草案中,这意味着语法可能随时改变。

3. 当前状态

目前容器查询在主流浏览器是不可用的,可以期待一下容器查询在浏览器的实现。

CSS Containment Module Level 3 (官方规范):https://www.w3.org/TR/css-contain-3

二、:has()

1. 基本概念

:has()通常被称为“父选择器”,这个伪类使我们能够根据其后代选择一个元素。它有一些非常有趣的用例。例如,可以根据图像是否包含 ,而在中对图像进行不同的样式设置。

2. 使用方法

要设置包含<h2>的<section>元素的样式,可以执行以下操作:

section:has(h2) {
    background: lightgray;
}

当 <img> 的父级 <section> 包含 <h2>时,设置 <img>的样式:

section:has(h2) img {
    border: 5px solid lime;
}

3 当前状态

目前还没有主流浏览器支持该属性,但可以在 Safari 技术预览版中使用它。

Safari 技术预览版:https://developer.apple.com/safari/technology-preview/CSS Selectors Level 4 (官方规范):https://www.w3.org/TR/selectors-4/

三、@when/@else

1. 基本概念

@when/@else 是CSS中的条件规则,类似于其他编程语言中的if/else 逻辑。它可以使编写复杂的媒体查询更加符合逻辑。这里选择使用@when而不是@if是为了避免与 Sass 产生冲突。

2. 使用方法

可以查询多种媒体条件或支持的功能,例如用户的视口是否超过一定宽度,用户浏览器是否支持 subgrid。

@when media(min-width: 30em) and supports(display: subgrid) {
    
} @else {
    
}

3. 当前状态

现在该属性还没有在浏览器得到支持。现在还为时过早,仍在讨论中。预计今年不会广泛被浏览器支持,但它肯定是值得关注的一个非常实用的属性。

CSS Conditional Rules Module Level 5(官方规范):https://www.w3.org/TR/css-conditional-5

四、accent-color

1. 基本概念

color-scheme 属性允许元素指示它可以轻松呈现的配色方案。操作系统配色方案的常见选择是“亮”和“暗”,或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时,操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。

2. 使用方法

用法很简单,而且该属性是可继承的。所以可以在根级别设置它,以在任何地方应用它:

:root {
    accent-color: lime;
}

可以在单个元素上使用:

form {
    accent-color: lime;
}

input[type="checkbox"] {
    accent-color: hotpink;
}

3. 当前状态

目前,accent-color 在 Chrome、Edge、Firefox 和 Safari 技术预览版中已经得到了支持。不支持该属性的的浏览器会直接使用默认颜色,并且输入是完全可用的。

CSS Basic User Interface Module Level 4(官方规范):https://www.w3.org/TR/css-ui-4/

五、颜色函数

1. 基本概念

我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数,使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括:

  • hwb():色相、白度、黑度。
  • lab():亮度以及决定色调的 a和b值。
  • lch():亮度、色度、色调。
  • color-mix():将两种颜色混合在一起。
  • color-contrast():从颜色列表中,输出与第一个参数相比对比度最高的颜色。
  • color():指定不同颜色空间中的颜色(例如display-p3)。

2. 使用方法

hwb(), lab() 和 lch() 的使用方式与我 rgb() 和 hsl() 函数基本相同,都有一个可选的alpha 参数:

.my-element {
  background-color: lch(80% 100 50); 
}

.my-element {
  background-color: lch(80% 100 50 / 0.5); 
}

color-mix() 将其他两种颜色混合后输出一种颜色。我们需要指定颜色插值方法作为第一个参数:

.my-element {
  background-color: color-mix(in lch, blue, lime);
}

color-contrast() 需要一个基色来比较其他颜色。它将输出对比度最高的颜色,或者在提供额外关键字的情况下,输出列表中符合相应对比度的第一种颜色:

/*  输出对比度最高的颜色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* 输出符合AA对比度的第一种颜色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

3. 当前状态

Safari 目前在浏览器支持方面处于领先地位,从版本 15 就开始支持hwb()、 lch()、lab()、color(),color-mix() 和 color-contrast() 可以通过 flag 启用。Firefox 支持 hwb(),并且还标记了对 color-mix() 和 color-contrast() 的支持。令人惊讶的是,Chrome 现在还不支持这些函数。

代码中提供样式兼容并不难:给定两种颜色规则,如果浏览器不支持第二种颜色规则,它将忽略第二种颜色规则:

.my-element {
    background-color: rgb(84.08% 0% 77.36%);
    background-color: lch(50% 100 331);
}

这样,当浏览器支持该函数时,就可以直接使用了。

CSS Color Module Level 4(官方规范):https://www.w3.org/TR/css-color-4/CSS Color Module Level 5(官方规范):https://www.w3.org/TR/css-color-5

六、层叠层

1. 基本概念

层叠层让我们有更多的能力来管理CSS的“层叠”部分。目前,有几个因素决定了 CSS 代码中将应用哪些样式,包括选择器群众和出现的顺序。层叠层允许我们有效地将CSS分组(或者“分层”)。顺序较低的层中的代码将优先于较高层中的代码,即使较高层中的选择器具有更高的权重。

2. 使用方法

下面来看看层叠层的基本使用:

/* 按顺序创建图层 */
@layer reset, base, theme;

/* 将CSS添加到每个层 */
@layer reset {
  
}

@layer base {
  h1.title {
      font-size: 5rem;
  }
}

@layer theme {
  h1 {
      font-size: 3rem;
  }
}

theme 层中的CSS字体大小声明将覆盖base层中的字体大小声明,尽管后者选择器具有更高的权重。

3. 当前状态

最新版本的 Firefox 已经支持了层叠层,并且可以在 Chrome 和 Edge 中使用 flag 启用(Chrome 99 版本将全面支持层叠层)。看起来所有主流浏览器都在使用这个规范,所以希望尽快能得到更广泛的支持。

CSS Cascading and Inheritance Level 5(官方规范):https://www.w3.org/TR/css-cascade-5/

七、subgrid

1. 基本概念

作为 CSS Grid Layout Module 2 规范的一部分,subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。

例如,以下面这个带有标题的图像为例。标题的长度各不相同,使用 subgrid 可以直接让它们对齐,而无需设置固定的高度。


2. 使用方法

首先将父元素设置为grid布局,将子元素的“grid-template-columns”或“grid-template-rows”属性设置为 subgrid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

.grid > figure {
    display: grid;
    grid-template-rows: subgrid;
}

.grid figcaption {
    grid-row: 2;
}

完整代码:https://codepen.io/michellebarker/embed/YzERyor

3. 当前状态

值得注意的是,自 2019 年以来,Firefox 已经支持了 subgrid,但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它,所以可能有幸在今年看到它登陆 Chrome 和 Edge。

CSS Grid Layout Module Level 2(官方规范):https://www.w3.org/TR/css-grid-2/

八、@scroll-timeline

1. 基本概念

@scroll-timeline 属性定义了一个AnimationTimeline,其时间值由滚动容器中的滚动进度决定(而不是时间决定)。一旦指定,@scroll-timeline 将通过使用animation-timeline 属性与CSS Animation相关联。

2. 使用方法

这里来看一个简单的例子:

/* 设置关键帧动画 */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* 配置scroll timeline,这里将它命名为了slide-timeline */
@scroll-timeline slide-timeline {
  source: auto;
  orientation: vertical; 
  scroll-offsets: 0%, 100%; 

/*  指定关键帧动画和 scroll-timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

我们也可以对scroll-offsets属性使用基于元素的偏移量,以在特定元素滚动到视图中时触发 timeline:

@scroll-timeline slide-timeline {
    scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}

3. 当前状态

如果对 @scroll-timeline 感兴趣,可以在 Chrome 中使用 flag 来启用它。当我们遇到一个复杂的动画时,可能需要使用 JavaScript 动画库来实现,但是对于相对简单的动画,使用该属性就可以减少不必要的import。

Scroll-linked Animations(官方规范):https://drafts.csswg.org/scroll-animations-1/

九、嵌套

1. 基本概念

如果你熟悉 Sass,就会知道嵌套选择器的便利性。本质上,就是在父级中编写子级规则。嵌套可以使编写CSS代码更加方便,现在嵌套终于来到了原生 CSS!

2. 使用方法

从语法上讲,它与 Sass 相似。下面来给 class 为 card 中的 h2 子元素定义样式规则:

.card {
    color: red;

    & h2 {
        color: blue;
    }
}

可以将其用于伪类和伪元素:

.link {
    color: red;

    &:hover,
    &:focus {
        color: blue;
    }
}

这些就等价于下列 CSS 代码:

.link {
    color: red;
}

.link:hover,
.link:focus {
    color: blue;
}

3. 当前状态

目前还没有浏览器支持嵌套。如果你使用PostCSS,可以通过预置的 postcss-preset-env 插件来尝试嵌套。

CSS Nesting Module(官方规范):https://www.w3.org/TR/css-nesting-1/

十、总结

现在正处于 CSS 蓬勃发展的时代。在写这篇文章时,我注意到这些新功能有一些共同点,它们都是为了帮助我们编写更好、更干净、更高效的代码。随着时间的推移,预处理工具(如 Sass)可能会变得不再重要。让我们一起期待更多 CSS 新特性出现吧!

链接: https://www.fly63.com/article/detial/11248

CSS新特性contain,控制页面的重绘与重排

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

ES6新特性--var、let、const

var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改。

Js即将到来的3个新特性

Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

Angular 8的新特性介绍

在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

Js的用途和特性

JavaScript 最初的目的是为了“赋予网页生命”。这种编程语言我们称之为脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

十个超级实用的 JS 特性

你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性

解密HTTP/2与HTTP/3 的新特性

HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!