楔子：今天是去金茂上班的第一天，还从来没在42楼这样的高度工作过，还真有点不一样，坐电梯是还有些耳疼的感觉。虽然是办公室变了，但是不变的是需求永远在变。新改动，要给一些元素加mask，好吧，absolute，然后加个颜色盖住。
问题也引出了，Absolute, Relative, Fixed，这些position设置到底有那些不同，分别适合在什么样的场景之下。很多时候还是让人觉得很困惑的。看下定义，你会发现腾格尔是用最大的力气把歌唱轻，他们是用最简单的词把话说的无比晦涩。
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
还是换个方式解读一下这几个选项吧。
Static 元素默认值，所有元素在没有显式设定Position的时候，都是Static，不过该属性值并没有什么特殊的意义，只是一个初始值。也就是说它并不代表元素具有那些特别的布局定位信息，当你显式去设定为Static时，唯一的作用就是覆盖之前你为Position设定的其他非默认值。
Relative 相对于Absolute，Relative更让人困惑，经常有人会误用该定位属性。一句话概括就是，“相对于元素自身”，关键词在于自身二字，如果你只将一个元素设置为 {position : relative; } 的话，而不去设置其他offset值，比如top left等，该元素其实等价于{position : tatic;}，元素的位置和表现不会有任何改变。如果你设置了其他定位属性，比如 top:10px; 那该元素将相对自身原来的位置向下移动十个像素，这在用来对齐元素时很有效。
1点需要提及的，z-index，一个relative元素（允许我使用这样不是很严谨的说法）默认z-index高于其他所有static元素，即使你显式的为某个static元素设置高于relative元素的z-index为99999。
Absolute 这是个强力选项，有点瑞士军刀的感觉，你可以将一个元素定位在页面上任何你希望他出现的地方。对于一个absolute元素，必须指定 left ， right ， top ， bottom 属性中的至少一个，而作为参照的顶点是什么呢？默认情况下是HTML元素，也就是页面的左上角，如果该元素具有一个relative的父节点，那顶点则变为该relative父节点。如果合并一下这句比较晦涩的话就是，包含在relative元素里的偏移值由relative元素左上角开始计算，否则都将以页面左上角计算。
关于absolute元素最重要的一点，就是设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。这点和float元素有些类似。
//==============================================
节译自：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
有些重新演绎之过，但也是为了能够更加适应中文的表达方式。
今天介绍一个网页辅助设计框架，960 Grid System。什么是960 Grid System，简单的来说，是用来辅助设计师快速的创建网页原型的辅助系统，960这里是网页的横向尺寸，960px，为什么是960这个数字，而不是1000或者900？
来温习下数学推演：
960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26种（26 = 7 * 2 * 2 - 2, 减去2是去掉1和960自身），我们标记为：
N(960) = N(2^6 * 3 * 5) = 26
同理可以得到：
N(480) = N(2^5 * 3 * 5) […]
10.01测试驱动之于网页设计开发
这是一篇译文，其中涉及了不少比较专业的概念，我将用一系列文章来介绍这些概念，这些文章对于网页设计进行了更加深入的探讨，也许在我们看来有些学究气了，但是通过这种探讨，我们从中应该看到一些好的方法论和更多的用户体验关怀。
Progressive Enhancement（逐步增强）开发模式正逐步成为基于标准设计的最佳实践。从简洁，语义化的HTML标记开始，通过Javascript和CSS层层渐进式增强，我们试图为任何受众创建可用的体验，对于那些功能不那么强大的设备和浏览器能获得一个相对简单但是功能完整的用户体验，而其他那些功能齐备的则将获得剩下的附加特性和体验。
这是就是PE（Progressive Enhancement 以下缩写为PE）的基本理论。但是在实践过程中，这些增强仍然被推送给了绝大多数设备，其中包括大量不支持这些特性的对象，比如较低版本的浏览器或者是功能受限的移动客户端。这些设备一开始的确获得简单但功能完整的页面，但随后被“增强”到了乱糟糟的页面。这显然是和PE理论背道而驰的。
那我们应该怎么做增强以确保所有的设备和浏览器获得正确的效果呢？测试，这时候我们需要的是通过逐级测试来确保这点。
兼容性测试
不久之前，我们发现可以使用很简单的Javascript代码来测试目标设备对于CSS的支持情况。让我们从一个很简单的盒模型测试开始，我们插入一个对象到当前Document中，然后设置一些样式属性，然后通过Javascript来校验是否被正确支持了。
function boxmodel(){
var newDiv = document.createElement(’div’);
document.body.appendChild(newDiv);
newDiv.style.width = ‘20px’;
newDiv.style.padding = ‘10px’;
var divWidth = newDiv.offsetWidth;
document.body.removeChild(newDiv);
return divWidth == 40;
}
通过上面的TestCase，我们能很快的检查目标设备是否正确支持盒模型，然后我们也能采取对应的增强方式。
有了上面的这个主意，我们能类似的写出如下测试用例：
float
clear
position
overflow
line-height
当然仅通过CSS测试并不能覆盖到所有情况，幸运的是，我们还能通过Javascript测试来做其他兼容性测试。（译注，这可能是大家比较熟悉的浏览器检测了）。
document.createElement()
document.getElementById()
xmlHttpRequest()
window.onresize()
window.print()
通过上述测试，我们可以知道是否可以正确显示客户的应用。
我和我在Filament Group的同事开发了testUserDevice.js，来完整上述所有的测试。
利用这些测试结果
整合testUserDevice.js到一个页面上是相当简单的，讲JS文件包含进来，然后调用testUserDevice.init()方法就可以了。
为了更好的阐述这些概念，我们来看一个具体的例子，这是一个有一定复杂度的表单页面，让我们从最基本的HTML开始。
DEMO1
=== CSS增强
当目标设备通过了我们的测试代码，会对页面进行一系列的增强，默认情况下，会进行下列DOM更新：
样式Class enhanced 被加到[BODY]元素上。
(title=”enhanced”) 可选的样式表文件被启用。
(title=”not_enhanced”) 与之相反的，所有这些非增强样式表文件被禁用。
这样的变化给你提供好几个契机去做层进式的增强，比如BODY标记上的样式增强。来看下例子：
body div.example {
margin: 1em 0;
}
如果用户的浏览器通过了测试，我们可以使用float布局来实现水平排列。
body.enhanced div.example {
float: left;
[…]
众所周知，所有的浏览器都有一些关于CSS功能的额外扩展，例如（-ms-interpolation-mode），这些通常来自于那些未在CSS标准中明确完整的定义的特性和功能或者是在标准中已经完整定义但浏览器只是部分支持。CSS2.1标准中规定，以上这些不完全合乎标准的特性都必须使用一个供应商前缀(Vendor Prefix ‘-ms-’ for Microsoft, ‘-moz-’ for Mozilla, ‘-o-’ for Opera)。
下面介绍一下IE8下的这些额外扩展，当然我们的目的不是把那些IE Only的特性带入下一代的页面中，而是能够在浏览器支持的前提下，运用一些属于CSS3的特性，丰富一下创作思路。
Property
Type
W3C Status
-ms-accelerator
Extension
-ms-background-position-x
CSS3
Working Draft
-ms-background-position-y
CSS3
Working Draft
-ms-behavior
Extension
-ms-block-progression
CSS3
Editor’s Draft
-ms-filter
Extension
-ms-ime-mode
Extension
-ms-layout-grid
CSS3
Editor’s Draft
-ms-layout-grid-char
CSS3
Editor’s Draft
-ms-layout-grid-line
CSS3
Editor’s Draft
-ms-layout-grid-mode
CSS3
Editor’s Draft
-ms-layout-grid-type
CSS3
Editor’s Draft
-ms-line-break
CSS3
Working Draft
-ms-line-grid-mode
CSS3
Editor’s Draft
-ms-interpolation-mode
Extension
-ms-overflow-x
CSS3
Working Draft
-ms-overflow-y
CSS3
Working Draft
-ms-scrollbar-3dlight-color
Extension
-ms-scrollbar-arrow-color
Extension
-ms-scrollbar-base-color
Extension
-ms-scrollbar-darkshadow-color
Extension
-ms-scrollbar-face-color
Extension
-ms-scrollbar-highlight-color
Extension
-ms-scrollbar-shadow-color
Extension
-ms-scrollbar-track-color
Extension
-ms-text-align-last
CSS3
Working Draft
-ms-text-autospace
CSS3
Working Draft
-ms-text-justify
CSS3
Working Draft
-ms-text-kashida-space
CSS3
Working Draft
-ms-text-overflow
CSS3
Working Draft
-ms-text-underline-position
Extension
-ms-word-break
CSS3
Working Draft
-ms-word-wrap
CSS3
Working Draft
-ms-writing-mode
CSS3
Editor’s Draft
-ms-zoom
Extension
在IE7中，没有使用这样的前缀，所以如果用户在IE8中选择兼容模式的话，这些带有前缀的属性将不被识别。不过在IE8模式中，为了向下兼容，将接受带前缀和不带前缀两种格式。
有一个要注意的地方：
#transparentDiv {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}
原来的filter格式在标准中是不合法的，所以为了能够在ie7和ie8中都能达到该效果，请参考上述写法。（向下兼容真是沉重的包袱啊）
原文地址： http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
2008年8月28号，微软发布了IE8 beta2，相比三月份主要面向开发人员的Beta 1增加了大量新功能，涉及易用性、安全性、兼容性、管理性等各个方面，以及一些独特的工具。
先来介绍一下对于最终用户的新功能吧，也许是我们对ie一直以来的低要求导致了这次发布的新功能真的有点让我震了一下，真的很棒。
网站切片(Web Slices)：开发人员可以将网页的一部分标记为网站切片，让用户随时很方便地监视相关信息，点击收藏夹栏即可看到丰富的网站切片内容，开发人员也可籍此和用户建立紧密联系。
非常酷的新功能，我不知道firefox下是否已经有类似的插件了，我的生活浏览器一直是遨游，firefox只是用来工作，也许孤陋寡闻了，但是这个功能真的让我觉得会让网站开发有了新的触角。对于很多内容性的，比方说ebay或者淘宝这样的网络销售，甚至于起点这样的在线阅读网站，这种内容的预览和随时更新，远比RSS阅读器来的自然。
————————————————-
增强的搜索框：搜索框会在用户在键入关键词的时候实时提供搜索建议，包括图片，另外搜索框现在还会提供来自用户收藏夹和浏览历史的搜索结果。
有点类似划词搜索那样，我相信随着未来网络硬件基础的不断提升，这种无孔不入的网络内容聚合将掀起又一轮网络变革。
==========================================================
其实本意是去看看ie8对于网页设计师来说有什么新的变化的，没想到几个新功能真的是让我忍不住把赞美之词给了它们。言归正传，让我看看ie8在工作上会不会给我们一些震撼。
早在今年3月份，ie8 beta1就给开发者带了不小的期待，比如这个极像Firebug的内置调试器（上帝是派你来拯救我们的吗？）。
这样的界面恐怕不用多说什么，大家肯定看了之后有种终于盼到了的感觉。这个产品的到来将终结Firefox在设计师和开发人员中无可替代的局面。
具体有哪些改动让我们来看一下，因为内容较多，这里仅列出提纲（翻译自微软网站 http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers.aspx）
注：目前下列链接仍为微软网站，等我再过一下翻译更换链接
Developer Checklist:
兼容性:
使用IE8来浏览您的网站。
如果您的网页和原来在IE7中的表现不同，您可以启用兼容模式。 更多内容，参考此处 [兼容性Compatibility] 。
如果开启兼容模式后，您的网站和在IE7下的表现和行为都完全一致的话，那您可以将IE7 meta tag加到您的网页上去。Emulate IE7 meta tag.
另外，您可以使用各种方法来校验用户的浏览器工作模式 Versioning and Internet Explorer Modes.
如果您的网页仍然存在问题，那请使用这些测试工具帮助您找到问题 testing tools.
Ajax开发:
阅读更好的Ajax开发 Better AJAX Development.
阅读原生JSON支持，这也是我坚信将取代xml的传输协议 Native JSON Support.
顺手转一位大大3月份的汇总小结
IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：
E[att^=’val’] //子串以’val’ 开始
E[att$=’val’] //子串以’val’ 结束
E[att*=’val’] //子串中包含’val’
IE8 支持绝大多数基本的 CSS2.1 选择器：
:before and :after 被支持，只支持文本，不支持图片，但还存在bug 。
:focus 被支持。
display: inline-block 被支持（只能用于内联元素）。
display: table 被支持。
list-style 完全被支持，包括值 upper-greek （此值其他浏览器均未支持）。
outline 被支持。
border-collapse, border-spacing 和 […]
原文出处：http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
版权声明：本文版权归原作者所有 译介仅供国内读者参考
BANG421388A95514C2DCE6B44914XIANGUO
对于一个网站来说，导航栏菜单应该是最为重要的一个元素。由于网页没有什么可供用户作为定位的东西，所以全站一致的导航栏就成了少数可以给用户带来方向，引导他们浏览整个网站的元素之一。用户很依赖它，所以设计师绝对不能在这个地方马虎了事。
还是那句老话，最好的往往是最简单的，当然简单的东西绝对不代表就是乏味的。去年，我们就曾经就导航栏写过一篇文章 modern approaches of navigation design 。现在让我们看看这方面的设计的最新趋势吧。
下面就让我们来看看，最新的导航栏设计趋势，实例和一些非常炫的设计。
1.会“说话”的导航栏 （Speaking navigation）
对于导航栏来说，最重要的任务莫过于非常清楚的引领用户访问站点的每个模块。但是通常来说，很难用1-2个关键字来准确描述这个模块的具体内容和功能，特别是在水平导航栏布局下。这就是为什么通常导航栏不会简单地将关键字一个个排列起来来展示所拥有的选项（“沉默”导航栏 silent navigation），设计师多数会选择使用比较具体的描述来表达该选项的内容或者功能。
过去的几个月里，我们发现这种趋势越来越流行。
为了让信息变得更加容易接受，通常使用相同高度宽度的块状显示，大图标的使用也越来越普遍，当然评判导航栏好坏最主要的还是网页的整体布局和设计。鼠标悬停效果的设计使用，能让你的网页变得更加亲切。