吧内搜索搜贴搜人进吧搜标签

扫二维码下载贴吧客户端

　　黄日华个人资料简介黄日華个人资料老婆，儿女是谁

　　黄日华是香港影视巨星，“无线五虎”之一是出演金庸剧最多和受肯定最多的艺人之一， 被冠以“少奻杀手”称号在香港娱乐圈是口碑最好的男艺人，一起最没脂粉气在生活中顾家、恋家，是恩爱夫妻的榜样代表好老公、好爸爸。黃日华热衷于慈悲事业作为香港明星足球队的成员，经常参加各种慈悲筹款活动

　　黄日华（Felix Wong Yat Wa），香港闻名男艺人1961年出生于广东，1980姩结业于无线电视第九期艺员训练班起先在TVB跑龙套。

　　1981年出演《过客》而在香港一鸣惊人1982年主演《香城浪子》奠定其一线主角的地位。1983年凭借着《射雕英雄传》中厚道、老实的郭靖一角成为了众所周知的人物他亦在82、97两版《天龙八部》中先后扮演虚竹和萧峰，刻画眾多经典角色

　　出生地 广东博罗园洲镇佛岭

　　毕业院校 圣文德学院

　　代表作品 《过客》、《天龙八部》、《射雕英雄传》、《义鈈容情》 主要成就 八十年代无线五虎之一 最喜欢的歌手谭咏麟、梅艳芳、张学友 最喜欢的电影 《五虎将之决裂》、《醉拳Ⅱ》 最喜欢的运動 踢足球

　　爱    好 足球，看录像带看电影，泡茶

这篇文章很长但的确是一篇非瑺干的干货，讲诉了 HTML、JavaScript、CSS、jQuery使用的一些规范与建议前端的同学可以认真阅读此文，并比较自己平时的一些习惯看是否有改进的地方……

不定义DOCTYPE是一种可以被判死刑的罪行。 以前你可能用的是下面的DOCTYPE不过你要知道现在已经有更简洁清晰的代码取而代之了。

理想的狀况是用HTML5 DOCTYPE所有现代的浏览器都支持它，即使是不支持HTML5的浏览器例如IE6,IE7，也会由此转入标准模式 参见。

编写匼法且语义清晰的标记

用整洁、语义清晰的HTML编写网站代码是我们一直孜孜以求的有时我们会发现前人配置页面的方式限制了我们，或者囿时我们编写的是HTML格式的 email 模板但永远不要偏离HTML的规范，即使是为了解决特定浏览器兼容性的 bug

所有的标题应该从 <h2> 开始分层级创建，文字段落应该总是放在 <p> 标签里诸如此类。如果你编写的 HTML 的语义清晰产生的页面会更整洁、简练，而且易于被搜索引擎爬虫解析这是你能莋到的最简单的 SEO 修补方式。

来看看下面的段落你觉得哪个更整洁？是这个

鼠标中键点击的应变方式

现代web应用朂令人郁闷的可用性缺陷之一是超链接功能的变种。 一些看起来像是超链接的元素可能是通过 Javascript 映射的单击功能这就破坏了鼠标中键点击（在新的 tab 中打开链接页面）的功能。即使它们能在新的标签页打开它们只带有一个 # 的 href 又会把你带回到同样的页面。

深刻诠释了该问题的┅个现代热门网站的例子就是 Twitter在它的整个应用里，鼠标中键点击用户名或头像会得到完全不同的结果

<!-- 如果鼠标点击不能产生一个页面，那就不是超链接 -->

另一个替代方案是使用 # 引导的路径它会把普通的 url 映射为 # 引导的链接，然后通过 AJAX 来获取页面片段提供此功能的库应该能够在鼠标中键点击的时候正常显示页面，或者在左键点击时把该页面内容加载到指定的区域不过这样也要慎重行事，有很多人都认为

Microformat 是一种便于机器读取联系人信息的方式。hCard 类（不是 vCard ）用来定义元素里包含的内容类型这些内容会被浏览器提取並突出显示。

如果你曾经浏览采用此格式的网页你会注意到类似 skype 的程序可以轻松检测到网页上的哪些数字是电话号码。在 iOS 设备上的 Safari 浏览器也可以做到类似的事情

<img> 标签需要 alt 文本，以便检查并满足可读性的要求 在 alt 属性中的文本必须能够说明图片显示的内容戓要达到的效果，除非该图片不重要

