不可逾越的高度-CSS定位层级关系
Dec 15th
曾几何时有人跟我说有篇文章叫《XXX的高度》是讲述定位层级问题的，但我似乎找不到了，于是我还是写一篇《不可逾越的高度》吧。
定位层级这个初级问题是许多初学者都会纠结的问题，有时候觉得z-index设个几千几万都没用。
层级定位问题其实很简单，只要遵循一个概念，就不会有问题了：
任何定位（position）元素都不可超越其最接近祖先级定位（position）元素的层级高度。
举个例子：
1 2 3 4 5 6 7 |
<style>
.box{position:relative;}
.a{position:absolute;}
</style>
<div class="box">
<div class="a"></div>
</div>
|
这里，当.box有设置position的时候，无论.a的z-index设置多大，它的层级高度都是无法超越.box的。
继续阅读 »
IE6下边框与背景消失问题
Oct 10th
IE6总是那么让人蛋疼。
今天发现我写的邮件在QQ邮箱里IE6下背景会消失。
而163和gmail以及其他邮箱均是正常的。
于是开始删代码策略。
结果发现IE6的一个bug。
提示：你可以先修改部分代码再运行。
IE6下当祖先级拥有relative并且触发了haslayout，那么其第二级以后的层均会消失背景和边框。
显然外层两个是没法动作的，因为是qqmail的代码，所以只能从自己代码里出手，其实解决办法并不难。
解决办法：触发haslayout
提示：你可以先修改部分代码再运行。
html5的表现差异
Oct 8th
看过《html5设计原理》的同学都知道其中有个观点，那就是html5的头部doctype仅仅是针对验证器的，而对于IE则是让其按照标准模式表现的标记。
事实上标准浏览器在是否加doctype是一样的。
但其实这其中还是有所差异，不知道是否是浏览器刻意而为还是什么原因，但它就是存在。
使用老式html/xhtml的docytpe和html5的doctype的确存在细微差异
大家还记得图片底部那3px的空隙么，可能有些同学纳闷，那个空隙好像有些时候有有些时候没有，没错，这个区别就在于doctype。
我们来看两个例子：
xhtml：http://blog.dmtuan.com/demo/xhtml-html5/xhtml.html
html5：http://blog.dmtuan.com/demo/xhtml-html5/html5.html
请用火狐/chrome/ie8以上观看，我发现在使用xhtml形式的doctype或者更老的html甚至不加doctype，在这些浏览器里图片下面的3px间隙消失了。而在html5下却又出现了。
我作个假设：
这些浏览器开发者似乎是想把这个图片下的间距给去掉，甚至不加doctype也是没有间隙的。
但html5出现了，而似乎是为了和IE6/7以前的老式浏览器统一，或者是别的什么原因，加上了<!DOCTYPE HTML>后，这个间隙又出现了。
再看看下面的例子：
xhtml：http://blog.dmtuan.com/demo/xhtml-html5/xhtml-vm.html
html5：http://blog.dmtuan.com/demo/xhtml-html5/html5-vm.html
同样的，在xhtml和老式html doctype或者不加doctype的情况下，标准浏览器和html5的doctype展现依然不同，这里是vertical-align:middle;的问题。
虽然这个做法是好的，但对于一些需要升级到html5的网站来说，往往一些小的差异会导致整个页面出现问题。升级还是要谨慎。
—————-华丽的分割线————–
原来 html5 doctype激活 standard mode，xhtml1.0激活almost standard mode（限制性quick mode）
这里有一个详细的列表来阐述两者的区别。http://www.quirksmode.org/css/quirksmode.html#t15
其中提到了在quirks mode下img默认是block（去掉img下3px间隙的解决办法之一）的，所以导致上面大家所见的。
而在img后面写入一些字符后，3px间隙又会出现，似乎是又变成了inline。
养成html语义强迫症
Sep 30th
今天碰到一个群友说一个需求，效果图如下，很常见的二级菜单。
这个图难点还是有的，但不多，无非就主菜单两边竖线隐藏，主菜单文字自适应。
事实上很多人都会选择主菜单一个列表，子菜单一个列表。
但这样做的话就没有语义了。
正常的阅读顺序应该是(标题-内容)。而按照上面的做法，就变成了(标题-标题-标题-标题，内容-内容-内容-内容)了，显然用户会很迷茫。
在裸奔情况下应该有一个良好的阅读顺序。
于是我做了一个demo：http://blog.dmtuan.com/demo/subtab/tab.html
以上只是实现了结构部分，JS部分还有待完善，如果是优良的阅读顺序应该是菜单可由tab键/左右键切换，http://www.yahoo.com/ 的首页就做的非常好，这样对于盲人的体验将会大大提高。
以上提到了盲人，没错，在互联网用户越来越广泛的情况下，我们的网站可能会面对各式各样的用户，盲人也在其中，而他们只能用键盘和阅读器来浏览网页。
这里不得不提有些人喜欢把link的焦点去掉，来隐藏虚线框，这个是非常不明智的选择，因为如果阅读器失去焦点，那么会无所适从，而解决这个办法更好的途径应该是去绘制一个漂亮的焦点，利用padding，line-height等等属性去绘制。
养成html语义强迫症，无论是对于网站体验还是自身提高都是很有帮助的，尽管这需要更多的脑细胞去解决文档流问题，但只要坚信，一定能完成。
css模块化探索(中)
Sep 1st
上集css模块化探索(上)中说了，什么是css模块化，为什么要用css模块化。
这集我谈谈哪里需要模块化。
不同的项目有不同的CSS架构，这是CSS的多变性，不像JS可以拥有jquery、YUI、dojo、ext等框架，CSS的框架有时候并不是很好用，因为CSS往往需要迎合设计稿的表现而不同，而逻辑则是不变的不需要迎合设计。
但有一点可以肯定，只需制定一套标准，让设计师也去遵循，那么CSS框架也是可以实行的。
不过现实是残酷的，有时候我并不在一个严格遵循标准的团队里，或者遇上了一个新来的设计师，因为项目进度，匆忙交接然后就开始设计了，这时候CSS框架的灵活性就显得不高了，而CSS模块化则有更高的灵活性去迎合设计。
CSS模块化因项目而异，越庞大的项目，优越性越突出，例如SNS社区是个典型的重用性极高的项目，利用CSS模块化可以让频道有条有理。
继续阅读 »
设计一张我自己也不想切的页面
Sep 1st
有童鞋问我这几天博客没更新了，等着css模块化的下半部，其实这几天挺忙的，而我也一直在构思下篇应该如何去写。
这是最近一个抽奖活动页面，以前自己设计自己切的时候，总是会想，如何提高重用，如何切起来更简洁。
没错，这的确增加了效率，但总是会限制自己的设计思维。
直到最近公司来了个前端，活动的切图也分担不少，于是我设计就更奔放了，直到设计完了才发现，我真的不想去切这张页面。
虽然需求说必须是js实现，打回了我圆形转盘的念头。
但弧形导航有木有，不同头部有木有，非常规字体有木有。
继续阅读 »
css模块化探索(上)
Aug 25th
1.什么是css模块化？
在多次尝试与思考后，我把css模块化分为表现模块化和功能模块化。
例如07年的这篇文章：http://www.blueidea.com/tech/web/2007/5189.asp。
他把一个相同部分样式提出，采用样式权重覆盖原理，来做一系列的差异化表现，这就是表现模块化。
而例如sofish的模块化 CSS – 更有效地管理CSS 这篇文章只是简单的分离了功能css文件，当然这也算一个功能模块化的雏形。
他也在最近分享了一篇CSS架构方面的PPT，讲述了如何去更好架构规划整站CSS，其核心便是CSS模块化了文章地址
继续阅读 »
javaScript的逻辑运算符
Jul 6th
昨天看到一则用YUI compressor压缩的js代码。
1 |
userNum && (ind += index,ind >= userNum && (ind -= userNum),ind < 0 && (ind === -2 && (ind = -1),ind += userNum),selLi.removeClass("on"),$(selLi[ind]).addClass("on")); |
我很奇怪这个写法，因为当时我从来没见过，初学见谅。
后来码头告诉我JS中的逻辑运算符是另外一种运算方法见文章，相当于一个if语句。
与C不同的是由于JS没有严谨的数据类型，导致我看这个表达式有点混乱。
例如：
1&&2&&3
在JS中解释为判断1&&2，为true则返回后面&&后的值.所以上面的返回值是3，你甚至可以把函数写到里面，只要在外面加上括号即可
1 |
1&&2&&(alert("true")) |
这样上面yui压缩的代码就不难理解了，首先判断userNum是否是true，是则返回/执行后面括号里的数值或者函数。
而C则不同
C中这个表达式返回的是一个布尔值，由于C没有布尔类型，所以约定所有非0值为true默认为1，0为false，所以返回的是1。