作用域 CSS 回来了

几年前,消失的作用域 CSS,如今它回来了,而且比以前的版本要好得多。

更好的是,W3C规范基本稳定,现在Chrome中已经有一个工作原型。我们只需要社区稍微关注一下,引诱其他浏览器构建它们的实现,并完成这项工作。

这是什么思路?

作用域为CSS带来了两个关键点:

  1. 更好地控制哪些选择器针对哪些元素(即更好地操作级联)。

  2. 一组样式可以基于DOM中的位置覆盖另一组样式。

局部样式允许你在页面上的单个组件内包含一组样式。你可以使用.title选择器,它只在Card组件内工作,并使用另一个.title选择器,它只在 Accordion 中工作。你可以阻止一个组件的选择器针对子组件中的元素,或者如果需要,也可以允许它们到达。

你不再需要BEM风格的类名。

此外,近度在级联中变成了一等公民。如果两个组件针对同一个元素(具有相同的特异性),内部组件的样式将覆盖外部组件的样式。

它是如何工作的?

一切都始于@scope规则和一个选择器,如下:

@scope (.card) {/* 将以下样式局限于`.card`内部 */:scope {padding: 1rem;background-color: white;}.title {font-size: 1.2rem;font-family: Georgia, serif;}
}

这些样式都限制在.card元素中。:scope是一个特殊的伪类,针对.card元素本身,.title针对标题内部的标题。

@scope规则本身不增加这些选择器的特异性,所以它们都是(0, 1, 0)。是的,特异性仍然很重要,但这是好事™️。稍后再说。

此时,你可以使用普通的后代选择器来实现这一点。但当你在范围内应用内部边界或在页面上重叠多个范围时,新的、以前不可能的选项开始出现。让我们看看它们是怎么做的...

内部范围边界

假设你预计将其他组件放入你的Cards中,所以你不希望.title 选择器针对除属于Card的那个标题之外的任何东西。为此,你在范围上设置了一个内部边界,如下:

@scope (.card) to (.slot) {/* 限定的样式只在`.card`内部,但不在`.slot`内部 */:scope {padding: 1rem;background-color: white;}.title {font-size: 1.2rem;font-family: Georgia, serif;}
}

把这里的 to 关键字看作 直到:这个范围是从.card.slot定义的。现在,没有一个局限的选择器会针对Card的.slot元素内部的任何东西。所以你可以这样构建你的卡片:

<div class="card"><h3 class="title">Moon lander</h3><div class="slot"><!-- 局部样式不会针对这里的任何东西! --></div>
</div>

范围的影响受到了限制,使其不针对.slot内的任何东西。这样,你可以嵌套两个范围,每个范围都可以使用相同的通用标题类名,而不会发生冲突。实际上,你可能根本不再需要类名了:

@scope (.card) to (.slot) {h3 {font-size: 1.2rem;font-family: Georgia, serif;}
}@scope (.accordion) to (.slot) {h3 {font-family: Helvetica, sans-serif;text-transform: uppercase;letter-spacing: 0.01em;}
}

你可以在 Card 内部放一个 Accordion,或者在 Accordion 内部放一个Card,它们各自的样式不会发生冲突。

这被俗称为 甜甜圈范围,因为范围中有一个洞。(如果内部边界选择器针对多个元素,它也可以有多个洞。)

Miriam Suzanne 建议使用这种方式是持续使用data-*属性和属性选择器作为你的范围:

@scope ([data-scope='media']) to (:scope [data-scope]) {/* 限定的样式在这里 */
}

近度优先 Proximity precedence

另一个方面是近度的概念:来自内部范围的样式将覆盖来自外部范围的样式。想象你有这样两个范围:

@scope (.green) {p {color: green;}
}@scope (.blue) {p {color: blue;}
}

将以下内容应用于HTML。这里没有内部范围约束,所以两个p选择器都针对这里的内部段落。在这种情况下,内部范围总是优先:

<div class="green"><p>我是绿色的</p><div class="blue"><p>我是蓝色的</p></div>
</div><div class="blue"><p>我是蓝色的</p><div class="green"><p>但我是绿色的</p></div>
</div>

注意这目前只在Chrome中有效,需要在chrome://flags中启用实验性Web平台功能标志。

你可以在DevTools中检查,看到每个范围是如何根据其最近的接近性来覆盖另一个的:

