不会游泳的猫

— — 专注web前端重构、优化，关注用户体验，崇尚简单、一目了然的代码风格

Monthly Archives: 2月 2012

我的规范文档—CSS规范

留下评论 Posted by mrchenx 于 2012-02-27

如果不知道我为什么要写这个规范文档，请看一下《我的规范文档—序言》

简介

制定本规范的目的在于使我们的CSS代码更加易于维护和重用~！鉴于历史原因，本规范主要针对新项目~！当然，旧项目也可以借鉴~！

文件规范

文件格式统一使用gb2312编码；
如果文件名能用使用一个单词描述则直接使用一个单词命名，比如：index.css~！否则在每个单词之间使用“_”作为链接，如public_sidebar.css；

注释规范

文件顶部注释示例（仅作为参考）
```
/**
 * @ date:创建日期
 * @ explanation:文件简介
 * @ author:作者
 */
```
注意：每一个CSS文件必须包含这三项注释！如果有依赖关系或者其它关系，可在后面自行添加~
组件或者栏目级注释示例（仅作为参考）
```
/**
 * @ explanation:组件简介
 */
```
小模块注释示例（仅作为参考）
```
/* @ name */
```

命名规范

id、class命名时，默认采用小驼峰式命名法，即第一个单词以小写字母开始，第二个单词的首字母大写，如：mainNav、artAbout、colMain、txtImg、expertInfo、txtList；
在id、class命名时，请以结构和功能为主，内容为辅，表现形式为最次。即以模块功能、内容为首选命名方式，如itemList、news、depart等等；
id 和 class 尽量用英文单词命名，确实找不到合适的单词时，可以考虑使用产品的中文拼音或者医院方面的专业术语；
在不影响语义的情况下，id 和 class 名称中可以适当采用英文单词缩写，比如 sub、col、nav、hd、bd、ft 等；

hack规范

一般情况下，不推荐使用IE的条件注释来增加一个单独的CSS；
对于大项目，hack不可避免！因此建议使用更加优雅的方式来书写hack，比如：
- 统一把hack写到选择符的最后面：{ position:relative; overflow:hidden; *zoom:1; }；
- 给hack增加一定的行内注释：.className li{ float:left; width:60px; height:30px; margin-left:10px; display:inline; /* for IE 6 */ }；
- 通用hack
  
  待整理！

书写规范

书写顺序
1. 定位、显示：position、z-index、top、right、bottom、left、clear、float、display、visibility
2. 元素自身属性（盒子模型）：width、height、margin、padding、background、border
3. 文本属性：color、font、line-height、text-align、text-indent、vertical-align、text-decoration、word-wrap、white-space
4. 其它特定属性：overflow、cursor
5. CSS3相关属性：text-shadow、border-radius、opacity
注意：以上书写顺序，没有强制每个属性都要按以上的顺序来写，但我们应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的！建议按每个大分类的顺序来写！

书写示例（仅作为参考）

/**
 * @ 头部
 */
.header { position:relative; height:126px; background:url(../img/header_bg.jpg) no-repeat; }
/* Logo区域 */
.logo { width:128px; height:72px; padding:23px 33px; }
.logo img { width:128px; height:72px; }
/* 站点描述 */
.siteDescription { display:none; }

注意：注释、书写顺序，请参考上面的规范~

书写细节
- 区域模块间记得多按几个回车，以全区分；
- 使用群组选择器的时候，每一个选择器占一行；
- 避免使用低效选择器：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html

注意事项

一定要有全局设置
- 全局设置可以避免重复书写同样的东西。尤其是需要多人共同写样式的项目当中！目前医院营销中心当中各医院官方站点的全局样式名称统一为global.css，里面包含着reset、公共头尾、整站通用模块的样式；
- 一般情况下，不要直接给标签写样式。而应该使用class。像下面这种写法，并不是很合适:
```
h1{ font-size:30px; }
h2{ font-size:20px }
h3{ font-size:10px; }
```
- 一般情况下，不推荐按表现形式的命名规则，而应该按功能或者内容的形式进行命名。像下面这种写法，并不是很合适：
```
.f00 { color:#ff0000; }
.f60 { color:#ff6600; }
.fl { float:left; }
.fr { float:right; }
.fb { font-weight:bold; }
```
注意缩写
- 对于font-size、font-weight、font-family、background-color、background-image、background-repeat这一类的，我们一般推荐你进行缩写：background:url(image) no-repeat 0px 0px;
- 为了避免网速缓慢导致CSS已经加载，而图片仍未加载完成或图片服务器挂掉时文本不可见，请尽量使用加上CSS定义的背景颜色，如：background:#ff6600 url(image) no-repeat 0px 0px;
- 合理运用空标签、废弃的标签，比如：<i></i>、<b></b>、<s></s>
```
.arrow { display:block; width:0px; height:0px; border-width:5px; border-style:solid; border-color:#666666 #ffffff #ffffff #ffffff; font-size:0px; overflow:hidden; }
/* 上面的代码，在一个白色的背景下，将会创建一个尖角向下的小三角形 */	
```

