CSS选择器距离无关
“CSS选择器距离无关”的说法有点挫，但个人觉得，其实在描述上还是挺准确的。Eric Meyer 在最近写了一篇文章 Negative Proximity，讲述了一个很容易被人忽略的选择器细节：CSS选择器没有元素距离远近的概念。 简单地说，下面这样的CSS片段： body h1 {color: red;} html h1 {color: green;} 虽然相比 <html>，<h1> 更接近 <…
CSS
边角阴影渐变
最近看一些网站的时候经常看到边角阴影，所以单独拿出来说说。 比如 Nettuts+ 的设计，主内容区的右上角有非常浅的渐变，并有1px的白色勾线。这些细节设计虽然非常淡，甚至很多人根本不会去注意到这些，但它们累加起来的效果非常出色——不论我们有否发觉，重要的是我们确实受到了这些细节的视觉上的影响。 虽然 Nettuts+ 用了一张png的边角渐变的图片，但显然代码也能实现。线性渐变作为CSS3的标配，虽然使用上需要加上麻烦的前缀，但放眼望去用上代码渐变的页面也已经相当普遍。使用上需要注意的是 Chrome 9- 以及 Safari 4- 使用的都是非标的 webkit-gradient 语法： corner-gradient:before{…
CSS display: run-in;
display:run-in; 是一个非常有趣的属性，虽然作为普通流里的一个环节，但却很少有人问津。Chris Coyier 曾经写过一篇 CSS Run-in Display Value，简述了这个属性的作用。除此以外，它几乎不被人所讨论。 对于其定义，大致上就是下面这三点： If the run-in box contains a block box, the run-in box becomes a…
webkit自定义滚动条
在之前的 Google Reader的颓然改变 里我吐槽了google reader的这次改版实在是糟糕透了，但是现在看来，自己似乎也渐渐习惯了——这得益于Google的不断的改进，扭转很多不如意的方面。比如内容区添加了清晰的边线，工具条的高度被压缩，甚至如果窗口高度不高的情况下，搜索栏和工具栏的空间会被压缩的更多。当然，直到现在我还是没法接受那种泛白的背景，长时间阅读还是很累人的。 但其实改版里还是有很多令人眼前一亮的地方，就比如webkit优化的滚动条，更为美观也更加节省空间。 于是我也整了整自己网站的滚动条，基本上就是自己写的简化版的Google滚动条，代码更少更简单，直接加到CSS文件里就搞定了。 ::-webkit-scrollbar{width:12px;height:12px;} ::-webkit-scrollbar-button{} ::-webkit-scrollbar-button:…
CSS Hack Table
早在之前的告别垂死的IE6与IE7里，我就提及了要送别IE6/7，不过和说好的时间相差的挺多，出于各种原因，一拖就是1个多月。好在还是东拼西凑地搞完了，赶在了今年情人节前发布。时间上的仓促可能导致我文中的某些胡言乱语，希望各位看客多包涵了:) 由于博客页面已经无法承载这么多内容，所以我做了单独的工具页面，你可以点击下面的链接查看这张表格： 下面是对于这张表的简单说明： 我个人抵制各种Hack，甚至不惜在设计上争论直到设计师妥协。如果你不幸遇到一位倔强的设计师，那你也将不幸地与这些过气的小花招打交道。 虽然一开始我想囊括所有的浏览器(我几乎下载了所有版本)，但最后的结果显示那其实没有必要。结果重复、表格过长等问题让我最后组织表格的时候只精选了其中一部分。但已经可以涵盖绝大部分使用情况。 而选择浏览器的依据，就是前端定义的开始——2005年为界限： Start End IE6…
纯CSS圆角Tab
Tab能算的上是网页里最为常见的组件，不论是作为内容切换，还是直接作为导航，形形色色的Tab扮演着各种交互角色。既然是重要的交互角色，那么无论其颜色还是形状都关乎整个交互过程——圆角是有意义的，在视觉上把Tab和其他分隔元素区别开来是必要的，就如同圆角按钮一样——可能很多时候圆角按钮都与整个设计风格格格不入，但却是必须的，因为交互元素的凸显比整个设计浑然一体更为重要。 在IE67日渐边缘的如今，2012可能是前端重心转移最为明显的一年。于此也就不去考虑过时浏览器的兼容性了，对于它们，能看看内容就已经不错了，管它美不美观错不错位，时代在进步，往前看才不至于失业...... 今天琢磨了会写了下面这样一个CSS圆角Tab，和网上流行的圆角Tab不同之处在于：Tab底部也使用圆角过渡。 我简单制作了一个DEMO，列出了HTML结构和CSS：Demo 为达到底部使用圆角过渡的目的，关键就是下面两点： border-radius 的使用时显而易见的，…
再谈清除浮动
清除浮动对于任何CSSer来说都是基本中的基本，但我不愿称其为基础，因为最近我浏览网页看到各种充斥的清除浮动的方法后，才彻底明白，虽然各种方法被大量的使用，却甚为混乱。最糟糕的是很多有问题的流传版本的搜索排名都非常靠前，用神大人的话说就是：“错误的知识是毫无意义的”。 然而，坊间流传的很多方法其实也称不上错误，而只是有些偏差而已——往往使用中不会出现问题，但是严格地说，它们是不准确的，难道我们搞技术的不应该严谨一点么？于是，怀着一种略显复杂的心情，试图用我所知道的来“再谈”清除浮动。虽然不知道能有多少人看到这篇文章，但偶尔我还是想吐槽的——“那样做，不妥。” 鉴于现在google的访问在我镇实在够呛，所以我只好用百度为例。如果用百度搜索“清除浮动”，在结果里可以看到五花八门的解释。…
再谈inline-block
我们对 inline-block 并不陌生，在工作中经常会碰到类似的应用，比如 list 的居中，比如各种 gallery 的列表展示，细小到可能只是一个段落里的一个元素，大到也许是整个的布局，都可以见到。 引用怿飞的 display:inline-block的深入理解 ，对于其中已经提到的这里不再冗叙。这篇文章里，我试图谈论的是网络上对于 inline-block 的一些误解，以及个人对于 inline-block 理解上的一些补充。 看看标准是怎么说 inline-block 的： This value causes…