优化CSS重置过程:探索CSS层叠技术的应用与优势

这篇具有很好参考价值的文章主要介绍了优化CSS重置过程:探索CSS层叠技术的应用与优势。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

下面是正文~~

CSS重置方法

方法的结合

合并方法的问题

通用移除样式

顺序很重要

CSS 优先级

我们的CSS特异性冲突

CSS Layers 来拯救

Sass 预处理器支持

浏览器支持

总结


这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。

文章详细讨论了CSS层叠技术的使用方法和优势。它介绍了几个关键概念,包括层叠顺序、z轴定位和层叠上下文等。它还提供了实际的示例和代码片段,以帮助读者理解如何使用CSS层叠来实现更好的样式控制和管理。

该文章还提到了使用CSS层叠技术时可能遇到的一些挑战和注意事项。它建议在使用CSS层叠时要小心处理层叠顺序和优先级,以避免样式冲突和不一致的呈现。

下面是正文~~

我一直是倾向于使用更为积极的CSS重置方法的人。这些方法会清除浏览器中大部分默认的样式,例如,它会移除从<h1><h6>元素默认的标题样式,这些样式通常具有较大的字体大小和字体粗细。

然而,我也喜欢 Normalize CSS 如何处理阴影 DOM 元素,这是我们在任何 CSS 重置方法中都没有的。

然而,我也喜欢Normalize CSS处理影子DOM元素的方式,这是我们在任何CSS重置方法中都没有的。 因此,我总是在寻找方法将它们两者结合起来。即便如此,我仍然遇到了一些CSS优先级问题,需要找到一种解决方法。

快进到今天,所有的浏览器现在都支持CSS层。因此,在开发Appwrite的开源设计系统Pink Design时,我们开始重新思考如何更好地处理这个问题。

优化CSS重置过程:探索CSS层叠技术的应用与优势,css,前端,css,前端

在我们开始之前,让我们先谈谈一些关于CSS重置方法的内容。

CSS重置方法

多年来,一直存在着一种“争论”,即哪种CSS重置方法更好。

在这次比赛中,我们采用了两种熟悉的方法:

  1. **Normalize CSS ** — 一种温和的方法,可以修复浏览器之间的差异,同时保留HTML元素的本地样式,例如 <h1> , <h2> 等标题元素。

如之前提到的,Normalize CSS也负责处理在不同浏览器中可能会有差异展现的Shadow DOM元素。

Normalize CSS 中处理 Shadow DOM 元素的演示:

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
  1. CSS Reset —— 相较而言,CSS重置是一种更为激进的方法,常常会废除浏览器“用户代理样式表”的默认样式。

CSS重置演示:

此代码将撤销 <h1> 的特殊 font-size 、 font-weight 和 margin ,将其转换为 <h6> 元素:

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit; 
  font-weight: inherit;
}

方法的结合

通过结合 Normalize CSS CSS Reset 两种方法,你可以从两种方法中获益。

这样可以确保处理内部 shadow DOM元素,并忽略从“用户代理样式表”继承的无用样式。实现这一点最简单的方法是同时加载两者。以下是如何在Sass预处理器中实现的演示:

/* CSS Resets */
@use 'normalize';
@use 'reset';

你可能会认为,如果我们首先加载Normalize CSS,然后再加载CSS Reset,这会使我们的CSS Reset具有更强的特异性,对吗?不完全是这样的;让我们谈谈这方面的一些问题。

合并方法的问题

在Appwrite Pink中,我们使用Normalize CSS,同时与“新的CSS重置方法”结合使用。“新的CSS重置方法”是一种新的重置CSS的方式,利用了新的原生CSS重置功能。

对于“Normalize CSS”和“The New CSS Reset”这两个项目,我们都是原封不动地使用它们(来自NPM),甚至包括来自Normalize CSS的不必要部分,比如修复<h1>元素的不同样式,这将会在CSS重置中被移除。

“Normalize CSS”中的 Header <h1> 样式:

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

通用移除样式

在“The New CSS Reset”中,通用移除样式(包括元素):

