CSS

十年CSS

十年前,当百度空间在06年7月正式上线的时候,我写了自己的第一行CSS样式。我清楚地记得那是一行指定百度空间background图片的代码。而CSS就是这么简单的东西,一个刚入大学的学生,只是希望为自己的空间稍稍装点一下而单凭猜测和模仿就能够写上几句的代码。百度空间在运行八年后正式关闭,而自己也决然不会想到,十年之后自己依旧在写CSS并以此度日。 CSS理应是简单的东西,它就是这么被设计出来的“简单的描述”,只是这十年里的前5年IE6的存在俨然使其成为梦魇,而后5年却又随着各种新兴扩展而变得越加复杂。如今的CSS已经不再是当初的设计中“设计师能够控制的东西”,复杂的布局,精巧的维护结构,各种框架,动画过渡...好在IE67时代已经过去,现在我们只需要将注意力集中在CSS本身而非各种hack技巧。 读的第一本关于CSS的书是《Eric Meyer谈CSS》,共2卷,以现在的眼光看来,是一本浅的过头的手把手的教程。之后读了《…

浅谈伪元素的常见问题

在之前一篇一个IE8的新起点中,我简单列举了一些当前放开枷锁的CSS,其中之一就是伪元素。当然,在使用伪元素的时候依旧会遇到一些问题,我总结了一些,简单陈述,留个印象,那么当再次遇到的时候能够有所回想。 使用伪元素主要遇到的问题集中在IE8,因为IE8只是部分支持伪元素。首先,IE8中设置伪元素的z-index可能无效。这点广为人知,在使用伪元素制作冒泡箭头的时候会遇到,无法通过调节z-index使before置于after之上。 另一个较为常见的问题是,无法以类名触发伪元素content的重绘。如果使用过字体图标那么多半遇到过这个问题。因为大部分字体图标是通过伪元素content插入字符而成,比如在一个当前激活的导航里项上添加.active时,看到图标依旧保持着原来的颜色。其实这个不只是IE8会遇到,移动版Safari同样存在这个问题(偶发),明明更新了类名,外观却不发生重绘。 另外,使用:…

浅读 Media Query Level 4

目前主流浏览器对CSS3 Media Queries的支持度已经非常好,那么就展望看看Media Query Level 4~前段时间抽空看了一下,就挑选几条感兴趣的说下。由于目前文档并非标准而只是工作草案,所以本文所列内容随时可能过期,只作为一个向导。 更新频度 update-frequency 查询设备的实际更新能力,取值也比较直观: none: 一旦渲染无法更新(比如打印机) slow: 更新缓慢(比如电子墨水) normal: 正常更新(比如我们更为熟悉的电脑屏幕) 这个查询可以为一些带有交互类的内容提供更多的外观控制,因为我们不是指定设备,而是根据设备的实际能力,对最终内容的样式加以优化。比如最简单的例子:…

CSS zoom 在iOS8中失效

前些日子,偶然发现zoom在iPhone6里没有起作用,而这之前,iOS7以下的Safari则确实支持zoom。可惜我并没有iPhone来测试这个问题,毕竟自己还在用着老诺的10年前的手机,手中也只有老婆淘汰下来的iTouch4,所以无法比较准确地做过多描述,只能粗糙地得到一个大概的结论。 虽然zoom的初衷是放大和缩小内容,但早期常用于触发IE内部haslayout属性,用做IE6-7的药方。作为一个早期IE的私有属性,其实现在的大部分浏览器也都能支持,故而也就有人使用其完成一些网页功能,比如移动端的网页内容的大小适配——相比对各个元素指定尺寸,一个zoom就能搞定绝对是懒惰开发者的福音。 说实在的,zoom在某些方面堪称实用,原因是CSS Transforms在内容占位上的效果可能非人所愿。用CSS Transforms替代zoom并非不可以,只是还需要关注缩放前后的位置大小,远没有zoom方便。而就是这么一个用法便利的尚未正名的属性,在最新的iPhone6面前不举了...按照iPhone的影响力,想来开发者不多久便会抛弃zoom。…

CSS细节问题回顾