hasLayout

CSS property	Value
position	absolute
float	left or right
display	inline-block
width	任何值除了auto
height	任何值除了auto
-ms-writing-mode	tb-rl
zoom	除 normal 外任意值

hasLayout是一把双刃剑，有好亦有坏！因为在IE浏览器中，很多兼容问题都是hasLayout引起的！

更多关于这个列表的资料，请看http://msdn.microsoft.com/en-us/library/ms533776(v=VS.85).aspx

代码测试

	Win XP	Win 7
IE 9.0		A
IE 8.0	A	A
IE 7.0	A
IE 6.0	A
Firefox 3.6↑	A	A
Safari 5.0↑
Chrome (latest stable)	A	A
Opera (latest stable)

以上浏览器的兼容底线，是各医院各个站点统计后得出的结论，跟网络流传的可能有一定的差距！

以上为浏览器兼容的底线，凡A级浏览器，均需严格测试，并做到最大的兼容处理！

更多关于这个列表的资料，请看：http://developer.yahoo.com/yui/articles/gbs/

重构之美, HTML/CSS css, css规范

我的规范文档—HTML规范

留下评论 Posted by mrchenx 于 2012-02-25

如果不知道我为什么要写这个规范文档，请看一下《我的规范文档—序言》

简介

制定本规范的目的在于使我们的html代码更加易于维护和重用~！鉴于历史原因，本规范主要针对新项目~！当然，旧项目也可以借鉴~！

文件规范

新页面的DTD声明统一为HTML5版本声明~！但html编码要求，还是严格遵循(x)html的风格；
文件格式统一使用gb2312编码；
禁止使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />来限制IE版本；

标签规范

新页面的DTD声明统一为HTML5版本声明，示例如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="gb2312" />
<title>网页标题</title>
</head>
<body>
	这里写html代码
</body>
</html>

严格遵循(x)html的编码风格
- (x)html元素必须被正确地嵌套
- (x)html元素必须被关闭
- (x)html标签名、属性名、属性值必须用小写字母且不能简写
- (x)html文档必须拥有根元素
注意：验证方式请使用Firefox当中的Web Developer插件进行快速验证或者直接到http://validator.w3.org/这里验证

注释规范

组件或者栏目级注释

<!-- S 页面主体区域 -->
<div id="mainArea" class="mainArea">......内容......</div>
<!-- E 页面主体区域 -->

对于需要特别声明的模块，可酌情添加一些说明，比如：
```

```

规划HTML结构

一般情况下，是这样进行模块化的

<!-- S 模块A -->
<div class="mod modA">
　　<div class="hd"><h3 class="hdT">这里是标题</h3></div>
　　<div class="bd">
　　　　<p>这里放置内容</p>
　　</div>
</div>
<!-- E 模块A -->

<!-- S 模块B -->
<div class="mod modB">
　　<div class="hd"><h3 class="hdT">这里是标题</h3></div>
　　<div class="bd">
　　　　<p>这里放置内容</p>
　　</div>
</div>
<!-- E 模块B -->

/* 模块A、模块B公共样式 */
.mod { }
.mod .hd { }
.mod .hdT { }
.mod .bd { }
/* 模块A */
.modA .hdT { }
/* 模块B */
.modB .hdT { }

命名规范，请查看《CSS规范文档》当中的《命名规范》
命名顺序，请遵循公用类名、扩展类名、个性类名的命名方式进行xhtml命名（需要多个命名规则的情况下）

重构之美, HTML/CSS 规范文档, html规范

