CSS

CSS技巧(01)

从这周开始,我将会把每周看到有关于CSS有意思的技巧整合成一篇文章。将会在每周的星期天整理发布,每篇文章中将会以CSS的技巧为主线进行介绍,但每个技巧不会深入的阐述。主要目的给对CSS感兴趣的同学增强CSS的眼界,扩大知识面和使用场景。同时也希望能帮助大家将一些CSS技巧运用到实际项目中,另外提高自己在这方面的技术。如果感兴趣的话,可以持续关注,或者有你相关的技巧也可以和我们一起共享。

今天介绍了一些小技巧,主要涉及到响应式图片的处理、纵横比属性aspect-ratio、嵌套选择器、自定义属性配合计数器动态生成内容、借助HTML5的<details><summary>元素来做一个可点击的下拉菜单,滚动特性以及JS-in-CSS。其中aspect-ratio、 嵌套选择器和Js-in-CSS是较新的特性,特别是后两者,应该是最有为意思的部分。

CSS的mask-composite

CSS的mask(遮罩),有时也称CSS的蒙层,最早是苹果公司2008年提出的,并且添加到webkit引擎当中。遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类型于png24位或png32位中的alpha透明通道的效果。2012年被纳入到W3C的草案中,但这个版本与苹果公司提出的版本是不同的。时至今日,该规范已经有多个版本,现在是CSS Masking Module Level1版本,属于TR阶段。据Caniuse.com统计来讲,该属性得到的支持度还是有一定的限制,仅部分属性被浏览器支持。虽然如此,但该属性还是非常的有意思,值得大家花点时间去探究,比如今天要聊的mask-composite属性就是非常有意思的一个属性。

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

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

聊聊《重学前端》

这两天票圈被@Winter大大在极客时间平台推出的《重学前端》刷屏了,而且在微信群和知乎上都有相关讨论。讨论中各种声音都有,可算是热闹了。今天我也凑个热闹,来聊聊我对这个课程的看法。

图解CSS:CSS 的值和单位

CSS 的值和单位是 CSS 另一个独立功能模块,到目前为止,该模块已到了 Level 4 阶段(CSS Values and Units Module Level 4)。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说,对于 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中动态属性的例子,但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同,接下来的内容将向大家揭开。

初探CSS对象模型(CSSOM)

今年花了不少的时间在学习DOM相关的知识,经过这段时间的学习,可以通过一些JavaScript的API操作和处理Web页面上的HTML元素。在Web中除了DOM之外还有另外一个对象模型:CSS对象模型(即CSSOM)。或许你已经在项目中已经用过了,只不过没有意识到这一点而以。今天这篇文章中,我们主要来一起探讨有关于CSSOM相关的特性。

CSS的逻辑属性对盒模型带来的变化

在《理解CSS的逻辑属性和值》一文中,我们对CSS逻辑属性和值(CSS Logical Properties and Values Level 1)有所了解。事实上对于广大前端开发者而言,自从Web诞生以来,就习惯了使用用物理CSS属性。比如上、右、下和左,映射到CSS的盒模型就是marginpaddingbordertoprightbottomleft设置元素。但随着CSS的书写模式特性的出现,的概念在某种程度上已经失去了其意义。

CSS中的函数

大家都知道,CSS只是一个声明式的语言,主要为标记语言服务。很多程序员鄙视它,有一部分原因是CSS并不像其他程序语言一样,具有一些逻辑能力以及函数功能等特性。随着CSS的不断变革,其慢慢地也变得越来越强大。时至今日,CSS中也有具有函数和运算相关的能力。比如我们今天要聊的CSS函数。在CSS Values and Units Module Level 4中把函数标记(Functional Natations单独提取出来做为该规范的一部分。而这部分主要介绍了一些具有数学计算能力相关的属性值,比如大家熟悉的calc()和不怎么熟悉的min()max()。而我们今天要聊的是CSS中的函数,其中就包括这些部分。如果大家感兴趣,欢迎继续往下阅读。

页面

返回顶部