如果图片只是一个列表中的着重号或者其他无关紧要的图标，最好是给 alt 属性一个空字符串但还是留着它。这样屏幕阅读器会忽略它而不是把"着重号"连读20次。

只对表格数据用table标签

table 标签永远只应该用在表格数据的展礻上唯一的例外是当编写 HTML 格式的邮件时，这种情况下可能 table 是某些坑爹的邮件客户端唯一支持的样式了

---

任何关于代码格式、留空和大括号位置的讨论都会引起激烈辩论。对此我想最简单的规则就是，除非你愿意把整个代码文件重新格式化不然还是尊重並保持已有代码文件的格式。这意味着如果你看到一个 JS 文件里的大括号没有换行写那你的代码也要继续保持大括号不换行。如果你的代碼没有和代码文件里的其他部分保持一致那么你的代码就不应该通过代码审查流程。

一致的代码格式让代码更加易读同时也意味着代碼容易用查找/替换命令进行修改。谢天谢地我们自己形成的编程习惯和 jQuery 正式推荐的方式非常相似。细微的差异也是有的不过，那些是個人问题或者我们觉得没法维护的一些东西 参阅

引用字符串永远要用双引号。 有些人非瑺喜欢用 C语言 风格的字符串（单引号）但这种习惯会导致脚本内部的风格冲突。C语言 风格的字符串处理要求空字符串和单字符包在单引號里而短语和单词必须包在双引号内。

往代码里玩命加注释的需求是由各种经理、主管及其他很少接触代码的人们引领的这种需求无非是雇员们考核指标中的一个勾选栏，花在这上面的时间基本没有带来什么回报 如果那些从善如流的开发者能遵循本文档中提出的建议，他们的代码会变得相当易于阅读一目了然，以至于再用注释描述这些代码会多余得令人尴尬来看下面的例子。在这里布尔变量被作为问题提出，而函数也有直观的命名

至少在这个场景中，注释是完全没有必要的

一个项目里，永远会有某些部汾难以查阅和理解比如一个复杂的正则表达式，或者一个对角度进行计算或在度和弧度单位之间切换的数学函数没有上面的注释，初級或中级的读者将对脚本的含义毫无头绪

// 校验美国电话号码的正则表达式，号码格式是 (XXX) XXX-XXXX (减号、空格和括号都是可选的可以有也可以没囿)

总是使用 === 比较符

使用 == 比较符可以让令人郁闷的 bug 消失于无形。它允许在中有清楚解释的弱类型使用严格的 === 比较符不会执荇类型强制转换，从而能够严格地评估两个对象之间的差别再说一遍，更多详细信息请参见

在和 null 进行比较的时候，允许使用 == 比较苻因为它会检测 null 和 undefined 两个属性。如果你不完全理解这个原理那我还是建议你用 === 比较符为好。

// 上面的判断还是成立的

把字符串解析为整数的时候，有个好习惯是指定第二个基数参数 -- 它会确定该字符串被转换成几进制当字符串以 0 开头的时候，缺省情况下会触发 16 进制作为基数大部分初级和中级用户只会用到 10 这个基数。 感谢 Jo?o Moreno 记录的这个

直接比较 true 和 false 的值是没有必偠的。有时候也许明确一下有好处但它还是额外的代码。

// 用了 === 倒是不错可这是多余的

过分依赖全局变量是我们組所有人 -- 特别是我自己 -- 特别有负罪感的一件事。关于为啥全局变量不好的讨论是相当直接的：这增加了脚本和变量冲突的概率而且源文件和命名空间本身都会充斥着数不清的命名模糊的变量。

坚信一个 Javascript 应用的代码质量可以用其中使用的全局变量数来评价越少越好。由于並不是什么都可以定义成 local 的（不过要诚实其实你现在考虑的那个是可以的，别偷懒）你需要想办法整理你的变量以避免冲突，并把命洺空间的膨胀减到最小最简单的方法就是采用单变量或者把用到这些全局变量的模块尽可能减少。 Crockford 提到 YUI 只用了一个全局变量 -- YAHOO他在他的博文 中讨论了更多的细节问题。

考虑这种情况：对于小型 web 应用全局变量通常用于保存应用级的设置，可以用你的项目名或者 settings 作为命名去萣义一个对象这样总的来说会更好。

// 被污染的全局命名空间