早些年闲的蛋疼的时候,写了一些关于CSS无关紧要的细节的的文章,如今因为繁忙恐怕难就再有这种功夫胡扯了。这些文章离现在最近的也快要超过1年半,是时候拿出来更新和回顾一下了。 2012/11/28 - 那些CSS的细节问题(1) 2013/01/06 - 那些CSS的细节问题(2) —— 圆角响应区 2013/02/15 - 那些CSS的细节问题(3) —— 圆角边框和overflow 2013/04/12 - 那些CSS的细节问题(…

漫谈标准中CSS浮动令人困惑的部分

时间追溯到4年前,那时刚出道,写了一篇CSS定位机制之一:普通流,转眼4年酱油人生,说好的浮动和绝对定位的篇幅也一拖4年。多少是因为对于熟悉的东西很难提起兴致,但更多还是因为懒惰。 这些年一过,浏览器环境的变化令人欣喜。当年甚少人讨论的BFC等概念,如今也已经说烂了。虽尚未满三十却深感锐气不比当年——说好的第二第三篇浮动和绝对定位应该不会有了,所以就随便聊聊浮动和绝对定位的一些麻烦之处——一些很多人可能不知道的,或者故意略过的,或者困惑的地方。 既然是浮动,那么首先第一个问题,什么是浮动? 如果是4年前的我,一定会摆出一堆定义,然后对着各种可能是人尽皆知的特性码很多字。如今,要是在让我解释什么是浮动,我只会说:“浮动===靠边”,并且我觉得我已经找不到比“…

答网友关于CSS中的一些问题

上周有位网友simple_life(雷同学?)提了一个关于CSS的问题给我,因为当时非常忙所以没有时间回答。问题是这样的: 在css中,格式化上下文( Formatting context )和包含块( Containing block )是种什么关系?还有,浮动元素已经脱离了常规流,而块格式化上下文是描述常规流的,可是为什么又说块格式化上下文可以包含浮动元素? 总共是两个问题,简单说就是,FC和包含块是什么关系?以及,为什么BFC可以包含浮动元素? 一开始看到这两个问题时,其实我是非常迷惑的,有种不知道从何处开始回答的感觉,后来意识到可能是长期适应概念后对某些问题看的理所当然的缘故。所以现在虽然作答,但回答本身也不一定能让提出问题的人满意。 首先是,…

那些CSS的细节问题(4) —— 圆角边框和outline

能写文章,说明时间略有空余,这应该算好事吧~看了下草稿箱,果断还是选这篇先写完,因为和前面的几篇有关联。在之前的 圆角响应区 以及 圆角边框和overflow 中,已经讨论过圆角边框的一些问题,本篇如题,是关于圆角边框和 outline 的,这里也正好回答了一丝在圆角响应区里提出的“为什么不在做DEMO的时候用 outline 描画边缘?”的问题。在写那篇之前做DEMO的时候,我是用了 outline 的,但注意到 outline 的一些问题之后,又把它从DEMO里移除了,并起草了这篇文章的标题,…

CSS伪类与CSS伪元素的典型与非典型应用

在上一篇《CSS伪类与CSS伪元素的区别及由来》里,已经详细区分了伪类和伪元素。但在这篇讲应用的文章里,其实并不需要这么明晰的概念区分。本文也不会再重提单冒号和双冒号之间的区别,本文更关注如何更好的使用伪元素和伪类——通过罗列一些典型甚至是非典型的用法,讲述伪类和伪元素的一些使用上的小技巧。在这个过程中,始终忽略浏览器的支持情况,任何一个例子无法正确运行的话,请先检查一下你当前的浏览器,是否赶上了这个时代的浪潮~ 当然,一开始都是一些比较常规的内容,如果你对这些内容已经了然,可以直接跳到后面“非典”的部分:) 列表处理 伪类与伪元素很大部分常规用途是在处理列表的。特别是 :nth-child() 这类结构伪类。 页脚链接 页脚链接可能是一个最为合适的例子,因为例子里伪元素和伪类并用。很多网站的页脚链接是用竖线分隔的罗列&…

那些CSS的细节问题(3) —— 圆角边框和overflow

本篇是上篇《那些CSS的细节问题(2) —— 圆角响应区》的一个简短的延续,因为在上篇的篇幅里实在已经容不下更多混乱的部分。 尽管现在圆角边框的教材已经烂了大街到处都是,并且这个属性已经是诸多CSS3属性里应用最为广泛的特性之一,但却丝毫无法掩盖这个属性一路走来的坎坷。时至今日,现代浏览器对圆角边框的解释仍然存在诸多问题,比如上篇那些CSS的细节问题(2) —— 圆角响应区 讲到的对“响应区”影响的问题,实则也只是这个属性一路而来的问题之一而已。因为,单看一个属性确实很明了——无论是定义还是实际实现起来,然而,一旦这个属性和其他属性作用在一起,事情就没这么简单了。 下文中的内容,皆以如下版本的浏览器为基准:Chrome-24,IE-9,Firefox-18,Opera-12.…