CSS3

初探CSS 选择器Level 4

在开始聊CSS选择器Level 4(Selectors Level 4)之前,先要明确一个简单的概念。时至今日,在CSS的世界之中再不会有大版本的称谓,比如以前大家熟悉的CSS2.1、CSS3。现在的CSS都只会以CSS模块的版本来进行区分,比如我们今天要聊的CSS选择器,其最新版本就是:CSS Selectors Level 4。在CSS Selectors Level 4中为选择器增添了不少的新特性,当然这些新特性有的已得到浏览器的支持,有的只得到部分主流浏览器的支持。所以接下来,花点时间学习一下,以备后用。

再聊CSS的属性选择器

属性选择器是很强大很神奇的。很多时候可以帮助你摆脱一些棘手的问题,可以让你避免类名的添加,甚至还可以指出代码中的一些问题。属性选择器是复杂而又强大的,但不用担心,因为它也是易于学习和使用的。在本文中,将会学习到CSS属性选择器的强大功能以及如何在实际工作中运用它。并提供了一些关于如何使用属性选择器的一些个人想法。

CSS伪选择器::empty vs :blank

前段时间@Zell Liew的博客深入的介绍了CSS中伪选择器:empty:blank相关的知识。那么:empty:blank究竟有什么作用,又在什么场景下使用呢?今天我们来一起看看,它们怎么使用,更应该应用在哪个场景之下呢?

理解CSS的逻辑属性和值

2017年5月18日,W3C的 CSS工作组(CSS Working Group) 发布了 CSS逻辑属性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的书写模式(writing mode)中,可以抽取出共性的抽象概念(如开始位置,或行),这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式(而不是基于物理坐标、书写方向和维映射等)控制布局的逻辑属性和取值(logical properties and values)。这个模块来源于CSS21中关于逻辑属性和值的特性。

CSS混合模式高级应用

首先要声明的是,我们在这篇文章中要了解的不是CSS混合模式如何使用,而是来一起探索CSS混合模式的一些高级运用以及它能做些什么,又会带来什么样的效果。操作过像Photoshop这样的图像处理软件的同学,对于图层混合模式一定不会感到陌生,但对于CSS中的混合模式,估计还是有不少的同学会感到陌生或者好奇。在这篇文章并不会介绍CSS的混合模式相关的属性怎么使用,而会探讨CSS的混合模式的一些高级运用,以及对应的效果。

实战CSS Scroll Snapping

如果考虑周全,滚动捕捉可以是一个有用的设计工具。CSS Scroll Snap Points允许你连接到浏览器的本机滚动交互,因此你的界面感觉无缝且平滑。随着JavaScript API的出现,这些功能将变得更加强大。CSS Scroll Snap(CSS 滚动捕捉)允许你在用户完成滚动后多锁定特定的元素或位置。

聊聊Web中的度数单位

说到度数,你可能已经从生活中了解了很多关于他们相关的知识。在学校里学习几何课,做基本的木工活,进入外层空间或在图像编辑器中旋转一个元素等,都会有角度相关的身影。在现实世界中,度数几乎是测量角度的单位。它在Web中同样是一个受欢迎的角色,也适用于我们将遇到的各种场景。幸运的是,在现实世界中的度数和虚拟世界中的度数有很多相似之处,所以在这篇文章中将来学习一些有关于度数相关的知识,然后深入了解一些细节。

改变用户体验的滚动新特性

@evilmartians的《滚动的特性》一文介绍了目前有关于滚动相关的特性。今天我想花点时间重新整理一下,时至今日,CSS中为浏览器滚动提供的相关新特性究竟能给用户带来哪些新的体验。

聊聊CSS中的层叠相关概念

最近在纠结程序语言和设计语言中的一些概念,整到层叠上下文和图层相关的事情,然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理了一下相关的知识。如果想要理解清楚CSS中的层叠相关的知识点,我们就很有必要先了解一些重要的概念:文档流(Normal Flow)格式化上下文(Formatting Context)层叠上下文(Stacking Context)层叠水平(Stacking Level)层叠顺序(Stacking Order)

Icon和文本对齐方式的探索

在Web中很多场景中都会使用到Icon,那么就会面临Icon和文本对齐的处理。而这个对齐效果的处理又不是一件轻易的事情,特别是面又众多不同移动终端的情形之下。那么今天这篇文章就来和大家一起探讨一下这方面的话题。

页面

返回顶部