/*
    Remove all the styles of the "User-Agent-Stylesheet", 
    except for the 'display' property.
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

但是这里开始出现了问题。为了理解这些问题,让我们先谈谈基本的CSS,它定义了我们的样式:

顺序很重要

CSS选择器的顺序很重要。这是因为通常情况下,后面的样式比前面的样式更强。在我们的情况下,CSS重置文件的顺序是正确的。

首先,我们想要加载“Normalize CSS”,它将规范化不同浏览器之间的差异,然后我们想要使用CSS重置来删除我们不需要的内容,在我们的情况下,这是使用“The New CSS Reset”完成的。

Scss 导入的示例:

/* CSS Resets files order */
@use 'normalize'; /* 1 */
@use 'reset';     /* 2 */
/* In general, last code is stronger in CSS */

CSS 优先级

我们根据CSS选择器的强度(元素、类名和ID名)来定义我们选择器的优先级。从最弱到最强的选择器依次为元素选择器、类选择器和ID选择器。

在这个例子中,ID选择器将赢得“CSS特异性战争”,因为ID选择器比类名选择器或元素选择器更强。

这意味着 <h1> 元素的颜色将会是粉色。

<h1 class="title" id="mainTitle">some content</h1>
#mainTitle { color:pink;   } /* 1 (ID), 0 (Classes), 0(element) */
.title     { color:yellow; } /* 0 (ID), 1 (Classes), 0(element) */
h1         { color:red;    } /* 0 (ID), 0 (Classes), 1(element) */

我们的CSS特异性冲突

如果我们看一下<h1> 元素的Normalize CSS选择器,它具有一个元素的能力:

/* 0 (ID), 0 (Classes), 1 (element) */
h1 {...}

这是一个相对较低强度的选择器。

让我们来看一下来自“The New CSS Reset”的主要CSS重置选择器:

/* 0 (ID), 0 (Classes), 0 (element) */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {...}

为了尽可能地降低特异性,使用 :where() 伪选择器。 :where() 伪选择器的主要思想之一是消除选择器创建的任何CSS特异性。

但这里产生了冲突<h1>的样式比CSS重置的样式更为强大,这对我们来说是个问题。

解决这个冲突的一种方法是移除 Normalize CSS 中不必要的部分,也就是移除所有非 Shadow DOM 部分的样式。但是,如果我们从 NPM 包中自动加载项目,这可能会成为一个问题,因为这样很难维护。

CSS Layers 来拯救

CSS层是为了解决这样的问题而发明的,即我们希望告诉浏览器,特定的层比其他层更重要,并忽略其他层的CSS优先级。

为了做到这一点,我们有@layer规则,这规则定义了一个层。它将部分样式包裹起来,定义层的部分,并在层自身内部实行CSS优先级。

这个做法本身就能解决我们的问题。

为了更精确地定义层的顺序,我们可以添加一个 @layer,这将决定你希望代码按何种顺序出现。

@layer normalize {
  /* CSS Normalize Here */
}
@layer the-new-css-reset {
  /* CSS Reset here */
}

这本身就会解决我们的问题。为了更精确地定义层的顺序,我们可以添加“layer statement”,以确定你希望代码出现的顺序。

示例:

/* layer statement - define the order, 
   even if the order of the code will not be in the same way */
@layer normalize, the-new-css-reset;

@layer normalize {
  /* CSS Normalize Here */
}
@layer the-new-css-reset {
  /* CSS Reset here */
}

Sass 预处理器支持

@use 'sass:meta';

@layer normalize, the-new-css-reset;

@layer normalize {
  @include meta.load-css('normalize');
}
@layer the-new-css-reset {
  @include meta.load-css('the-new-css-reset');
}

这样,我们可以将CSS层分别保存在不同的文件中,并确保在保持代码整洁的同时,最后一层能在“样式优先级之争”中胜出。

浏览器支持

CSS layers  已经在所有主流浏览器中实现了相当长的时间

优化CSS重置过程:探索CSS层叠技术的应用与优势,css,前端,css,前端

总结

本文主要探讨了我们如何解决CSS优先级问题,尤其是关于CSS重置层面的问题。

随着我们接近2023年底,随着用户升级他们的浏览器,这种使用CSS层来解决CSS冲突的方法将越来越常见。

在构建Pink Design的过程中,我们有幸为开发者这种类型的用户提供服务,他们通常会定期更新浏览器。因此,我们选择了采用这种新的、利用CSS层进行开发的方法。文章来源地址https://www.toymoban.com/news/detail-578230.html

