CSS 作为前端的重要组成部分,虽然受瞩目的程度逊于 JS,但是也在不停地进步。CSS 可以让我们的开发环境更好,用户体验更佳,所以大家也需要保持关注。这里记录一些值得关注的新特性(评判标准由我主观决定),有些已经实装,可以取代旧样式,提供更好的效果;有些还没有普及,但是可以逐步应用到我们的产品当中,渐进式增强。
overflow-wrap
这个属性我还是通过 TailwindCSS 学到的。它可以用来处理文本换行,拥有 3 个可选值:
overflow-wrap: normal
默认值,按照标准模式换行overflow-wrap: anywhere
可以在任意处换行overflow-wrap: break-word
尽量利用宽度,只在超宽时打破单词换行
我们知道,中文一个字就是一个字,随时可以换行;而英文则把一个单词算作一个字,单词内部不能随意断开。但是有时候,容器宽度不够,文字就会撑破容器。以前我们只有 word-break: break-all
,但是 word-break: break-all
会在单词的任意位置断开,甚至在不必要的时候断开;而 overflow-wrap: break-word
会尝试把单词放到独立一行,如果还是不行,那就再断开。所以它的效果会更好。推荐大家使用。
Scoped CSS
CSS 的优先级非常重要,平时常常用到,面试的时候也会常常问到。CSS 优先级分成若干层级:
#id
.class
element
[attr="value"]
:pseudo-class
这样的优先级规划在大部分场景下,都能正常工作,但是当我们需要使用公共仓库,或者开发公共仓库的时候,就会遇到困难。
比如 Awesome Comment 项目,它是一个嵌入页面的评论框,用户可以把它嵌入到自己的网站当中,给自己的网站添加评论功能。我们使用 TailwindCSS + DaisyUI 作为样式库,直接使用一切都好,但是当我们要把它嵌入别的网页时,就可能跟目标页已有的样式产生各种冲突。于是,在 Scoped CSS 尚未普及的今天(主要是 Safari 不支持),我们就必须给所有样式加上 ac-
前缀,非常影响开发效率。还有一位同学,他想给现在使用 bootstrap 的项目里引入 TailwindCSS,也面临严重问题。
如果有了 Scoped CSS,我们只需要这样:
@scope (.awesome-comment) {
.a { }
}
就可以非常轻松地让我们的样式只在 .awesome-coment
节点内生效,且盖过其它样式。可以大大提升我们集成别人的样式,或别人使用我们样式时的效率。相信以后这个功能会大大改善第三方框架的开发。
更多更详细的用法,建议大家深入阅读:@scope – CSS: Cascading Style Sheets | MDN (mozilla.org)。
<textarea>
根据内容自动缩放
这项目功能目前还在讨论之中:[css-ui] ? Allow <textarea> to be sized by contents. · Issue #7542 · w3c/csswg-drafts (github.com)。大概意思是,<textarea>
用途非常广泛,让它能够根据内容长度自动调整大小会非常有价值。不过,具体选用什么方案,目前还没有定论。
我搜了一下,目前无论 form-sizing
还是 field-sizing
都还没有进入规范,也没有间接实现方案(比如 PostCSS),所以大家先保持关注吧。
View Transition 视图切换动画
View Transition 让我们的产品可以在页面切换时,复用一些页面元素,展现出漂亮的动画,让用户更加理解页面逻辑。如下面这则视频所示,当用户点击列表中的链接时,大标题、作者等信息会以动画形式,移动到页头位置;当用户回到列表页的时候,它们又会移回列表里的相应位置。
使用 View Transition 的方法比较复杂,我暂时还没有 Demo,所以就不详细说明了,大家感兴趣的话,可以看下面两个链接:
- Getting started with View Transitions on multi-page apps | daverupert.com
- https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
light-dark()
函数
light-dark()
函数可以接受两个参数,分别作为 light 模式和 dark 模式下生效的属性。如以下代码所示:
body {
background-color: light-dark(white, black);
}
不过我觉得这个函数的作用不会很大,我还是喜欢集中定义和管理这些变量。
color-mix()
函数
相对来说,我觉得 color-mix()
函数的作用就大多了,它可以基于一个颜色,生成新的值。比如,我们先约定一批颜色,分别作为 primary
、secondary
、success
、error
等,然后使用 color-mix
函数,生成一些衍生颜色,以便适用在 disabled
,active
,highlight
等场景下。
使用方式也比较简单,它接受 3 个参数:混合模式,颜色1,颜色2。比如下面的代码,就是两种颜色各取一半,以 srgb 模式混合,得到新颜色。其中百分比也可以调整,比较好理解。
/* 减淡,即混合白色 */
color: color-mix(in srgb, var(--primary) 50%, white);
/* 加深,即混合黑色 */
background-color: color-mix(in srgb, var(--primary) 50%, black);
有兴趣的同学可以深入了解:color-mix() – CSS: Cascading Style Sheets | MDN (mozilla.org)。
原生嵌套 CSS
嵌套 CSS 相信大家在使用预处理工具的时候都会用到:
.a {
.b {
.c { }
}
}
因为确实有用,所以如今原生 CSS 也开始支持嵌套,可惜有些浏览器还没有支持。我建议大家先配合 TailwindCSS 使用,等到将来都支持了,再去掉 TailwindCSS 即可。
export default {
plugins: {
'tailwindcss/nesting': {},
tailwindcss: {}, // 不需要 TW 的话可以不要这行
autoprefixer: {},
},
}
详细规范请继续阅读:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting。
CSS 容器查询
我猜大部分同学都用过 @media query
,以适配不同设备和分辨率。但我们现在已经是组件化开发的时代,很多时候,我们需要让自己的组件能够适配不同的使用场景,于是仅仅根据分辨率调整布局就不够了。万一被用在桌面显示器上,但是本身只占据一小块空间,那就无法保证用户体验。
这个时候我们可以使用 CSS 容器查询(Container query),它的用法很简单,首先,假设我们的组件渲染出来的 HTML 是这样的:
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
接着,我们要把目标容器标记为“容器控制上下文”(containment context)。未特意标记的容器不会产生容器查询,我猜这样可以减轻浏览器布局的计算负担。最后,使用 @container
查询,让容器在某个尺寸时,内部某些样式生效,即可:
.post {
container-type: size;
}
/* 默认样式 */
.card h2 {
font-size: 1em;
}
/* 仅在容器 >= 640px 时才生效的样式
@container (min-width: 640px) {
.card h2 {
font-size: 2rem;
}
}
容器查询还有一些进阶用法,大家可以深入阅读:CSS container queries – CSS: Cascading Style Sheets | MDN (mozilla.org)
总结
好的,先写这么多。感谢所有标准贡献者、开源软件开发者、社区参与者,我们 Web 开发者能收获现在的成就,跟所有贡献者的辛勤工作分不开。
希望这些新特性能尽早进入实装,成为我们开发时的利器。
如果你有什么想补充的,或者有问题想讨论一下,欢迎留下评论。
发表回复