28bc86d499a7f84d525b808b0c88c940.png

ac3f6718baed42ed2abedb3da4d26b74.png

这里的问题是,选择器的特异性仍然是优先的,所以如果外部范围以比内部更高的特异性针对一个元素,外部范围的样式将会应用。

这样,当两个范围针对同一个元素时,你可以控制哪一个优先。而不是总是让内部范围赢,你可以调整选择器的特异性,使得更高特异性的选择器优先,不管它属于哪个范围。

当你不希望这种行为时,你有几种方法可以防止它。你可以使用级联层来使一个组件——或者一个组件的某些部分——优先于另一个。或者,你可以应用一个内部范围约束到外部范围,以防止它发生。在尝试了一段时间的范围后,我觉得这是一个正确的平衡。它给了你最大的控制权,而不是让你受制于级联的一套严格的规则。

这是一个游戏的转折点

如果你开发过大型应用,并且不得不依赖 CSS-in-JS 库来防止类名冲突,作用域 CSS是个很好的选择。如果你使用了复杂的BEM类名系统,并努力使所有的选择器特异性保持一致,想想这可以带来的自由。如果你曾经使用过shadow DOM来隔离样式,但觉得它过于重手,这是一个更好的方法(当然,shadow DOM仍然有它的用途)。

以下只是我会尝试的一些想法:

  1. 定义一个组件的部分,有一个内部边界,部分没有,所以它的“chrome”样式(即包装器、切换按钮等)不影响其子内容,但它可以影响文本内的外观。

  2. 在不同的级联层上定义一个组件的部分,这样它可以影响其包含的范围,但仍然容易在更高的层次上覆盖。

  3. 嵌套的颜色主题。

  4. 在博客文章中更容易地防止样式冲突。

  5. 容器查询—我们能通过混合和匹配来提出什么?

我们需要更多的浏览器支持

到目前为止,Chrome 似乎已经支持了—他们已经有了第一个工作原型几个月了。它可能稍微落后于规范的最新变化,所以如果你玩一下,要留意一些即将到来的小变化。

欢迎长按图片加刷碗智为好友,定时分享 Vue React Ts 等。

72fd58cf7d07baa39ebef60c6f354751.png

最后:

vue2与vue3技巧合集

VueUse源码解读

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/144230.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetCode 198.打家劫舍 动态规划

198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#…

Hash Index 原理和应用精讲

线上沙龙 - 技术流第 35 期回放来啦 本期直播我们邀请到 KaiwuDB 高级研发工程师徐胜康&#xff0c;为大家分享 Hash Index 原理和应用。徐老师曾任职于 Sun Micro Systems, Lucent 等公司&#xff0c;具备多年 Linux/UNIX Operating System 内核、驱动、文件系统、数据库、研…

java生成PDF的Util

java使用itext生成pdf-CSDN博客 接上文 支持绘制表格 支持表格中的文本 字体加粗、字体上色、单元格背景上色&#xff0c; 支持拼接文本 支持单行文本 多种背景颜色、字体上色 支持自定义水印 废话不说先上效果图 工具类代码 package com.zxw.文件.PDF.util;import com.…

本地搭建kafka并用java实现发送消费消息

1、下载kafka的jar包文件 https://www.apache.org/dyn/closer.cgi?path/kafka/3.1.0/kafka_2.12-3.1.0.tgz2、下载完成直接操作命令启动 1、打开新的terminal(终端)窗口&#xff0c;进入kafka的bin目录 启动zk./zookeeper-server-start.sh ../config/zookeeper.properties2、…

LinkedList与链表

目录 一、Arraylist的缺陷 二、链表 2.1 链表的概念和结构 2.2 链表的实现 三、链表面试题 3.1 删除链表中所有值为val的节点 3.2 反转一个单链表 3.3 链表的中间节点 3.4 将有序链表合并 3.5 输出倒数第k个节点 3.6 链表分割 3.7 链表的回文结构 3.8 找两个链表的公共节…

现场直击|亚数TrustAsia精彩亮相IOTE深圳物联网展,CSA联盟展台等你来!

2023年9月20日&#xff0c;IOTE 2023第二十届深圳国际物联网展在深圳国际会展中心&#xff08;宝安&#xff09;顺利开幕。作为物联网领域年度最重要的行业盛会之一&#xff0c;本次展会汇聚全球来自工业、物流、基建、智慧城市、智慧零售等领域的600企业、10万行业人士&#x…

