令人期待的 CSS 新功能：让编码更高效

怼烎@ 2024-02-18 11:41 46阅读 0赞

CSS 是一种不断发展的语言。每一次迭代，它都会变得越来越好。因此，了解最新的 CSS 功能非常重要，这样你才能在项目中使用它们，减少对第三方库的依赖。

本文将介绍一些即将推出的 CSS 新特性，这些特性将简化你的开发工作。虽然这些特性尚未在所有浏览器中支持，但可以提前使用它们，以适应未来的项目需求。在不支持这些特性的浏览器中，它们大多会被忽略。

### **text-wrap 属性** ###

text-wrap 属性用于指定元素中的文本是否应换行。它是 CSS 文本模块第 4 级规范的一部分。

该属性可以接受多个值，但最有趣的值是 balance 和 pretty 。

如果将 text-wrap 属性设置为 balance ，浏览器将尝试以元素的最后一行与第一行一样长的方式对文本进行换行。如果希望元素中的文本具有一致的外观，这将非常有用。例如，在博客文章的标题中。

另一方面，如果将 text-wrap 属性设置为 pretty ，浏览器就会尝试智能地将文本分成块元素，使最后一行不会出现单字/孤字。

### **作用域 css** ###

现在，我们可以使用 @scope 规则在特定元素内设置 CSS 作用域。从本质上讲，它允许你创建一个只适用于特定元素及其子元素的 CSS 规则。

举例来说，如果你想在某个特定元素内对 CSS 进行范围/限制，可以使用类或 ID 选择器来实现，就像这样。

@scope (.class-component, #id-component) {
      /* CSS rules */
    }

下面举例说明如何使用它:

.all-green p {
      color: darkgreen;
    }
    
    @scope(.all-pink) {
      p {
        color: #c94f65;
      }
    }

上面将确保 .all-pink 元素内的p 元素呈现粉红色，而 p 元素外的 p 元素呈现绿色。

对 CSS 进行作用域界定有助于避免使用过于具体的选择器，也有助于避免在 CSS 中使用 !important 。

### **自动增加文本区域** ###

CSS 规范中即将出现一个名为 form-sizing 的新 CSS 规则，它将允许我们控制 <textarea> 等元素的大小调整行为。

textarea {
        form-sizing: normal;
    }

将 form-sizing 属性设置为 normal 后，浏览器将在用户键入 <textarea> 元素时自动增加该元素的高度。

### **查看过渡** ###

CSS 规范中即将出现一个名为 view-transition 的新元标记，它将允许我们在用户滚动页面时控制视口的转换。

例如，如果想在用户浏览新页面时为视口添加淡入效果，可以这样做。

<meta name="view-transition" content="same-origin">

在这里， same-origin 值将确保只有当用户导航到同一原点内的页面时才会发生转换。

这使得页面之间的过渡更加无缝，不那么生硬。更像一个本地应用程序。

### **light-dark() 函数** ###

light-dark() 是一个新的 CSS 函数，可让我们为明暗模式指定不同的值

body {
      background-color: light-dark(white, black);
    }

这将确保 body 元素的背景颜色在浅色模式下为白色，在深色模式下为黑色。

除了用户的主题偏好外， light-dark() 函数还可用于根据颜色主题属性在两个值之间进行切换。

:root {
      color-scheme: light dark;
    }
    
    :root {
      --text-color: light-dark(#333, #ccc); 
      /* In Light Mode = return 1st value. 
      In Dark Mode = return 2nd value. */
    }

### **CSS 中的嵌套** ###

最近，Safari 浏览器技术预览版 162 和 Chrome 浏览器开发版（在浏览器中启用 "实验性网络平台功能 "标志）中发布了一个名为 CSS 嵌套模块的模块。

启用后，就可以在本地 CSS 中编写上述类似于 Sass 的代码。

.parent {
        .child {
            color: red;
        }
    
        #childWithId {
            color: red;
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关令人惊艳的高效算法

令人惊艳的高效算法在计算机科学领域，算法是解决问题的关键。有一些算法因其高效性和惊人的表现而令人惊艳。让我们一起来分享一些你可能会觉得令人惊艳的高效算法。排序算法

不念不忘少年蓝@/ 2024年03月16日 13:28/ 0 赞/ 63 阅读

相关令人期待的 CSS 新功能：让编码更高效

CSS 是一种不断发展的语言。每一次迭代，它都会变得越来越好。因此，了解最新的 CSS 功能非常重要，这样你才能在项目中使用它们，减少对第三方库的依赖。本文将介绍一些即将推

怼烎@/ 2024年02月18日 11:41/ 0 赞/ 47 阅读

相关 Doctest：让你的测试更简单高效

![efb9c6da0cff42c68e6aeede878226ef.png][] 简介：Doctest 是 Python 标准库的一部分，它允许开发者通过在文档字符串（do

╰半夏微凉°/ 2023年10月16日 14:50/ 0 赞/ 68 阅读

相关让您的编码游戏更快！！！

最大限度地减少上下文切换：一次专注于一项任务，而无需在多个任务之间来回跳转。这有助于避免额外的精神负担并延长时间。使用片段和快捷方式：许多代码编辑器都有片段和快捷方式，您可

浅浅的花香味﹌/ 2023年10月12日 19:26/ 0 赞/ 56 阅读

相关 20个最让人期待的 jQuery 相册插件

您可能还喜欢 [Web开发者必备的20款超赞jQuery插件][Web_20_jQuery] [分享30个最佳 jQuery Lightbox 效果插件

Bertha 。/ 2023年06月03日 03:56/ 0 赞/ 11 阅读

相关 Itertools让你的Python更高效

Itertools让你的Python更高效列表拼接 chain(iterables) 逐个累积 accumulate(iterable\[, func, \

骑猪看日落/ 2022年12月01日 15:42/ 0 赞/ 181 阅读

相关 E3来了，今年有哪些令人期待的游戏新作？

这是【游戏开发那些事】第50篇原创 ![bc0fb40423b891d9c4d4a42874745336.png][]E3，全称Electronic Entertainmen

水深无声/ 2022年10月07日 07:54/ 0 赞/ 158 阅读

相关 12个令人难以置信的CSS实验项目

> 翻译：疯狂的技术宅 > 原文：[https://1stwebdesigner.com/12-incredible-pure-css-experiments/][http

迷南。/ 2022年03月21日 12:42/ 0 赞/ 203 阅读

相关 15种CSS混合模式让图片产生令人惊艳的效果

如果你曾经广泛地使用过图片编辑应用软件（例如，Adobe Photoshop，Pixelmator，GIMP等），那么你可能对混合模式比较熟悉。如同名称中所暗示的，混合模式是指

川长思鸟来/ 2021年12月23日 03:57/ 0 赞/ 938 阅读

相关 Adaptive Execution 让 Spark SQL 更智能更高效

> Spark 灰度发布在十万级节点上的实践 > > Adaptive Execution 可在 Spark Job 执行过程中，自动基于中间结果的统计信息优化后续的执行

淩亂°似流年/ 2021年09月17日 18:50/ 0 赞/ 334 阅读