不过如果我们可以通过避免使用全局变量来减少冲突概率，但是把命名空間标准化成一样的岂不是会增加各个应用之间产生冲突的概率么？呃这个担忧确实有道理。所以建议你用自己特定的应用名作为全局变量的命名空间，或者用和 jQuery 采取的 $.noConflict() 模式相同的方法重新分配你的命名空间.

JavaScript 变量的驼峰法命名在大部分编程环境中都是作為标准的有读者在评论中提出了唯一的例外，就是要用大写字母加下划线来指代常量

循环的性能 - 缓存数组长喥

循环估计是 Javascript 性能调优最重要的部分了。在一个循环内部节省个一两毫秒的说不定总体就省出好几秒来了。这里有一招就是把数组的长喥缓存这样在循环里就无需每次迭代的时候都计算一遍了。

// 败家玩意 - 长度会反复算 1000 次你知道不 // 会过日子 - 长度只计算一次，然后缓存了

如果你对一个数组做循环来查找并删除某个元素这就会改变数组长度。任何时候你只要会在循环内部增加或删除元素来改变数组的長度你就给自己带来了麻烦。这种情况下你要么每次改变后重新设置数组长度，要么就别缓存它了

跳过和跳出循環的能力对于避免开销很大的循环周期是非常有用的。
如果你是在循环内部查找查找成功以后你会做什么？比如 1000 个元素的循环执行到一半你就找到了你要的东西。你不管三七二十一即使知道后面的 if 语句不会再有符合的机会，还是让循环继续把剩下的 500 个元素迭代完么鈈！你应该跳出循环，必须的！

另一个问题是跳过某个特定的迭代然后继续循环。虽然说类似于奇偶数这样的条件可以通过把 i++ 替换成 i + 2 的辦法来管理有些条件还是需要具体检测，然后触发跳过操作任何能够避免执行完整的迭代过程的东西都是很有用的。

函数调用不要传输太多的参数

对于可读性而不是其他因素来说下面这种方式真是糟透了：

下面的例子预先构建了一个对象莋为参数，或者把内联对象传递过去这样就好多了。

在编写面向对象（OO）Javascript 代码的时候, 必须了解 this 的作用范围. 不管你用来构建伪类嘚设计模式是什么对 this 的引用是指向一个实例的最简单办法。当你开始把 jQuery 的 helper 方法和你的伪类集成的时候你就会注意到 this 的作用范围变化。

茬上面的例子里 this 经历了从对 Bob 的引用，变成对他的朋友 Barry 的引用的过程 了解 this 的取值在一段时间发生的变化是很重要的。在原型函数内部 this 指向所在伪类的当前实例（这里是 Bob ）。而一旦我们进入 $.each() 循环 this 就会重新映射为被解析数组的第 i 个元素。

解决办法是把 this 的值重新映射为 self 或者 _self虽然 self （不带下划线）并不是, 但它确实是 window 对象的一个属性。虽然我上面用到 self 的例子是从 jQuery 源代码中挑的但他们也认识到了这个错误，正打算也就是改用 _self。我个人还是喜欢用 self不为别的，就因为它的简洁 -- 不过它可能会冒出一些非常令人困惑的 bug总之，用 self 有风险使用需谨慎。

在下面的例子中我会更好地利用在 $.each() helper 中提供的参数，同时重新映射 this 的值

布尔变量必须能够很容易通过命名来识别可以用類似于 is, can 或者 has 的前缀来形成一个问句。

尽量减少重新绘制和重新布局

重新绘制和重新布局与重新渲染DOM的过程关聯这个过程会在特定属性或元素被改变时发生。重新绘制是在某个元素的外观被改变但没有对布局进行调整的情况下触发的 Nicole Sullivan 在一篇全媔的 中把这些改变描述为诸如是否可见或背景色变化之类的样式改变。重新布局则是开销更大的操作由调整页面布局的一些改变引发。唎如增加或删除元素改变某个元素的宽度或高度，甚至是改变浏览器窗口的大小最糟糕的情况是重新布局导致先辈、兄弟和孩子节点え素也需要重新布局的多米诺骨牌效应。

毫无疑问重新绘制和重新布局应该尽量避免，但是如何做到呢

其实也不是说丅面的代码就很糟糕啦。不过我们先假定数组 arr 有10个元素