严重影响Windows使用体验的一些建议

1内存不够用&#xff1a;通过观察我发现我的电脑已经评价到了90%的内存使用率 没有内存什么程序运行起来都会卡的&#xff0c;所以一定要把不用的PROGRAME给他删除掉。特别是那些自动启动的软件&#xff0c;如果实在不行&#xff0c;就把杀毒也给他卸载掉。 不良具体表现&…

Java基础面试题精选:深入探讨哈希表、链表和接口等

目录 1.ArrayList和LinkedList有什么区别&#xff1f;&#x1f512; 2.ArrayList和Vector有什么区别&#xff1f;&#x1f512; 3.抽象类和普通类有什么区别&#xff1f;&#x1f512; 4.抽象类和接口有什么区别&#xff1f;&#x1f512; 5.HashMap和Hashtable有什么区别&…

Ubuntu为什么键盘会出现乱字符

今天上午起来只是要简单打一个命令&#xff0c;需要输入一个"双引号&#xff0c;但是总是显示&#xff0c;我一开始以为是中了病毒&#xff0c;把键盘给改了&#xff0c;后来发现虚惊一场&#xff1a;出现这个原因是因为ubuntu的键盘设置有问题。 我把键盘设置为英国英语…

【C++进阶(六)】STL大法--栈和队列深度剖析优先级队列适配器原理

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; 栈和队列 1. 前言2. 栈和队列的接口函数熟悉3. …

欧伟杰博士:突破算力边界,YashanDB实现理论与工程双重突围

作者介绍 *全文4767个字&#xff0c;阅读时长约12分钟。 背景 随着数字化进程的加速&#xff0c;数据处理的规模和速度需求持续攀升。传统数据库系统在处理大规模数据时&#xff0c;存在单表记录数不超过500万条的限制&#xff0c;这已成为业务发展的瓶颈。为了解决此问题&…

No146.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

MySQL5.7高级函数:JSON_ARRAYAGG和JSON_OBJECT的使用

前置准备 DROP TABLE IF EXISTS t_user; CREATE TABLE t_user (id bigint(20) NOT NULL,name varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci …

杀掉进程但是fastapi程序还在运行

两个脚本&#xff0c;一个运行fastapi服务&#xff0c;一个重启服务&#xff1a; 启动服务先&#xff1a; 发现问题&#xff0c;杀掉 server.sh 后&#xff0c;依旧有&#xff1a; 不知道为什么会出现这个&#xff0c;直接kill吧&#xff1a; server.sh: #!/bin/bashparpath/…

led灯什么牌子的质量好?Led护眼台灯排行榜

现在我们很多家长对自己孩子的视力十分关心&#xff0c;生怕自己的孩子是近视、远视、弱视等等。对于父母而言&#xff0c;在孩子读书压力大课业重的关键时期&#xff0c;为孩子选择合适的桌椅&#xff0c;保护灯具从而保护孩子的眼睛是非常重要的事情!那么买给孩子读书做功课的…

Matlab绘图函数subplot、tiledlayout、plot和scatter

一、绘图函数subplot subplot(m,n,p)将当前图窗划分为 mn 网格&#xff0c;并在 p 指定的位置创建坐标区。MATLAB按行号对子图位置进行编号。第一个子图是第一行的第一列&#xff0c;第二个子图是第一行的第二列&#xff0c;依此类推。如果指定的位置已存在坐标区&#xff0c;…

基于Java的音乐网站管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&…

前端uniapp防止页面整体滑动页面顶部以上,设置固定想要固定区域宽高

解决&#xff1a;设置固定想要固定区域宽高 目录 未改前图未改样式改后图改后样式 未改前图 未改样式 .main {display: flex;flex-direction: row;// justify-content: space-between;width: 100vw;// 防止全部移动到上面位置&#xff01;&#xff01;&#xff01;&#xff01…

No147.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

【在Ubuntu部署Docker项目】— PROJECT#1

一、说明 让我们深入了解 Docker。用docker构建web服务器。我们正在计划开发JavaScript API&#xff0c;建立MySQL数据库&#xff0c;并创建一个 PHP 网站使用 API 服务。Php Node.js Mysql — DockerSeries — Episode#1 二、系统架构概述 我们要构建的容器&#xff0c;是三…