CSS

容器查询中的 container 和 @container

从《初探CSS容器查询》一文中我们知道了容器查询是是什么以及它的作用。使用 contain来创建一个包含上下文,同时使用 @container 规则,可以在符合条件下为查询容器的后代单独指定样式规则。简单地说,可以使用 CSS 容器查询,让同一个组件根据其容器的不同尺寸向用户呈现不同的UI效果。该特性目前是 CSS Containment Level 3 中的一个特性,这个功能模块中除了 contain@container 之外,还新增了一个容器属性 container,也可以使用 container@container 结合实现容器查询效果。在这篇文章中,我们就来看看 container@container 是如何工作的,它们可能会有哪些功能!感兴趣的同学,请继续往下阅读!

初探CSS容器查询

CSS的原生嵌套、作用域(@scope)、级联层(@layer和容器查询(@container)被称为 下一代 CSS,并且在整个社区得到热议。比如,刚举办的 W3C TPAC 会议就专门有一个这方面的话题。尤其是容器查询(@container),更令人兴奋。从基于页面的响应式设计到基于容器的响应式设计的转变,将对Web设计生态系统的发展产生巨大的影响。因为,容器查询将使单个元素有可能根据局部的环境进行调整,而不是依赖整个视窗的尺寸。从今天开始,我将和大家一起进入容器查询的世界,和大家一起了解为什么需要容器查询,它们将来何使Web设计和开发变得更轻松,最重要的是,容器查询将现更强大的组件和布局,尤其是响应式的布局。

初探 CSS 的级联层(@layer)

稍微接触过 CSS 的 Web 开发者,级联(层叠)和继承 是 CSS 领域中的一个非常重要的概念。该功能模块在 W3C 规范中也经历了多个版本的迭代,至今天已有多个版本了(CSS2.2Level3Level4Level5),这也足以说明其在 CSS 中的重要性。对于 Web 者而言,在编写 CSS 时,必须仔细考虑如何编写和组织代码。特别是在一个大型项目或多人协作开发的项目中,级联很容易给项目开发造成不少的障碍,比如说代码相互覆盖,选择器权重造成样式的冲突等。为了在这些情况下重新获得对级联(层叠)的控制,CSS Cascading and Inheritance Level5 规范中新增了一个新的 CSS 特性,即 @layer 规则(一个新的 @ 规则,也就是大家所说的 at-rule 规则),该规则让 CSS 有了层的概念,可以将 CSS 完全封装起来,以便导入。这意味着模块、脚本或其他任何导入你的项目的东西都可以有完全独立的 CSS,从而解决了样式相互覆盖的老问题,也解决了选择器权重造成的样式冲突问题。它还可以让我们更灵活地使用用自定义导入语句,将CSS添加到到页面中。接下来,让我们来看看它们是什么,我们如何使用它们,以及它们带来了什么好处。

聊聊重置 CSS 那些事儿

重置CSS (Reset CSS) 最近因 @Elad 发布的最新版本而又热闹起来。加上我又热衷于 CSS,只要是有关于 CSS 最有趣、最新、最实用的方面,我都希望能第一时间在国内的社区呈现(分享)。那么问题来了,重置 CSS 已是很古老的话题了,在今天有啥好聊的呢?原本我也是这么想的,但 @Elad 最新版本的重置 CSS 项目,它还是非常有意思的,我觉得有必要拿出来和大家一起分享,或者说聊聊这里面有关于 CSS 方面的新特性。如果你对这方面的话题感兴趣(想一探究竟),那么接下来的内容值得你花点时间阅读。

图解CSS:Grid布局案例之构建杂志报刊类布局

一直以来,在 Web 布局中都是以方方正正的矩形向用户展示 UI 效果,而且众多 Web 开发者的意识中也是如此,Web 的布局是无法打破矩形排列的限制!但 Web 技术的发展速度是惊人的,每天都有新的东西出现在我们的眼前。就在这短短的几年时间内,用于 Web 布局的新特特别的多。换句话说,如果今天设计师跟你说:“亲,整一个类似杂志或报刊类的布局吧”!你会爽快的说 OK! 即,使用现在的新特性可以打破矩形框的限制,让你在 Web 上实现像杂志一样的排版布局。

图解CSS:Grid布局案例之构建交叉布局

前两个有关于 CSS Grid 案例,主要介绍了如何使用 CSS Grid 来构建 重叠布局Full-Bleed 布局。今天我们来一起再来看另一个由 CSS Grid 构建的网格布局,即 交叉布局。通过这个案例来更好的帮助我们更进一步理解 CSS Grid 的相关属性在实际中(Web 布局)如何使用。

Web Fonts 的优化:F-mods

前面花了三篇的篇幅(Web Fonts vs. 系统字体FOUT、FOIT 和 FOFTWeb Fonts 字体加载策略)围绕着 Web Fonts 的优化做了些探讨。但这些优化手段都还是会引起 Web 布局偏移。不过,CSS 的一些新特性,即 F-mods(字体度量覆盖描述符)来覆盖字体的一些度量参数,让系统字体字体(备用字体)和 Web Fonts 更接近,尽可能的减少布局偏移。

Web Fonts 的优化:Web Fonts 字体加载策略

前面的篇幅(Web Fonts vs. 系统字体FOUT, FOIT 和 FOFT)告诉我们,使用 Web Fonts 会造成布局偏移,页面渲染时会发生重排和重绘。这会让页面在渲染时变得更慢,用户体验会更差。如果我们要对此进行优化,减少 Web Fonts 引起的布局偏移,就要从字体加载方面去做相应的优化策略。我们接下来主要围绕着字体加载策略来展开今天的话题,感兴趣的同学请继续往下阅读。

Web Fonts 的优化:FOUT, FOIT 和 FOFT

在上一节中,我们一起探讨了 Web Fonts 和 系统字体之间的差异。在这一部分我们一起来探讨使用 Web Fonts 时,浏览器加载 Web Fonts 和渲染 Web Fonts 的策略。其实,聊 Web Fonts 就离不开 FOUTFOITFOFT 话题,特别是 FOUTFOIT 。简单地说,FOUT、FOIT 和 FOFT 都是浏览器渲染文本的三种不同的表现,特别是 Web Fonts 被引入到 Web 中时,浏览器对 FOUT 和 FOIT 的优化就没有停止过。

Web Fonts 的优化:Web Fonts vs. 系统字体

Web Fonts 在 Web 中的使用已随处可见,比如聚划算页面中的 价格 使用的就是 Web Fonts(即 AlibabaSans102-Bd。虽然使用 Web Fonts 能在视觉上达到更好的效果(满足设计师的需求),但对于 Web 性能是有影响的,给用户的体验也是有影响的。如果Web Fonts 未加载,浏览器通常会延迟任何使用 Web Fonts 的文本(比如聚划算的价格)。这在许多情况下,将延迟 FCP(First Contenttful Paint),在某些情况下也会延迟 LCP(Largest Contentful Paint)。甚至更为严重的是导致布局偏移(Layout Shifts),会触发页面的重排和重绘(Web Fonts 和它的备用字体或系统字体在页面上占用不同的空间), 也会触发 CLS(Cumulative Layout Shift)。更令人感到头痛的是,Web Fonts 造成布移偏移的原因是 FOUT(Flashes Of Unstyled Text),而且 FOUT 还是业内公认的难以解决的。简单地说,Web Fonts 对视觉效果是有显著帮助,但对Web性能和用户体验是有严重影响。如果在实际业务中能避免 Web Fonts 的使用应该尽可能的不用,如果实在不能避免,那就要在使用 Web Fonts时做一些策略上的选择。接下来,我们围绕着 Web Fonts 的使用和性能优化来展开讨论。

页面

返回顶部