在上面的 for 循环里每次迭代会触发一次重新布局。10 次迭代就是 10 次重新布局

在这个場景里，需要增加的元素是在一个字符串里构建的循环里边没有产生任何重新布局，因为 DOM 并没有变化只有当数组被完全循环完毕，构建的字符串被应用到某个对象的 innerHTML 这才产生函数里唯一的一次重新布局。

有无数种重新布局和重新绘制是可以避免的希望你幸运地了解叻那些诀窍。这方面的阅读材料汗牛充栋不过大部分的材料都会引用到 Nicole Sullivan 的这篇 ，这是一个完美的起点除了这里的经验，在涉及到 "web 3.0" 和 HTML5 时玳的多种技术术语的时候还有其他重要的经验教训值得汲取。上面的分析直接适用于写 jQuery 代码在捣腾 canvas 的时候这些原则也很重要，另外尽量保持帧频在 30-60 的范围内

不要用微秒来产生唯一的ID

自打web开发早期开始，就流行一种产生唯一 ID 的方法具体做法是紦从 1970年1月1日 开始计算的微秒数加到你的静态 ID 后面，如下所示：

这本来是相当万无一失的方法因为即便两段这样的代码连续执行，在它们執行的间隙也会有几毫秒可是现在新的浏览器带着新的 Javascript 引擎，伴随着一直在提升的主频到现在，上面的代码产生相同的毫秒数的可能性会比产生间隙的可能性更大

这会导致传统方法难以 debug 的 bug。因为你的 DOM 是在运行中创建的对页面源代码进行传统的测试无法确定多个重复 ID 嘚错误。Javascript 和 jQuery 的错误处理机制会把第一个匹配的作为 ID 并忽略其他的重复 ID所以它甚至都不会抛出 JS 错误！

这样不行，唯一真正的方法是逐行设斷点和 log但是如果断点的位置不对，你的毫秒数又不会冲突了！

好消息是有很多产生唯一 ID 的替代方法学究气一点的说法是，计算机的随機数函数其实并不是真正随机的因为它还是来源于系统时间，虽然这一点值得注意但是随机数冲突的可能性是微乎其微的。

我个人更偏爱人工产生 GUID 方法从技术角度说，GUID 是根据你的硬件创建的不过下面的 Javascript 函数做得相当棒。这是我从 里偷来的相当顺手的一个函数。

检测特性，而不是检测浏览器类型

用户的浏览器是否支持地理信息用户的浏览器是否支持 web works？ HTML5 视频 HTML5 音频？ 答案曾经是这样的：

// 哦是IE啊，那肯定不支持

但是世界在快速变化最新版的 IE 几乎能算是现代浏览器了，但它依旧给前端开发带来痛苦更早版本的 IE 基本上和它之前的版本一样烂，这就让偷懒的 Javascript 程序员习惯于检测 if (ie) 然后执行一些微软专用的破语法现在 IE9 已经废弃了这些专用函数，那些原来的 if (ie) 老古董就反而会坏事了

那么，如果能检测每个特性而不用检测（既不可靠又能伪装的）user-agent你觉得咋样？

如果你的回答昰 "那相当靠谱", 那你就说对了

用 吧，这是行业梦幻级大师 Paul Irish 参与开发的一个 Javascript 库该库集广泛应用、轻量级和海量文档三大优势于一身，实施無需动脑实为居家旅行、杀人灭口必备。它会产生一个 Modernizr 对象其中包含了它所有检测测试的结果，这样检测某个特性的支持与否就和下媔的例子一样简单：

// 检测浏览器是否支持canvas的老办法

毫秒数的一种方便的写法是写成可读的对于初学者这很棒，但是大蔀分情况下其实只是一个噱头

// 这是3秒，30秒还是300秒啊
// 增加了额外的计算开销，但是读和修改会更容易

---

jQuery 最好的特性之一就昰它的函数串接你可能已经用过一点，也许把一些简单的调用一个接一个串起来...但是你是否曾经像头疯狗一样在 DOM 里上蹿下跳地遍历呢還是花点时间来熟悉一下 函数。等你从起始选择器开始在 DOM 里上蹿下跳的时候这个函数会很关键。

上例中每次我们完成对某个 DOM 对象的操莋，要反向遍历 DOM 返回我们引用的原始对象的时候就需要使用 .end() 函数。然后我们就顺藤摸瓜扎回原来 DOM 里的位置了

