期待已久的《高性能网站建设进阶指南》终于出来了。作为口碑前端的一员，都感觉灰常Happy。 相信大家都熟悉那本《高性能网站建设指南》，而作为姊妹篇的《高性能网站建设进阶指南》也绝不会逊色于前者。通过校验该书的机会，也学习到了非常多关于web前端优化的具体的最佳实践，包括图片优化、Load Javascript without block，编写高效的Javascript、css代码，后加载（Initial Payload），拆分window.onload代码等等最佳实践，还介绍了众多的前端开发工具。可以总的来说：《高性能网站建设指南》是一本理论的书，而《高性能网站建设进阶指南》则是实践篇。 它确实是一本值得去反复阅读的好书！！
这几天接到北京提出的iphone网站开发项目，看到视觉稿，也确实够晕的。仔细想想，需要使用到很多css3圆角和背景技术，从这点来说，玩玩css3，也确实不错。 上面列出的部分视觉稿中，按钮的样式、导航的渐变背景，以及带有icon前缀修饰的按钮，渐变背景和圆角都是用了css3的-khtml-border-radius，background:-webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#d8d8d9))。css3，玩起来还是不错的，在这里我不想讨论css3的使用技巧，只是想把在做的过程中遇到的一些问题，亮出来晒晒。 HTML的head标签内需要显示声明meta属性：<meta name=”viewport” content=”width=device-width; minimum-scale=1.0; maximum-scale=1″ />，minimum-scale和maximum-scale主要作用是控制内容的显示比例。 iphone在使用css3的时候，要通过-khtml为前缀的方式，-webkit的方式不管用。比如：-khtml-border-radius iphone不支持css的inline-block属性 iphone没有:hover状态，不过可以通过iphone的ontouchstart和ontouchend两个js事件来模拟触屏特效，比如上面展示了搜索结果展示的list和按钮样式变化的情形，我都是用js来实现的。不过这也有个不可避免的问题，就是iphone默认有这么个触屏效果，虽然可以在ontouchstart和ontouchend事件中通过return false可是实现，但是这取消了链接或者按钮默认的功能，这个需要衡量。(javascript示例代码如下） iphone在横屏和竖屏的情况下，字体会发生变化。这可以通过在html中用css的属性：-webkit-text-size-adjust:none;声明一下，就可以防止横竖屏切换的时候字体发生的变化，导致其他样式连锁变化。 iphone支持大多数的css3属性：我使用到的就有:last-child,:first-child,nth-child(n),:last-of-type,:first-of-type等等，通过只用这些css属性，可是节省很多麻烦。 … 了解更多
今天在做页面的时候，有一个tab组件的需求，需要切换样式: tab在切换的时候如上面图片所示，左右一个像素的border，上面2像素，下面一个白色像素来覆盖边框。这个在FF等非IE内核的浏览器下显示没有问题，可是在IE浏览器下《问题页面》: 在IE下，激活tab右下角总是多出了一像素高度，为着这个IE下的一像素问题，快崩溃了。最初还以为是IE bug，测试来测试去，最后发现是IE渲染border的方式跟FF等浏览器不同。按原理来说，应该是top、bottom覆盖left、right的border颜色（FF等浏览器正是这么做的），可是IE却不是，它是按照逆时针，类似于是拼接似的来渲染border。这个问题只有在一个像素宽的border的时候才会出现，当大于一像素的时候，问题不存在。 《更新的测试页面》
进入口碑也已经有三四个月的时间了，感觉在工作过程中收获最大的是在编写HTML页面上，从视觉稿到网页DEMO，没办法，基本都在做这样的工作。从最初的wap整站、杭州首页、bug需求到广州首页、上海首页、店铺大全等页面改版，到当下的口碑卡频道首页改版的DEMO的编写。心情从最初的烦躁、枯燥的调试到轻松自如，到当下的信手拈来、游刃有余，摆脱了IE6、7 Fuck bug的束缚，每次尝试到不用写一个hack来完成整个页面布局的滋味，记忆犹新。 在公司同事中学到了不少的经验，也总结出来了自己的一套开发步骤： 整体分析页面布局 归纳统一、分类，切图（CSS Sprites） 拆分模块、规划HTML结构、规划并编写CSS 组合成页面（得益于YUI的页面布局生成器组件） 第一步：整体分析页面布局。 当拿到视觉稿的时候，不是着手去想怎么编写HTML、CSS代码，而是先从整体上分析页面的布局，观察页面各个模块的间距差别、划分header，body，footer、CSS Sprites、切图事宜、页面色调、背景如何设置等等，之后再细化到每个模块的布局，从外到内，逐步细化。可以说，这一步是非常关键的，它给了下面将要进行的代码编写一个整体的框架布局。 第二步：归纳统一、分类，切图（CSS Sprites） 整体分析过后，就是归类、组合模块的时候了。这一步还是的需要从整体来看，分析页面哪些模块的样式相似（常见的就是ul列表，以及一些图文编排），包括颜色、样式、修饰、背景、宽度、padding、margin、border等等。将相似的模块的样式归类，这为接下来编写CSS代码大有好处，可以最大化的精简CSS代码。 第三步：拆分模块、规划HTML结构、规划并编写CSS 在前期工作都做了之后，这步就改到了动手写代码的时候了，我喜欢将每个模块或者列拆分开来编写，这样做的好处是我可以先不管整体布局，从HTML语意化的角度架构HTML结构，此时HTML代码较少，在编写CSS以及查看HTML代码的时候不用花费太多时间了（痛恨HTML代码多了，上下拉滚动条，累人！） 第四步：组合成页面。 在每个模块都编写好之后，借助页面布局生成器（幸亏有了它，效率第一啊！缺点是HTML结构复杂，-_-），将每个拆分的模块整合起来，同时也清理CSS文件的代码，整合CSS代码也有一些些技巧的：在CSS Sprites里设置HTML元素的背景的时候，把全部的元素都写在一处： … 了解更多
不知道怎么去命名这种用法，所以标题干脆就那样写了，不过这种方式也不是新鲜事了，只是想到了它的另外一些作用，所以YY一下。先看HTML和JS代码样式： [html] <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> #div { border: 1px solid #ccc; … 了解更多
今天在看一篇关于hasLayout的一篇博文《On having layout》（中译版本《[译文]On having layout》），在作者谈及到块元素display设置为inline的时候，它的性质就跟行内元素十分相似了。由此想到了文本在容器里垂直局中的问题，所以就测试了一番。 不测不知道，一测还真学了一套。 第一种情况是：如果文本只是单行的话，这个就简单，直接设置元素的line-height css规则的高度跟height一样就ok了。下面的测试code在每个浏览器都显示正常。 [html] <style type="text/css"> div{ width:400px; height:200px; line-height:200px; border:1px solid #ccc; } </style> … 了解更多