CSS细节问题回顾

早些年闲的蛋疼的时候,写了一些关于CSS无关紧要的细节的的文章,如今因为繁忙恐怕难就再有这种功夫胡扯了。这些文章离现在最近的也快要超过1年半,是时候拿出来更新和回顾一下了。

由于这段时间以来,浏览器发展有些出乎意料(比如Opera改核),所以我目前测试的范围已经缩小到只有IE9,Firefox32,Chrome38,本文结果也仅以这些版本为准

细节(1) 里提到的内容有三点:

  1. 鼠标指针样式的变化
  2. 哪些CSS元素不占空间
  3. 多重阴影的数量限制

第一点,浏览器是否会及时更新鼠标指针的样式。之前的结论是,Firefox是唯一即时更新鼠标指针样式的浏览器,不过时至今日,Chrome已经跟了上来,那我们把结论更新为:IE是唯一不即时更新鼠标指针样式的浏览器

第二点,描述了哪些CSS元素不占空间。对于阴影不占据空间,虽标准早有定论,但早期版本Firefox实现错误,不过那也仅限于Firefox也嗑药飙版本号之前。如今,这部分内容不需要再特别说明。

第三点,我曾经蛋疼地试图寻找 box-shadow 的阴影数量限制,不过在测试数超过65535之后浏览器仍然正常渲染而放弃。得益于这些年各浏览器对于 box-shadow 的模糊算法的改进,也使得往日可能需要注意的一些细节变的更无关紧要。

细节(2) 讨论的是圆角后响应区的问题。当时,Chrome对圆角外空白部分仍然作出相应,而根据标准所述,曲线边界外的区域不接受指针事件,所以Firefox的实现比较正确。如今,Chrome已经更正了这个问题,表现同Firefox以及IE一致——仅圆角外的有内容的区域有响应

细节(3) 测试的是各浏览器圆角 + overflow 的结果,由于这部分标准的模糊,浏览器表现也各异。但是当时的结论如今依然适用:所有的浏览器,在实现 border-radiusoverflow:hidden; 共同作用的时候,都只是视觉上隐藏了文本,文本仍然有交互,即使那是曲面外的部分——理应没有任何的交互和响应

细节(4) 讨论的是 outline 和 border-radius 的共同作用结果。如今再看测试用例,结果几乎没有变化,outline 与 border-radius 的矛盾似乎依旧将持续下去。并且,Firefox依旧没能描绘出最小轮廓(minimum outline)

所谓温故而知新,尽管本来就是些无关紧要的东西。虽都是我写的文章,但回过头看仿佛真的不是出自自己之手。对于更早的长篇大论类的,就更觉陌生异常。除了一排汗,更多的还是对于变迁的感慨,和蛋蛋的忧伤——尼玛又少了好多能拿来装B的条目!还让人活吗?!

今天周五,各位,周末愉快。