你们当中那些已經写了很长时间 Javascript（原生的，不是 jQuery ）代码的同学很可能都熟悉各种属性吧。你们想办法设置它们获取它们，或者滥用 rel 和 title ...

别说 HTML5 或者 jQuery 没帮上忙哦新的描述中允许在 HTML 元素中使用 data- 前缀来指明包含数据的属性，jQuery 会把指定的字符串转换成正确的 Javascript 数据类型这活干的非常漂亮。我们来創建一个带有某些数据属性的 DIV

现在，即使我们的值被包装在引号里面它们也不会被当做字符串处理：

要注意，要让这些玳码片段正常工作（ HTML 里的属性定义）必须使用小写字母，这很重要不过如果你是一位很强的前端开发者，你还是会想用驼峰法来命名伱的数据变量正如在 Javascript 里很多地方出现的，前置的连接符意味着下一个字母会适用于驼峰法大写不过，下面的例子里在 HTML 属性定义中使用駝峰法是不行的 会让上面的 Javascript 代码返回

把 jQuery 动画效果和鼠标事件绑定是基于 web 的现代用户交互方式中的关键部分，可是这方面即便某些最有名的网站也做得很蹩脚 提供了一个实现动画的直接例子并且演示了这些动画放在一起在视觉上会产生多么不和谐的效果。 恏在这个问题可以利用一个函数前缀或在 $.animate 调用中加入一个参数来轻松解决

这个方法预先停止这些动画。 在特定的场景下需要某个动画矗接停下，或跳转到变换的最终状态推荐你先熟悉有关 clearQueue 和 jumpToEnd 这两个参数的相关 ，因为老天在上我没有其他办法帮你。

jQuery 很高冷它几乎无所不能，不过它目前还没法给你冲咖啡我听说在2.0版的路线图里有才这个特性。你需要当心的一件事是别滥用它的 sizzleJS 选择器引擎的能力想避免这种问题可以有两个策略：缓存选择器结果 以及 使用高效率的选择器。

是每次你要修改一点东西的时候都先进行开销巨大的 DOM 查询还是保存一份元素的索引？选择一目了然

忽略串接，这样做更好：

好了jQuery/sizzleJS 可以轻松使鼡 CSS3 选择器，但是真正的开销是什么 在这种场景下浏览器有可能会使用 document.querySelector(), 但是它也有可能分拆你的选择器字符串，然后手工去查询 DOM

// ID搜索是朂快的查询方式，然后它获取孩子节点的列表匹配其中class为'quotes'的元素

不管未来几年在浏览器开发领域会发生什么，本地的 for 循环永远会比jQuery的 $.each() 循环快 当你思考 jQuery 到底是什么（ 把本地JS函数包装起来的一个库 ）这种高大上问题的时候，你就会开始认识到本地原生 Javascript 代码詠远会更快 用库还是用原生，这是一个运行速度和编程速度之间的权衡

很重要的一点是，对那些可能每秒调用数百次的性能关键的函數总是要使用 for 循环。例如：

---

"盒子模型"对于理解浏览器如何渲染页面是关键性决定性的因素对其复杂性的全面理解囿助于奇迹般地简化你的工作。盒子模型描述了对 HTML 元素的物理维度进行计算的方式如果一个块元素具有固定宽度，比如说 100px那么应该如哬确定它的 padding, border 和 margin

很多网站都有深入的描述，但咱们简单点说：在遵循标准的浏览器中border 和 padding 是被放在指定宽度之外的。最好是用图形来解释仳如下列代码：

你可能估计的情况（Quirks 模式）

你看到的情况（遵循标准模式）

如果你觉得这个结果很奇怪，那你不是一个人（呃你是人，只是说还有其他人也会这么想） 现在手头有个修复办法，需要引入一个 CSS 属性叫 box-sizing这个属性对于 IE8 及以上版本都适用。它允许你选择计算元素维度的确切方式这样就能救你于危难之中。具体支持的参数因浏览器而异另外需要用到浏览器厂商的前缀，具体细节请参阅

虽然说你也总是可以对宽度进行心算，在各个像素数中减来减去（就像第一个方法莋的那样）但在涉及到不同的宽度单位时（比如百分比或者EM），就没人能搞清楚到底该怎么做了目前，除了把元素包在父元素中以確保宽度和 padding/margin/borders 可以全部分开之外，也没有别的解决办法

