这几天接到北京提出的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元素的背景的时候，把全部的元素都写在一处： … 了解更多
今天在看一篇关于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> … 了解更多
刚入职口碑网三个星期的时间，感觉这段时间最大的收获是在HTML、CSS的学习方面。经过一两个星期的总结，今天在编写一个栏目的HTML、CSS的时候，终于编写出了只在 Firefox调好样式，其他浏览器都兼容了，特别是Fuck IE全部现代版本都兼容了，不用修改任何一处不兼容的代码，也都没有写一个hack能实现视觉效果，小赞了一下自己，:)。记得大豆说过：“我编写的HTML页面，基本在Firefox调试好 ，其他的浏览器我基本都不用调试啦，因为我在编写的时候就知道了它在其他浏览器将会出现什么效果了。”，这或许就是大师的境界吧! 因为HTML、CSS这方面功力不足，所以一方面要求乌龙茶师傅多分配这样的一些作业或者多接一些日常任务来提高这方面的能力。N个月没有写HTML了，对HTML语意化、创建良好的HTML结构都比较模糊，经过观察内网（http: //www.koubei.com)的HTML结构，也开始使用Firefox的Firebug来查看淘宝网等等一些知名网站的HTML各模块的 HTML结构编写方式，从中也开始悟出了一些门道。 关于HTML的良好的结构性的说法网上都有很多论述，总结一点就是：根据你要展现内容的特点来使用跟内容语意相符的HTML标签。这个总结或许是片面点了吧，不过基本思路还是这样滴。:) 页面上比较常用到的模块有：导航、图文并排、列表、图文列表、列表里又细分为图文并排等等，这些都是经常需要使用到的。我在入职后刚开始写页面的时候也是碰到了很多这样的模块的HTML的编写。按照我现在的习惯方式的话，当接到一个页面的需求的时候，首先不是入手开始编写HTML，而是先从整个页面上、结构语意化的角度考虑去如何规划结构，将每个模块细分出来，在细分的过程中去归纳哪些模块或者哪些样式是可以整合为使用一个css类来编写的，细分和归纳好之后，开始入手编写每个版块的HTML结构。所以，刚开始做任务的时候，我都会在这方面花费一点点时间来审视和规划页面，这些基本工作准备好了之后，就开始编写HTMl结构啦。这样一个过程的好处在于使得我编写的HTML的结构会尽量的保持精简而又能完成视觉效果，而且还有一个好处就是可以精简你的css的编写，使得你的css代码将会非常的清晰。
这几天看了秦歌的博客的其中一些关于XHTML和HTML，以及关于DOCTYPE的一些博文，开始关注到了DOCTYPE的一些细节的知识。促使浏览器使用XHTML1.0或者XHTML1.1还是HTML的DTD来解析文档，可是使用DOCTYPE嗅探来实现。现在浏览器的解析模式有标准模式（Standards Mode）以及所谓的怪癖模式（Quirks Mode），而标准模式的DOCTYPE的声明方式有下面的几种： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <?xml version=”1.0″ encoding=”utf-8″?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> … 了解更多