到了这里,关于优化CSS重置过程:探索CSS层叠技术的应用与优势的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解释区块链技术的应用场景和优势

    区块链技术是一种分布式数据库技术,用于存储和传输数字资产(如加密货币)的信息。它通过将交易记录分散保存到节点网络中的多个节点上,从而保证了数据的安全性和透明度。区块链技术的核心是基于密码学技术的算法,通过这些算法保证了数据的完整性和安全性。除

    2024年02月03日
    浏览(41)
  • 解释区块链技术的应用场景和优势。

    区块链技术是一种分布式账本技术,其应用场景和优势如下: 应用场景: 金融和银行业:区块链可以用于货币交易、借贷和金融结算等方面,从而提高交易速度和安全性。 物流和供应链管理:区块链可以帮助实现物流信息的全程跟踪和验证,从而提高供应链的透明度和可追

    2024年02月04日
    浏览(44)
  • CSS_三大特性上_特性继承和层叠

    特性: 1、子元素有默认继承父元素样式的特点( 子承父业 ) 2、可以继承的常见属性(文字控制属性都可以继承) 1.color 2.font-style、font-weight、font-size、font-family 3.text-indent,text-align 4.line-height 注意点: 可以通过调试工具判断样式是否可以继承 特性: 1、给同一个标签设置不

    2024年02月08日
    浏览(49)
  • 【css】z-index与层叠上下文

    z-index属性用来设置元素的堆叠顺序,使用z-index有一个大的前提:z-index所作用元素的样式列表中必须有position属性并且属性值为absolute、relative或fixed中的一个,否则z-index无效。 层叠上下文 MDN讲解 我们给元素设置的z-index都是有一定规则的,层叠性都是在它有定位的父元素起作

    2024年02月09日
    浏览(36)
  • 北斗RTK差分定位技术原理、优势及应用领域

    北斗卫星导航系统是中国自主建设的卫星导航系统,是继美国GPS、俄罗斯GLONASS和欧盟Galileo之后,全球第四个卫星导航系统。北斗系统非常重要,可用于国防、公共安全、民生等多个领域,包括交通运输、环境保护、渔业等。差分定位则是北斗系统中的一项重要功能,利用多

    2024年02月07日
    浏览(52)
  • CSS3-三大特性-继承性、层叠性、优先级

        CSS三大特性         1 继承性         2 层叠性         3 优先级         1 继承性             特性:子元素有默认继承父元素样式的特点(子承父业)             可以继承的常见属性:                 1 color                 2 font-style、font-weight、font-size、fo

    2024年02月11日
    浏览(42)
  • Linux下HTTP隧道技术的应用场景与优势分析

    亲爱的Linux侠们,今天我们来聊一聊Linux下HTTP隧道技术的应用场景与优势。在这个网络时代,HTTP隧道技术就如同一位神秘的“魔法师”,为我们解决了许多棘手的网络问题。 首先,让我们来看看HTTP隧道技术在哪些场景下能大展身手。 1. 远程办公 :你是否曾因为身处异地而无

    2024年02月19日
    浏览(51)
  • 【优化技术专题】「性能优化系列」针对Java对象压缩及序列化技术的探索之路

    序列化和反序列化 序列化就是指把对象转换为字节码; 对象传递和保存时,保证对象的完整性和可传递性。把对象转换为有字节码,以便在网络上传输或保存在本地文件中; 反序列化就是指把字节码恢复为对象; 根据字节流中保存的对象状态及描述信息,通过反序列化重建

    2024年01月22日
    浏览(57)
  • IP代理技术在网络安全与爬虫应用中的优势与挑战

    一、IP代理技术简介 IP代理是一种将客户端请求通过中间服务器转发至目标服务器的网络技术。通过代理服务器,客户端的真实IP地址被隐藏,从而提高用户的匿名性和隐私保护。常见的IP代理类型有HTTP代理和SOCKS代理。 二、IP代理在网络安全中的应用 防止DOS和DDOS攻击:IP代理

    2024年02月14日
    浏览(55)
  • 「探索API的奇妙世界:理解、使用和优化接口技术」

    引言: 在现代科技的时代,API(应用程序编程接口)已经成为各行业中不可或缺的关键技术。从手机应用到云计算,从社交媒体到物联网,几乎所有的软件都在背后使用着API来实现数据交互和功能扩展。在这篇文章中,我们将深入探索API的奇妙世界,从理解API的基本概念开始

    2024年02月16日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包