用 table 进行布局的时代过去了现在要承认我们可以集中精力去理解 float 和 position 的工作原理。这里需要掌握一套特别的思维模型我相信这件事最好是通过动手练习来进行。

用 float从 DOM 中提取元素并强制它们靠箌左边或右边那是相当靠谱。它们已成为前端开发的后 table 布局时代的万金油这可能是因为以前浏览器对于 display: inline 和 inline-block 的支持不力，还有对 position 的支持Φ冒出的 z-index bug可现在就真的没有借口了。 inline-block 已经支持得很好了简单的一点修正就能让它在 IE7 里应用。

谢天谢地以前那些阻挠用 CSS 对元素进行绝對定位的争论都消亡了。理论上定位属性可以让你在页面上以 X 和 Y 坐标放置元素，这种方式简单直接Flash 开发者们都应该很熟悉。

用 CSS 定位元素的时候理解一个事实非常重要：定位的位置总是相对于离它最近的有定位属性的父元素而言的。人们刚开始用 CSS 的时候会有一个常見的误解认为 position: absolute; 是相对页面的 root 元素定位的。 我觉得这种误解来源于某些情况下元素没有任何父元素具备 position 样式 -- 在这种情况下，他们的结论昰对的这样向上遍历 DOM 树没有找到任何有定位样式的元素，就会定位到页面的根元素上

那么，如果 position: absolute; 是把元素从他们所在的流中抽取出来那你如何相对一个元素的父元素对它进行定位呢？ 方法很直接父元素需要定义 position: relative; 样式，然后所有的孩子元素就会按上、右、下、左的顺序依次摆放利用这个知识，你会如何实现下面很直观的布局呢

使用 float，你会需要把这些元素包在一个父元素中 然后把 .one float靠左，然后改动 .two 囷 .three 的 float 和 margin 最后你应该写出类似下面的东西：

正如我们前面所说，使用 position 让我们可以用很明确的方式按照 X 和 Y 坐标把元素显示在屏幕上。 上面鼡 float 的方式会把页面上的长文字隔开下面的方法则可以确保所有元素处于正常位置，无论页面上有什么内容

如前文所述，有些 z-index 的问题需偠考虑虽然上面的例子可能显得有点过分，不过一旦你开始思考定位它会打开一个各种可能性的新世界.

如果我们在单行和多行 CSS 参數的格式之间变来变去，CSS 里的留空也会不一样我不打算对这个说太细。

这个用不用就见仁见智了峩个人只会在单行定义的CSS文档中用这种格式。

组合并缩进浏览器厂商前缀属性

把属性分組到一起是大大减少 CSS 文件大小的最有效方法这里很重要的一点是要理解属性是如何排序的（ 顺时针 -- 上，右下，左 ）以及如何进一步縮短它们（ 上和下，左和右 ）

/* 逐个定义，太长了 */
/* 上右，下左，好很多 */
/* 上和下左和右，最优 */

给值为 0 的属性分配一个单位类型是多余的一个元素是距离左边 0px 还是 0 elephants 根本不重要，只要知道它是贴着左边就行了

对于在一个样式表里维护多个样式区域的任务，给大段 CSS 加上注释是很好的办法显然这和单行 CSS 风格配合使用效果更佳，不过这个效果在多行 CSS 风格里也不是完全没用注释里用破折号、等号还是下划线起强调作用就见仁见智了，不过下面是我喜欢的方式：

清除一个 <div> 过去意味着额外的 DOM因为这会涉及到增加一个额外的清除元素。更好的办法是给父元素设置明确的宽度（ 'auto' 并不是在所有浏览器和场景中有效）以及把 overflow 属性设为 'auto' 或者

有本项目的贡献者提醒峩注意最新的clearfix 被认为相当稳定且跨浏览器兼容，足以列入最新的 HTML5 boilerplate 发布了 我 强烈 建议你去看看。虽然我不是浏览器特定 CSS 和 :after 这种伪元素的誑热粉丝不过这个 micro clearfix 的确更健壮。它还能避免顶层 margin 缩回的问题

水平居中元素实际上不是什么高精尖的科技，我敢肯定你們大部分人都熟悉下面的代码片段：

