CSS自定义属性

CSS Houdini:深入理解CSS自定义属性

这几天一直在折腾CSS自定义属性,在《图解CSS:CSS自定义属性》和《CSS 自定义属性在Web组件中的应用》都在聊CSS自定义属性。但这个CSS自定义属性和今天要聊和CSS的自定义属性还是有所不同的。他们隶属于两个不同的规范,前者是CSS Custom Properties for Cascading Variables Module Level 1,后者是CSS Properties and Values API Level 1。虽然都是W3C规范中的内容,但还是有较大差异的。而今天要和大家聊的是后者,即CSS Houdini中的CSS自定义属性。

图解CSS:CSS自定义属性

众所周之,CSS的维护一直是件不易的事情,特别是在构建大型Web站点或Web应用程序时,如果是多人协作的话难度更大。另外,由于CSS语言是一种声明式语言,而且不像其他语言有变量、条件和逻辑等特性,一直生存在程序语言鄙视链的最底层。也因为这个原因,社区中有了各种CSS处理器语言,比如Sass、LESS和Stylus等。这些处理器语言引入了一些类似其他程序语言的特性,比如变量、运算符和逻辑运算等。虽然CSS处理器给编写和维护CSS带来了一些便利,但还是需要额外的编译。不过处理器中的变量着实为我们带来很大的优势,也正因为如此,社区开始将CSS处理器中的变量引入到原生CSS中,经过多年的推进和演变才有了今天的CSS自定义属性。

CSS 自定义属性在Web组件中的应用

今天我们不聊什么是CSS自定义属性,而把重点放在CSS自定义属性在组件中怎么使用,她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中,我们主要会探讨CSS自定义属性为Web组件服务,以及怎么利用CSS自定义属性来维护组件。

如何使用CSS实现黑暗模式和高亮模式的切换

Web技巧第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值darklight来进行切换,这是从最底层也是最原生的解决方案,除此之外还可以通过CSS的混合模式属性来模拟。当然,除了期刊中提到的技术方案之外,还有其他的一些解决方案。今天我们就来一起学习一下,如何实现黑暗模式和高亮模式之间的切换。

CSS Grid和自定义属性带来的变化

好久没有整理有关于CSS方面的文章了,说实在心理还是痒痒的,但取舍有度。不过最近看了几篇有关于CSS的文章还是蛮有意思的。两篇是关于页面布局的,另外一篇是关于动画函数的。事实上,布局动画在CSS中都是较为重要的部分。当然,今天要提的知识点并不是什么非常新的知识点,但也是有创意和创新的知识点。比如不通过媒体查询实现响应式布局,比如说容器单位构建强大的布局,比如说动画函数(缓动函数)的反转。听听这些是不是觉得非常有意思,如果你和我也一样,请继续往下阅读。

如何通过CSS自定义属性给CSS属性切换提供开关

CSS自定义属性相关的教程在互联网上可以说是铺天盖地,从简单的介绍,到使用指南的整理,以及相关的经验之谈等等。时至今天而言,CSS的自定义属性是一项很成熟的CSS特性,在很多方面都可以给前端开发者带来诸多的益处。而且在现代浏览器中也得到了较好的支持。当然,虽然CSS自定义属性已得到很好的支持,但很多同学还在担心其是否可以运用于生产环境,甚至也有不少的同学还在排斥该特性。虽然如此,我还是想花点时间再和大家聊聊今天的主题。这个主题来自于@Ana tudor大神在去年年底发布的两篇文章,可以说是把CSS自定义属性运用的淋漓尽致。

currentColor与CSS自定义属性之间的差异

变量对于CSS而言是这两年大家关注的一个话题。对于变量而言,最早是出于CSS的一些处理器语言当中,比如Sass、LESS之类的。随着CSS的发展,变量的概念也被引入到CSS中。时至今日,在CSS中的变量不被称作变量,而被称为CSS自定义属性。该特性让我们维护CSS、编写CSS变得更易。而事实上呢?在CSS最早的变量之一是currentColor。该特性也可以更好的帮助我们编写CSS和扩展CSS。那么今天我们来开另一个话题,currentColor和CSS自定义属性又有何差异呢?接下来的内容,我们就来一起探讨这方面的细节。currentColor和自定义属性之间还是存在一些有趣的区别。这两个都是CSS中动态属性的例子,但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同,接下来的内容将向大家揭开。

视窗单位在移动端上的使用技巧

视窗单位一直都存在争议,部分原因是因为移动端浏览器对如何实现视窗单位有着自己的看法,这样就让本来简单的事情变得更加复杂化。一个典型的示例是:vw的计算是否要包含浏览器的滚动条?那么网站的导航或页面控件呢?这些应该算在计算中吗?还有一些设备本身的物理属性(比如iPhone X的刘海)是不容忽视的。

CSS自定义属性使用指南

CSS自定义属性有很大的潜力可以改变我们编写和组织 CSS 的方式,并且在一定程度上改变 JavaScript 与 UI 组件的调用方式。我并不关心语法和它们的工作方式(为此,我建议你阅读“《是时候开始使用自定义属性》这篇文章。同时我想更深入地研究如何充分使用 CSS 自定义属性。

使用CSS渐变绘图

这里所说的绘制是指CSS图像,即使用HTML元素和CSS属性绘制的图像。它们看起来像是Adobe Illustrator绘制的svg,但它们是在浏览器中渲染出来的。我所见过的一些技巧是使用borderbox-shadowclip-path来绘制图像。如果你在Codepen搜索“daily css images”,你会发现有很多优秀的案例。我自己也画了一些,也做过一些极限挑战,就是在一个元素上使用background和尽量使用其他属性来绘制图像。

页面

返回顶部