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

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

这篇文章介绍了一种名为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重置方法更好。


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


**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 */
}


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重置层面的问题。


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


在构建Pink Design的过程中,我们有幸为开发者这种类型的用户提供服务,他们通常会定期更新浏览器。因此,我们选择了采用这种新的、利用CSS层进行开发的方法。

相关文章
|
9天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
9天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
9天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
9天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
9天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
9天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
9天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
9天前
|
前端开发 UED
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
|
9天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】HTML与CSS在电商网站中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在电商网站中的关键作用。HTML作为基础结构,定义网页内容和布局,用于页面布局、内容展示和表单处理;而CSS则负责样式设计和美化,包括响应式设计、交互效果和模块化,两者结合创建出功能齐全、视觉吸引力强的在线购物环境,提升用户体验。
|
9天前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。