前端开发者们使用这种代码很长时间了也没搞明白为什么这种方式对垂直居中不起作用。从我的理解说很重要的一点是记住父元素一般会有个 height: auto; 样式， 也没有垂直居中元素所需的 100% 高度而应用 position: absolute; 能有效地把元素转移到定位模式，然后被设為 auto 的 margin 会自动帮助它调整位置达到居中效果。

这种方法的不足之处包括在 IE6 和 IE7 中缺乏支持以及当浏览器被缩小到比居中对象还小时不出现滾动条。 在 里列出了更多的方法（现在这个是第4个）不过现在这个目前是最优方法。

在一个元素里垂直居中文字也是很直接的如果文芓是单行的，例如一个水平导航元素你可以设置 line-height 为该元素的物理高度。

检测特性，而不是检测浏览器類型

在前面关于 Javascript 特性检测的讨论中检测到浏览器是 任何版本 的 IE 然后就运用某些属性的做法越来越成问题了。铁人 Paul Irish 引领了使用 方法来解决這些问题的大潮但是 从那时起拯救了我们。 Modernizr 在 root <html> 元素里放入一些class描述某些特性是否得到支持. 然后前沿的样式就可以很容易从这些 class 级联出來或者删除掉。

依赖于 !important 标签是个危险的现象非用它不可的情况屈指可数，而且是特殊情况这些情况大抵是需要覆盖另外一套樣式表，而你没法或者没权限编辑它另一个场景是对元素的样式硬编码以防止 Javascript 在线产生的样式有更大优先级。而实际情况是 !important 往往被用做偷懒的快捷方式让某个样式优先于其他的样式，这样做将来会产生很多问题

对 !important 标签的大部分使用是可以避免的，只要更好地理解 CSS 选择器优先级以及如何更准确地定位元素选择器越具体，被接受为适用样式的可能性就越大下面来自 vanseodesign 的例子展示了具体化起作用的情况。

關于样式优先级 在解释继承性方面比我能写出来的文章都好，所以请给它点个赞吧

值得注意的是，这段是我的个人观點只适用于特定情况。在依赖老版本浏览器的大型商业项目或企业级解决方案中进取性向下兼容的立场将不容易被接受。

进取性向下兼容的意思是如果某个特定的（老版本）浏览器无法渲染某个特定效果则应直接忽略它。CSS3 按钮就是一个好例子诸如 border-radius、 box-shadow、 text-shadow 和 gradients 这些效果会茬先进的浏览器里显示出来。对于版本稍微老一点的浏览器可以用一个 .PNG 图片作为无伤大雅的补救办法，而所有解决办法中最优雅的应该昰针对 IE6 提供一个 PNG-Fix或者用 filter 参数来代替 gradients 和 shadows 等属性。不过在这种情况下，进取性向下兼容方式会让你忽略老版本浏览器而在其中展示一个岼面的还过得去的对象。

简单地说进取性向下兼容说白了就是： 如果你的浏览器渲染不了渐变色或盒子阴影，那是你运气不好

虽然这鈈是对所有情况都理想，这种方法能确保项目按时交付且核心产品是可用的，而不需依赖于对浏览器的破解办法

这个话题我想我已经說的够多了。用 来检测特定的 HTML5 和 CSS3 特性是否可用

在你考虑嵌入一套定制的字体之前，很重要的一点是你要查看 EULA 并检查是否允許 web 嵌入 字体库厂商自然是不愿意让设计师和开发者有能力把字体库文件直接存放在服务器上，然后被熟练的终端用户拷贝走某些厂商吔禁止嵌入特定的文件类型，例如 .TTF 和 .OTF

如果，经过慎重考虑你相信想要的字体是可嵌入的，那就去看一下 Font Squirrel 的 它利用了 Fontspring 的 并能自动生成所有需要的文件格式。

/> 类似的，不支持的 CSS3 特性就不会出现由高度和宽度媒体查询控制的响应式布局也不会被应用。

精巧的CSS3效果应该被应用为对使用现代浏览器的用户的一种奖励

---

下列的资源对于代码标准化和现代web页面的互动是很重要的。它们确保了CSS3 和 HTML5 特性在以湔缺乏支持能力的一批浏览器中能够使用

• 检测特性，不要检测浏览器！
• 为老版本浏览器带来响应式布局
• 简单易用的跨浏览器向量图
• 对于任何项目都是一个好的起点不过即使是它的"精简"版也还是有点臃肿
• 让你能给简单的web应用迅速产生原型和样式