现代Web技术让我们离容器查询更近一步

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革,十年后的今天,CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大,但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过,庆幸的是,现代的一些 Web 技术(比如,FlexboxGrid媒体查询比较函数等)让我们离容器查询特性更近一步。今天我们来看看,这些现代Web技术是如何让我们离容器查询更近一步。

容器查询中的 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 的优化就没有停止过。

页面

返回顶部