其实最早看到伪元素选择器的妙用应该是在WebRebuild第五届年会的广州站上的，记得是迅雷的同学在上面分享的~~~谈到的是用伪元素选择器替换图片的办法~说真的，之前一没有关注过伪对像方面的应该，毕竟工作当中比较少接触到的~后来淘宝改版了，QQ空间改版了~朋友网改版了~财付通改版了~大家都喜欢浅色调来搭配了~尤其喜欢用灰色的，还喜欢用渐变的~~比如淘宝首页底部的模块的线框，QQ空间、朋友网的某些模块的底部都用了类似于渐变或者阴影的效果~大体上都是利用png图片或者CSS3的一些属性，配合着一些空白标签实现的~回想起WebRebuild年会里面提到的伪元素选择器，其实，那些效果基本可以用CSS3来实现（当然是不兼容≥IE8啦~）

比如淘宝里面那些边框渐变的效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="gb2312" />
<title>after、before伪元素选择器的一些小效果</title>
</head>
<body>
<div class="boxName">
      <!-- 这里写你的html代码 -->
</div>
</body>
</html>

/* 简单的全局reset */
* { margin:0px; padding:0px; }

.boxName { position:relative; width:300px; height:300px; margin:10px auto; background:#ffffff;border:1px solid #999999; border-bottom:none; }
.boxName::before,.boxName::after {
      content:"";
      position:absolute;
      bottom:0px;
      height:160px;
      width:1px;
      background:#999999;
      font-size:0px;
      line-height:0px;
      overflow:hidden;
      background-image:linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-o-linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-moz-linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-webkit-linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-ms-linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0.16, rgb(153,153,153)),
            color-stop(0.8, rgb(255,255,255))
      );
}
.boxName::before { left:-1px; }
.boxName::after { right:-1px; }

看起来的效果，大概是这样滴：

关于CSS3的渐变，这么长的代码，我自己是很难打出来的~更多的是直接用一些工具生成的~经常用的如：http://gradients.glrzad.com/

当然，还可以利用伪元素选择器和CSS3做更多我们常用的效果~~比如，QQ空间改版后，出现了一些模块，它的底部是有一些阴影的~看了里面的代码，用的是png24的图片，然后在模块的底部加上一些标签实现的，同时，它为了兼顾低版本的IE浏览器，还用了滤镜效果~~如果我们不考虑IE8以下的浏览器的话，我们完全可以用伪元素选择器来实现，比如像这样：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="gb2312" />
<title>after、before伪元素选择器的一些小效果</title>
</head>
<body>
<div class="shadowBox">
      <!-- 这里写你的html代码 -->
</div>
</body>
</html>

/* 简单的全局reset */
* { margin:0px; padding:0px; }

