CSS

图解CSS: Grid布局(Part13)

在 CSS 中,早期给元素设置宽高比都是通过一些 CSS Hack 来完成,比如padding-top(或 padding-bottom)的值为元素宽高比的百分比。不过自 Chrome90、Firefox88 和 Safar Technology Preview 之后,可以使用原生的 CSS 宽高比属性 aspect-ratio。在这一节中将和大家探讨宽高比(aspect-ratio)在 CSS 网格中的运用。在开始之前,先简单的回忆一下 CSS 的 aspect-ratio

如何构建一个完美缩放的UI界面

这是一个很有意思的话题,仅从标题中我们可以得到两个关键词 完美缩放。对于 Web 前端开发者而言,特别对于 UI 还原方面(天朝称“切图”,国外称“UI Developer”)更多追求的是像素级还原(即“Pixel-Perfect”),但随着更多的移动终端出现之后,特别更多的业务重心放到移动端之后,Web 开发者把更多的重心放在移动端。为此在业内出现了更多有关于移动端适配的方案,比如 Rem适配VW适配 等。但这些都离我们所说的像素级还原目标越来越远。换句话说,如果我们既要(像素级还级)又要(完美缩放或适配),该怎么办呢?如果你对该话题感兴趣,那么接下来的内容值得你花一定时间阅读。

系统偏好设置的那些事儿

如果你阅读过早前分享过的《CSS媒体查询新特性》和《给网站添加暗黑模式》相关的文章,就可能想到了今天这篇文章大致和大家要聊的是些什么东西。事实上也的确如此,但或许和想象的略有差异,因为在这篇文章和大家聊的并不是 CSS 的媒体查询,也不是教大家怎么给网站添加暗黑模式的主题。如果是这样的话,就有点对不起大家了,大家也会觉得我在不断的炒冷饭。接下来要和大家聊的虽然也和 CSS 有关联,但对于很多同学来说,还是很新,很有意思的东西。感兴趣的同学请继续往下阅读。

2021年你可能不知道的 CSS 特性

记得去年整理一篇也是关于 CSS 新特性方面的内容,即《2020年CSS有哪些新特性》。这回在 T(X) Team.午夜识堂 也和大家一起聊了一些 CSS 新特性方面的话题,主要是帮助团队同学能拓展一下 CSS 方面的新知识。虽然聊的是“新特性”,但其中有些特性并不怎么“新”,或许已在你的项目中,或许已接触过,只是不太了解而以。接下来,就和大家一起来简单地回顾一下这些特性,希望大家能喜欢,也希望对大家平时工作有所帮助。

图解CSS:CSS滚动捕捉(Part2)

图解CSS:CSS滚动捕捉这一章节分成两个部分,第一部分主要介绍了 CSS 滚动捕捉理论方面的知识,详细介绍了 CSS 滚动捕捉中的 scroll-snap-typescroll-snap-alignscroll-marginscroll-padding 以及 scroll-snap-stop 等属性。并且通过一些示例向大家展示了它们怎么使用。在第二部分,也就是接下来的内容中,从简单的示例着手(有些示例在第一部分也出现过),慢慢过渡到复杂的示例,比如模拟 iOS列表向左滑动的交互效果。如果你感兴趣的话,请继续往下阅读。

图解CSS:CSS滚动捕捉(Part1)

CSS 滚动捕捉是 W3C 中 CSS Scroll Snap Module Level 1 模块,可以用来创建一个可滚动的容器,可用来替代以往依赖 JavaScript 脚本来创建滑块组件。也就是说,使用该特性(CSS 的滚动捕捉特性)是快速将元素制作成可滚动容器的一种简单快速的方法。另外,CSS 滚动捕捉特性还可以帮助我们给用户更好的体验。接下来和大家一起来探讨这个 CSS 新特性,即 CSS 滚动捕捉。

CSS Houdini自定义属性@property给动效带来的扩展

Web中制作动效姿势有很多种,比如说纯CSS制作动效,JavaScript制作动效等。但话又说回来,如果你使用CSS来制作动效的时候会有不少的限制,虽然说CSS自定义属性的到来给CSS制作动效带来不少的变化,但还是有一定的缺陷在这里面。不过,CSS Houdini的到来,不说其自身的Animation API,就说他的自定义属性的出现,就可以帮助我们弥补CSS开发动效带来的缺陷和限制。换句话说,CSS Houdini的自定义属性 @property 可以扩展CSS的动效,也可以帮助我们提高CSS开发动效的能力。这篇文章,主要就是和大家一起来探讨,CSS Houdini的自定义属性是如何扩展动效开发的能力。

仅使用CSS提高页面渲染速度

用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅。如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验是必备的基础技能,而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊,在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。

纯CSS实现随机效果

最近在Codepen上看到了@Adir写的随机翻牌找蛋蛋(可以想象是砸金蛋)效果,让我再次刷新了对CSS的认知。看到这两个效果之后我才知道,在CSS中除了可以实现 动态计算逻辑运算状态切换 之外,也可以使用纯CSS实现随机效果。你是否和我一样,听到纯CSS实现随机效果有点不可思议,但这是事实,在CSS中,我们可以借助CSS动画的能力来模拟部分随机效果。如果你也想了解CSS如何实现随机效果的话,那阅读这篇文章你将知道其中的原委。

在CSS自定义属性中有效使用无效变量

CSS自定义属性已是CSS中非常成熟的特性了,也是近两年非常受欢迎的特性。它的到来让CSS像其他编程语言一样,可以在编写CSS的时候变量,而且还可以在CSS具备动态计算逻辑运算状态切换等特性。特别是CSS Houdini的CSS自定义属性更进一步的扩展了CSS的能力。就我个人而言,在几年前CSS自定义属性就进入我的世界,而且相关的规范也阅读过好几次。但自从阅读了@Lea Verou的《The -​-var: ; hack to toggle multiple values with one custom property》一文之后,我才发现自己遗漏了CSS自定义属性中一个非常关键,而且非常强大的特性。那就是CSS自定义属性中的无效变量,即var()函数中使用了一个无效的变量。如果我们在使用CSS自定义属性的时候,要是有效的使用了无效变量,它可以帮助我们实现一些非常有意思的功能。比如说状态切换,主题切换等。在接下来,我们就一起来探讨这方面的话题。

页面

返回顶部