Front-end Archive

前段时间，为自己的三年前负责的WEB产品重新作了一次性能优化，回顾到3年前的那些日子，W3C标准在国内仍处于萌芽状态，Table布局泛滥于中国互联网各大大小小互联网产品之中，W3C标准只是个互联网时尚的代名词。截到今天为止，W3C标准已不在是一种口号，而是实现的依据和标准。

推动WEB前端性能优化，我觉得需把握以下关键三要点：

1. 提升WEB前端响应性能，性能为王。没有速度，就会失去用户，这是用户体验的基石之一；
2. 易于维护，内容与表现合理地分离。这是一个敏捷的时代，产品的更新维护和团队的协作更讲究的是效率。
3. 符合满足SEO的要求，你的产品不是只为自己和客户服务，更要为我们桥接于用户的搜索引擎服务，只有这样你才能有收益，才能有后期的ROI和转化率。

作为以网络起家的YAHOO及其性能团队，所总结出来的2/8原则已成为WEB前端性能优化法则：只有10~20%用户响应时间花在从Web服务器获取HTML文档并传送到浏览器中。其余的80%~90%时间花在下载页面中的所有组件中。

Continue reading

自从第一次使用上了Topstyle，我就深深地爱上了这个CSS编写工具。喜欢尝尝新的朋友可以下载尝试尝试，BETA版可使用到2009年4月30日才到期。

这次4.0版并没带来翻天覆地的功能性变化，毕竟要顾及一大批的老用户。只是在3.5的基础上整合加强了几方面的功能，如支持UTF-8&UTF-16、编辑HTML、HTML工具栏、FTP。。。

Continue reading

原文：CSS Browser Support (including Safari 4 Beta)

Safari 4.0 Beta版(下载) 已于2009年2月24日正式对外公布，自Safari 3.2始就已支持所有CSS选择器，以下是原著作者整理出来的最新CSS浏览器支持清单，其中包括Safari 4.0 Beta版。

图示说明：

• Green / √ 当前支持
• Orange / Δ 浏览器部分支持
• Red / Χ 浏览器完全不支持

 

Continue reading

谈起IE浏览器，一直是front-developer们心中的痛，包括我，也不能独善其身。

首先，让我们来看看目前全球浏览器市场占有率的蛋糕划分图：

Continue reading

作为一个WEB前端开发人员,了解CSS Specificity是必须的而且至关重要的技巧.

原文链接：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

以下是个人理解后翻译出来的文章，如有不足之处请多谅解。

除了浮动特性,CSS Specificity特性也是样式表中较为难理解的概念之一.在通常情况下,你认为一些应该应用到元素的CSS规则为何浏览器没有应用到.为了尽量花少时间去排错,你需要去了解浏览器是如何解释你的样式代码;另外,你还需要系统地理解CSS Specificity特性是如何工作的.类似此类问题大多数原因是在样式表中的另一个位置定义了更特殊的选择器.

Css Specificity虽不简单,然而,还是有办法用简单直观地方式介绍它.

Css Specificity概览

1. Specificity特性决定哪些CSS规则应用于客户端浏览器.
2. 优先级是你的CSS规则通常应该不到一些元素的原因，包括你认为应该应用到的。
3. 每个选择符都有它自身的层级数。
4. 如果两个选择符属性同时应用于同一个元素，优先级高的生效。
5. 可分为四种明显的优先级类别：inline style,IDs,classes+attributes,elements
6. 如你喜欢星球大战的话可看看：CSS Specificity Wars
7. 如你喜欢纸牌游戏的话可看看：CSS Specificity for Poker Players
8. 当Speficity值相等时，后来选择符居上。
9. 当Speficity值不相等时，Speficity值高的选择符生效。
10. 越具体的选择符越有更高的优先级数
11. 最后的CSS规则将覆盖任何之前或冲突的CSS规则。
12. 嵌入式样式的Speficity值高于其它。
13. ID选择符比属性选择符Speficity值要高。
14. 你可用IDs去提高选择符的Speficity值
15. class选择符高于大部分的元素选择符
16. The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.

另外，!important规则高于一切，慎用；继承的样式属式不参与优先级数值计算，低于其它规则。

Continue reading