.shadowBox { position:relative; width:800px; height:300px; margin:10px auto; background:#fafafa; border:1px solid #eeeeee; border-radius:5px; -moz-border-radius:5px; }
.shadowBox::before,
.shadowBox::after {
      content:" ";
      position:absolute;
      z-index:-1;
      top:80%;
      bottom:18px;
      width:40%;
      background:rgba(0, 0, 0, 0.7);
      border-radius:5px;
      -moz-border-radius:5px;
      box-shadow:0px 15px 10px rgba(153, 153, 153, 0.7);
      -moz-box-shadow:0px 15px 10px rgba(153, 153, 153, 0.7);
      transform:rotate(-3deg);
      -webkit-transform:rotate(-3deg);
      -moz-transform:rotate(-3deg);
      -o-transform:rotate(-3deg);
      -ms-transform:rotate(-3deg);
}
.shadowBox::before{ left:10px; }
.shadowBox::after{
      right:10px;
      transform:rotate(3deg);
      -webkit-transform:rotate(3deg);
      -moz-transform:rotate(3deg);
      -o-transform:rotate(3deg);
      -ms-transform:rotate(3deg);
}

看起来的效果，大概是这样滴：

扩展阅读：

2012-02-26修改：

对于:first-letter、:first-line、:before、:after、:selection这些选择器，正确的应该是叫做伪元素选择器（Pseudo-Element Selectors），同时CSS3将伪元素选择器(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效~~！

重构之美, HTML/CSS ::after, ::before, 伪对象

读《高性能网站建设指南》笔记之：添加Expires头、配置Etag

留下评论 Posted by mrchenx 于 2012-02-11

该笔记主要是针对《高性能网站建设指南》里面的规则3—添加Expires的一些理解与扩展阅读~~

Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止。HTTP规范中简要地称该头为“在这一日期/时间之后响应将被认为是无效的”。它在HTTP响应中发改送。

Sat, 11 Feb 2012 13:54:18 GMT

在解释缓存如何很好地改善传输性能之前，需要提及除了Expires之外的另一种选择。HTTP1.1引入了Cache-Control来克服Expires头的限制。因为Expires使用一种特定时间，它要求服务器和客户端的时钟严格同步。另外，过期时间需要经常检查，并且一旦未来这一天到来了，还需要在服务器配置中提供一个新的日期。

换一种方式，Cache-Control使用max-age指令指定组件被缓存多久。它以秒为单位定义了一个更新窗。如果从组件被请求开始过去的秒数少于max-age，浏览器就使用缓存的版本，这就避免了额外的HTTP请求。一个长久的max-age可以将刷新窗设置为未来10年。

Cache-control:max-age=315360000

使用带有max-age的Cache-Control可以消除Expires的限制，但对于不去支持HTTP1.1的浏览器，你可能仍然希望提供Expires头，你可以同时指定这两个响应头—Expires和Cache-Control max-age。如果两者同时出现，HTTP规范规定max-age指令将重写Expires头。然后，如果你尽职尽责，你仍然需要担心Expires带来的时钟同步和配置维护问题。

无Expires的示例：http://stevesouders.com/hpws/expiresoff.php
长久的Expires的示例：http://stevesouders.com/hpws/expireson.php

上面是关于Expires和Cache-Control的一些解释，摘自《高性能网站建设指南》里面的规则3—添加Expires。

然而，一个HTTP请求时面，包含的信息不仅仅有只有Expires这些信息的，还包含着像Last-Modified、If-Modified-Since、If-None-Match等这一系列的信息，如：

先来看看这个《304 Not Modified》：客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

具体怎么来的呢？还是先来看一下这些信息吧：If-Modefied-Since、If-None-Match、Etag、Expires、Last-Modefied。

一般来说，浏览器通过Last-Modified响应头来返回组件的最新修改日期，然后浏览会用If-Modified-Since头将最新修改日期传回到原始服务器以进行比较，如果原始服务器上的组件最新修改日期与浏览器传回值匹配，会返回一个304响应~~这就是浏览器通过比较最新修改日期来检测缓存的组件是否和原始服务器上的组件的相匹配。

当然还有另外一种方式来比较，比如像刚才提到的Etag。

Etag是在HTTP1.1中引入的，是比最新修改日期更为灵活的机制。例如，如果组件依据User-Agent或Accept-Language头而改变，组件的状态可以反映在ETag中。此后，如果浏览器必须验证一个组件，它会使用If-None-Match头将Etag传回原始服务器。如果Etag是匹配的，就会返回304，大致过程如下《摘自（互动百科）：http://www.hudong.com/wiki/Etag》：

第一次请求
1.客户端发起 HTTP GET 请求一个文件；
2.服务器处理请求，返回文件内容和一堆Header，当然包括Etag(例如”2e681a-6-5d044840″)(假设服务器支持Etag生成和已经开启了Etag).状态码200
第二次请求
1.客户端发起 HTTP GET 请求一个文件，注意这个时候客户端同时发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d044840
2.服务器判断发送过来的Etag和计算出来的Etag匹配，因此If-None-Match为False，不返回200，返回304，客户端继续使用本地缓存；

流程很简单，问题是，如果服务器又设置了Cache-Control:max-age和Expires呢，怎么办？

答案是同时使用，也就是说在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，服务器才能返回304.(不要陷入到底使用谁的问题怪圈)；

现在大概知道If-Modefied-Since、If-None-Match、Etag、Expires、Last-Modefied这些到底是做什么的了吧~~这次没有深入去研究HTTP请求方面的东西~~有时间再去整理一些相关的东西来~~

前端优化 Etag, expires, If-Modefied-Since, If-None-Match, Last-Modefied

不会游泳的猫

Monthly Archives: 2月 2012

我的规范文档—CSS规范

简介

文件规范

注释规范

命名规范

hack规范

书写规范

注意事项

代码测试

我的规范文档—HTML规范

简介

文件规范

标签规范

注释规范

规划HTML结构

关于after、before伪元素选择器的一些小效果

读《高性能网站建设指南》笔记之：添加Expires头、配置Etag

近期文章

分类

Twitter Updates

归档

功能