IT瘾css推荐

方法二：absolute + transform

  .parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

同 水平居中的方法二

方法三：table-cell + vertical-align

  .parent {
  display: table-cell;
  vertical-align: middle;
}

vertical-align 可以作用在 inline元素， inline-table元素，以及 table-cell元素上。

3.水平垂直居中

父元素和子元素宽高都未知。

方法一：flex + justify-content + align-items

  .parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

综合了 水平居中和 垂直居中的方法一

方法二： absolute + transform

  .parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

综合了 水平居中和 垂直居中的方法二

方法三：[inline-block + text-align] + [table-cell + vertical-align]

  .parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  display: inline-block;
}

多列布局

1.一列定宽 + 一列自适应

  <div class="parent">
  <div class="left"><p>left</p></div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

方法1：float + margin

  .left {float: left; width: 100px;}
.right { margin-left: 120px;} //有20px是间距

方法2：（对方法一的改进）float + margin + (fix)

因为方法1在低版本浏览器有兼容性问题，所以改进一下。

  // 首先在right外面加了right-fix这个div
<div class="parent">
  <div class="left"><p>left</p></div>
  <div class="right-fix"> 
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

CSS改动：

STEP1：

  // .left 和 .right 设置暂时不变
.right-fix {float: right; width: 100%;}

效果为：（注意：我们把right-fix设置为白色背景，只是为了方便观察。）

STEP2：

可以看到，由于right-fix宽度为100%，所以跑到了left下面一行。想要回到同一行，需要给right-fix设置一个负的margin-left值-100px。

  .right-fix { margin-left: -100px; }

关于为什么设置了 margin-left: 100px;就可以使得回到同一行呢？是因为设置了负的margin-left值之后，浏览器计算right-fix元素的宽度后，会加上-100px，也就是减掉100px，这也就是left的宽度，所以left 与 right-fix 加起来没有超过整行的宽度。
想要进一步了解负的margin值可以参考这篇文章： CSS布局奇淫巧计之-强大的负边距

效果如图：

STEP3：

不幸的是，因为html文档中right-fix处于left后面，所以left被right-fix遮住了，实际应用中right-fix虽然没有背景色，但是我们还是不会希望它覆盖在left上面。

所以，我们需要提高 left 的层级。如何提高呢？由于设置了position: relative;的元素层级要高于普通元素，所以加上这样一条：

  .left{ position: relative; }

具体可以参考张鑫旭写的一篇讲解 position:relative;很详细的文章： CSS 相对/绝对(relative/absolute)定位系列（四）

最终达到我们要的效果：

到jsfiddle中自己试试去

方法3：float + overflow

  .left{
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}

原理是：设置了overflow:hidden; 之后，会触发BFC模式，而BFC模式内部的布局不受外部影响，所以不会受浮动影响，不会围绕left而是跑到left右边去了。

方法4：table

  .parent{
  display: table;
  width: 100%;
  table-layout: fixed; //加速table渲染，实现了布局优先
}
.left, .right {
  display: table-cell;
}
.left {
  width: 100px;
  padding-right: 20px;//因为table-cell不能设margin，所以设置padding来加间距
}

根据table的特性,left设置了100px后，right就占了剩余宽度。

方法5：flex

  .parent{ display: flex; }
.left{ width: 100px; margin-right: 20px; }
.right{ flex: 1; }

So easy.

2.多列定宽 + 一列自适应

再加一列定宽就行啦 o(≧v≦)o

3.不定宽 + 一列自适应

不定宽意思是：
1.可以随意更改宽度：比如改为100px，200px，同时不需要更改其他样式也可以做到两列自适应布局。
2.或不设置宽度而是由里面子元素的宽度决定。

以下方法对应 [一列定宽+一列自适应] 中的方法

方法1： float + margin ？

不好意思，做不到。

方法2： float + margin +（fix）？

不好意思，也做不到。

方法3： float + overflow ？

阔以！ right的样式没有依赖于width的宽度。代码量也少，很棒棒哦！

方法4：table

阔以！ right的样式没有依赖于width的宽度，即不关心width的宽度。

方法5：flex

强大的flex当然可以~（傲娇脸）

4.两列不定宽 + 一列自适应

没错，跟你想的一样，加一列不定宽的就行了，样式都一样ㄟ( ▔, ▔ )ㄏ

5.等分布局

C + G = 4*（W + G）
以下例子假设间距G = 20px

结构：

  <div class="parent">
  <div class="column"><p>1</p></div>
  <div class="column"><p>2</p></div>
  <div class="column"><p>3</p></div>
  <div class="column"><p>4</p></div>
</div>

方法1：float

  .parent{ margin-left: -20px; }//就是上面公式中等号左边的G
.column{
  float: left;
  width: 25%;
  padding-left: 20px;//这里要注意，因为我们用padding来表示间距，所以如果你是给p元素设置了background-color，会发现没有间距，p标签的width才是上图中的W
  box-sizing: border-box;
}

方法2：table

  <div class="parent-fix">
    <div class="parent">
      <div class="column"><p>1</p></div>
      <div class="column"><p>2</p></div>
      <div class="column"><p>3</p></div>
      <div class="column"><p>4</p></div>
    </div>
</div>

  .parent-fix{
  margin-left: -20px;
}
.parent {
  display: table;
  width: 100%;
}
.column {
  display: table-cell;
  padding-left: 20px;//因为单元格不能设置margin，所以间距只能用padding来做。
}

因为table的width默认是随内容宽度变化的，所以需要手动设置 width: 100%;。又因为明确设置了宽度的元素就没办法用将margin设为负值的方式增加20px宽度了，所以需要在外面加一个父元素 parent-fix。
这里大家可以自己试试比较一下给 parent-fix 设置width为100%与 不设置width时parent-fix实际宽度（用调试工具里的查看元素看）的区别来理解。

呐，jsfiddle示例在这

方法3：flex

  .parent { display: flex; }
.column { flex: 1; } 
.column + .column { margin-left: 20px; }//好用的兄弟选择器 (｡・`ω´･)

上面这个等分布局这个整理完在另一篇CSS布局的文章里面给个链接

6.一列定宽+一列自适应（当其中较高的一列高度变化，另一列同步变化）

右侧变高，左侧高度随之变化：

↓↓

方法1：table

table的列之间有天然等高的特性。

就是上面 1.一列定宽 + 一列自适应中的 方法4：table。

方法2：flex

flex也是天然的等高 <(￣︶￣)> 因为它默认的align-items为stretch，即在交叉轴上默认拉伸占满整个容器。

仍旧是上面 1.一列定宽 + 一列自适应中的 方法5：flex。

简单到不好意思给栗子

方法3：float

仍旧是参照上面 1.一列定宽 + 一列自适应中的 方法3：float + overflow，float并没有天然等高，所以要在这个基础上做改动。

  .left{
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}
//增加部分
.left, .right{
  padding-bottom: 9999px;//使得有背景色的部分变的很高
  margin-bottom: -9999px;//用负的margin抵消掉很高的padding，让高度变回left和right中较高的那部分的内容高度，以便parent用overflow: hidden;去隐藏掉超出部分
}
.parent {
  overflow: hidden;//隐藏掉超出边界的部分 
}

其实left的实际高度并没有变，是一种伪等高，只是背景变高。

7.全等四宫格

这是练习题，置几试试吧。

  <div class="parent">
  <div class="outer">
    <div class="column>1</div>
    <div class="column>2</div>
  </div>
  <div class="outer">
    <div class="column>3</div>
    <div class="column>4</div>
  </div>
</div>

方法1：flex

  .parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.outer {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

一颗仅供参考的栗子

方法2：float

我的栗子

方法3：table

一个栗子不一定对

全屏布局

1.定宽（px）+自适应

只有主内容区 right 随内容滚动。

方法1.position

  <div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right"><div class="help-right">right</div></div>
<div class="bottom">bottom</div>
</div>

  html, body, .parent {height: 100%; overflow: hidden;}//为了让整个页面不滚动
.top {
  position: absolute;
  top: 0; 
  left: 0; right: 0; //注意这个很棒的设置！可以自动占满整行 ヾ(o◕∀◕)ﾉ 
  height: 100px;
}
.left {
  position: absolute;
  left: 0;
  top: 100px; bottom: 50px;
  width:200px;
}
.right {
  position: absolute;
  left: 200px; right: 0;
  top: 100px; bottom: 50px; //这也是上下占满除了top和bottom之外的所有高度
  overflow: auto;//让主内容区可以滚动
}
.help-right {//假装有很多内容
  width: 1000px;
  height: 1000px;
}
.bottom{
  position: absolute;
  bottom: 0; 
  left: 0; right: 0;
  height: 50px;
}

动手写写才记得住

方法2.flex

  <div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right"><div class="help-right">right</div></div>
</div>
<div class="bottom">bottom</div>
</div>

  html, body, .parent {height: 100%; overflow: hidden;}
.parent {display: flex; flex-direction: column;}
.top { height: 100px; }
.middle {flex: 1; display: flex;}
.left { width:200px; }
.right { flex: 1; overflow: auto; }
.help-right { width: 1000px; height: 1000px; }
.bottom{ height: 50px; }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficie...

2.百分比定宽（%）+自适应

方法1.position ，方法2.flex ：

把原来的用px写的定宽改成百分比就可以了。是相对于body的高度和宽度来变化的。感觉top和bottom高度设置百分比不是很实用。

3.自适应+自适应

方法1.position

定宽的高度和宽度影响旁边栏的布局，所以实现不了 - 。-

方法2.flex

阔以实现，而且相当简单 ╮(╯▽╰)╭ 把刚刚设置了高度和宽度的地方去掉就可以了 ∑(っ °Д °;)っ

惊人的栗子

方法3.Grid

阔以实现，但是因为还是W3C的草案，所以会经常变化，不稳定，而且浏览器支持也不好。

响应式

想要达到的效果

只写一个网站，在多个终端显示，在小屏幕上会隐藏部分元素。

现在的情况

在PC端浏览器中可以正常访问的网站，到了手机上之后，内容就会变得特别小。
原因：所有的移动设备都有一个viewport（视窗），这个视窗不是手机屏幕大小，而是一个虚拟的窗口，比如iPhone4的viewport宽度为980px（如下图所示）。显示的时候再按照比例将这980px的内容压缩显示到实际的屏幕宽度中。

所以为防止让页面缩小，在移动设备中，我们会做如下设置

  <meta name="viewport" content="
 width=device-width //让宽度等于设备宽度，因为不同的移动设备宽度不同 iphone4为320px
 ,initial-scale=1.0 //初始缩放1.0， 即不缩放，网站就不会被缩小了
 ,user-scalable=no //防止用户手动缩放
">

设置结束之后，如何具体开发？

方法1.宽度尽量自适应，而不要用定宽。

方法2.用媒体查询 @media

  @media screen and (max-width: 320px) {
  //最大宽度为320px，即视窗宽度小于等于320px
  div{..}
  .class-name{...}
}

@media screen and (min-width: 320px) and (max-width: 769px){
  //最小宽度为320px，最大宽度为769px，即视窗宽度大于320px，小于769px
}

响应式

目的

减少卡顿
利于SEO
便于代码维护

方法

1. 减少页面请求

减少css文件请求

（1）多个css文件合并成一个
（2）少量css样式内联
（3）避免用import的方式引入css文件，因为每个import语句都会产生一个css请求，并且是同步的请求。

2.减少资源文件大小

（1）减少图片大小
选择合适的图片格式，小尺寸、半透明的用png，大尺寸、色彩绚丽用jpg（因为jpg会对图片进行压缩）
压缩图片

（2）css值缩写
margin，padding，border，font，border-radius等属性

（3）省略值为0 的单位

  margin: 0 10px;
line-height: .5;
background-position: 50% 0;

（4）颜色值最短表示

  red
rgb(0,0,0)
rgba(0,0,0,0)
#000000
#000

（5）css选择器合并

  .left, .right {...}

（6）文件压缩
用工具对文件进行自动压缩，去掉空格。

3.提升页面性能

加载顺序

css通常放在head中，而js通常放在body底部，因为js会阻碍其他资源加载。

减少标签数量。

选择器长度

  body .menu ul li a { ... } //太长了
.menu a { ... } //更好

避免耗性能属性

比如：

  expression
filter
border-radius
box-shadow
gradients

给图片设置固定宽高，并且图片实际宽高与设置宽高相同，否则浏览器会回流设置多次宽高

所有表现用css实现

4.通过规范提高代码可读性，可维护性

（1）规范：缩进，变量名等
（2）语义化：除了标签，css、id名最好也尽量有意义
（3）尽量避免Hack，一定要用也要统一的标识，比如IE7用*
（4）模块化：相关联的结构做成一个个模块，复用性更强
（5）添加注释

规范与模块化

规范

1.注释的文字两侧需加空格，防止因编码问题导致注释失效

2.为避免命名污染，可以给class加前缀，比如：

  g- 布局命名
m- 模块命名

3.语义化命名

  //结构化命名
top { ... }

//改用语义化命名
nav { ... }

4.属性的书写顺序

模块化

什么是模块化

一系列相关联的结构组成的整体

带有一定的语义，而非表现

比如，翻页器（或叫分页器paging）、轮播图。

怎么做？

为模块分类命名（如.m-, .md-）

以一个主选择器开头（模块根节点）

使用以主选择器开头的后代选择器（模块子节点）

  <div class="m-nav">
  <ul>
    <li class="z-crt"><a>链接</a></li>
    <li><a>链接</a></li>
  </ul>
</div>

  //根节点
.m-nav { ... }
//子节点
.m-nav ul{ ... }
.m-nav li{ ... }
.m-nav a{ ... }
.m-nav .z-crt a{ ... }/* 交互状态变化 */

若有一个模块只是比上述模块多了一个按钮，其余部分完全相同，怎么办？

怎样扩展？

为根节点加一个class就好了，这里我们加一个 m-nav-1。

  <div class="m-nav m-nav-1">
  <ul>
    <li class="z-crt"><a>链接</a></li>
    <li><a>链接</a></li>
  </ul>
  <a class="btn">我是新加的a标签</a>
</div>

  //变化的部分在 .m-nav-1 这个新class中写
.m-nav-1 { ... }
.m-nav-1 a{ ... }
.m-nav-1 .btn{ ... }

网易的规范和代码库

规范页：包含了CSS规范、HTML规范和工程师规范

代码库：包含了常用的布局方式、常见模块和元件的实现以及一些bug、技巧等

——————
教是最好的学。

css reset重置样式有那么重要吗？

Mon, 14 Sep 2015 21:02:19 CST

在以前写html代码的时候，一般都会在head里添加重置样式reset.css，其内容如下：

  @charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;

}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset, img {    border:0;}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style:normal;
    font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
    font-size:200%;
    font-weight:normal;
}
:focus { outline: 0;}
a{ text-decoration:none;}
a:hover img{ border:none;}

a:active{noOutline:expression(this.onFocus=this.blur());}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
 html .clearfix { height: 1%;}
.clearfix {display: block;}

*html img.png{
_background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");

}

但是最近在网上看了看网络文章，也感觉有些重置是没有用的。为什么呢？

重置的作用究竟是什么？

CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”！

有时候看到别人网站站的一些重置是这样的：

  *{ margin:0; padding:0; }

这样的写法是极不推荐的。
现在来看重置表发现：

div标签默认有 margin值吗？有 padding值吗？怎么会想到应用 div{margin:0; padding:0;}属性呢？答案肯定没有。
dt标签有默认的 margin与 padding值就是 0，什么还要使用呢？
li标签默认有 margin值吗？有 padding值吗？没有！
code标签是个属于 inline水平的元素，居然也扯到 margin与 padding的重置，没有必要。
fieldset, l egend这两个90年代的标签你的网站上使用了吗？使用概率不足1%的标签也拿来重置，也没必要。

css真的重置也就那么几个常用的标签而已，你的页面一般都用到什么标签？

  body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} 

 ol,ul{margin:0; padding:0;}

这样的CSS reset才是高效的，简洁的，其他一些标签都可以去掉的，没有必要。

当然css重置的优点，缺点都不说了，估计心里都非常有数的，还是要根据实际项目来。

后来主管给我推荐了一款替代 reset.css重置的替代方案，那就是用 Normalize.css。在后面文章里把它的用法等再列出来。

样式表的载入会延迟DOM载入事件

Sun, 15 May 2016 08:00:00 CST

绝大多数情况下我们总是让JavaScript在DOM载入后再开始执行。不管是直接用 DOM API 实现还是使用 jQuery，最终都是 DOMContentLoaded事件在起作用。本文讨论一个我们习以为常却很少了解的问题： 样式文件的载入会延迟脚本执行，以及 DOMContentLoaded事件的触发。

DOMContentLoaded事件

页面文档（DOM）完全加载并解析完毕之后，会触发 DOMContentLoaded事件， HTML文档不会等待样式文件，图片文件，Iframe页面的加载。但DOM树已被创建，多数JavaScript已经操作DOM并完成功能了。

This (DOMContentLoaded) event fires after the HTML code has been fully retrieved from the server, the complete DOM tree has been created and scripts have access to all elements via the DOM API. – molily.de

然而在绝大多数场景下，样式文件的载入会延迟 DOMContentLoaded事件的触发。其实这样的行为正是开发者所希望的，为什么呢？

事实上，老版本的IE中 DOMContentLoaded事件存在兼容性问题。参见：兼容所有浏览器的 DOM 载入事件。

浏览器为何延迟DOMContentLoaded

对于很多脚本而言，它们被编写时就希望在样式载入之后再开始执行。 JavaScript的作者往往会假设CSS规则已经生效，尤其是在进行一些显示相关的操作时，比如需要得到DOM元素的位置和大小的场景。

事实上，在多数浏览器中 DOMContentLoaded事件的触发会考虑到外部样式文件的载入，以及在HTML中脚本标签和样式标签的相对位置。如果脚本位于样式之后，浏览器通常会认为该脚本依赖于样式的渲染结果，也就更倾向于延迟脚本的执行（直到样式渲染结束）。

不同浏览器的行为

既然浏览器有时会延迟 DOMContentLoaded事件，但是何时会延迟 DOMContentLoaded事件，还取决于行内脚本还是外部脚本，以及脚本与样式标签的相对位置。不同的浏览器渲染引擎也有不同的行为。在 http://molily.de/domcontentloaded/一文中对该问题有详尽的阐述和测试，本文取其结论。

下表描述了各种情况下脚本是否会被延迟执行，进而延迟触发 DOMContentLoaded事件。

渲染引擎	样式表之前的脚本	样式表之后的外部脚本	样式表之后的行内脚本
Presto (Opera)	否	否	否
Webkit (Safari, Chrome)	否	是	否
Gecko (Firefox)	否	是	是
Trident (MSIE)		是	是

HTML5标准及最佳实践

其实 DOMContentLoaded是Firefox中最先提出的，此后JavaScript社区发现它确实比 load事件（要求所有资源完全载入）更好，于是Apple和Opera相继开始支持该事件。但不同浏览器的实现方式有所区别，于是产生了上表所示的复杂情况。

在HTML5标准中情况有所好转： DOMContentLoaded是一个纯DOM事件，与样式表无关。与此同时，HTML5要求：

脚本执行前，出现在当前 <script>之前的 <link rel="stylesheet">必须完全载入。
脚本执行会阻塞DOM解析。

这样的话，假如脚本和样式一起放在HTML <head>中， DOM解析到 <script>标签时会阻塞DOM解析，开始如下操作：

获取当前 <script>的脚本文件；
获取并载入前面的所有 <link rel="stylesheet">。
执行当前脚本文件。

这些操作完成之后才能继续进行DOM解析，解析完毕时再触发 DOMContentLoaded事件。如果将样式和脚本都放到 <head>中，会使浏览器在渲染 <body>前载入并执行所有样式和脚本。页面的显示延迟会很高，多数情况下用户体验都很糟糕。因此在HTML5标准的HTML页面中，最佳实践应当是： 所有样式放在 <head>中；所有脚本放在 <body>最后。

jQuery文档中也推荐这样的实践方式。

参考阅读

MDN load 事件： https://developer.mozilla.org/en-US/docs/Web/Events/load
MDN DOMContentLoaded事件： https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded

玩转HTML5移动APP页面（优化篇）

Tue, 28 Apr 2015 12:10:42 CST

承接上文《玩转HTML5移动APP页面（动效篇）》，上次说的是让页面动起来的一些小技巧。
而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏。

====前方高能====

（1）动画雪碧图

涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！
网上的工具有一些可以帮助你生成雪碧图的工具，例如 CssGaga， GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。
特别地，如果单张雪碧图面积实在太大，可以拆分雪碧图，例如拆分成2-4张，因为现代浏览器都支持4-6个同源请求下载，若资源实在太多，也可以考虑把静态资源放在不同源域名下去请求，这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好，当然，这需要具体情况去衡量。

顺便提一下，我写动画的一个小技巧是把每一页的动画分在一个import.css里面，然后最后在主样式中import进去，这样方便调试动画，也容易维护，例如：

//style.css
@import url("reset.import.css");
@import url("loading.import.css");
@import url("m-animate-1.import.css");
@import url("m-animate-2.import.css");
@import url("m-animate-3.import.css");

当然，import不是原生支持的，这里需要一些流程化工具让import的页面在输出之前经过组装-压缩的步骤。

（2）图片压缩

图片压缩是老生常谈，但是仍然有不少人忘记压缩，那可是活生生的带宽和流量的浪费啊…

压缩图片需要有好工具，有智图， TinyPNG， JPEGmini等等。

依靠工具外，还有以下方式可以优化图片：

1.尽量避免用PNG24。如果图片色彩要求不高，请使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到来，在不用考虑兼容的情况下请大胆尝试；
3.用SVG和ICONFONT代替简单的图标；
4.用FUFU的字蛛来代替艺术字体切图。

（3）多终端兼容

多终端兼容是一切的根基，要知道有人拿着肾6+，有人拿着肾4，大则414×736，小则320×416（IPHONE4在SAFARI保留上下端导航），因此多终端兼容是十分必要的。
曾经有一种派系为320派系，就是大部分页面都是320宽度，因此干脆直接用320的容器来包一切页面，那样也简单，然而IPHOEN6和IPHONE6+的出现简直是灭了这个派系。

那么到底要如何兼容呢？
这里我分了三个时期来说说：
A.设计初期。先审视设计稿，因为320派系的原因，大部分设计稿只考虑到IPHONE5来设计，因此很多背景元素是只有320px宽度（页面实际渲染宽度），例如下图。

那么，这时候就需要设计提供一个较长的延伸背景了，最好是可以重复的，用background-repeat可以减少图片大小。

B.设计中期。也就是具体的兼容方法，可以使用CSS3 Media Query和类覆盖。

1.CSS3 Media Query，按范围兼容机型。

/*iphone6*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.page6 .ele-building{top: 69px;}
.page6 .ele-runner{top: 100px;}
.page6 .ele-pophome{top: 16px;}
}

2.类覆盖，这种方式适合直接为小屏或大屏做整体兼容。
首先，为小屏（大屏）加一个识别类，这里小于420表示为小屏幕（IPHONE4有上下导航栏）：

var bh = $(window).height();
// 480 - 64 = 416 iphone4
if(bh&lt;420){
$('body').addClass('low-screen');
}

然后，对应识别类加上要变动的元素覆盖，例如：

.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;}

C.设计后期。这是最后一步，整体检查和体验，这里面会暴露一些问题，例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了，可以来最后大招解决：

1.大屏适当用zoom:(倍率)或者transform:scale(倍率)来增大元素，实测失真根本看不出来，设计师也满意（毕竟不用多做一张图！）；
2.小屏适当去掉一些元素，例如一些翻页提示，一些多余图标，可以让优雅降级，把它们 display:none掉。

有以上几步，基本就能兼容大部分机器了。兼容一直是个苦活，但是这是前端必修课，多练就会发觉其实也没有那么难嘛。

（4）交互提示

前面说了，加了音效就要加上音乐切换开关的按钮，不然会被用户骂死。还有其他，例如如果你的页面不能兼容横屏，请监听横屏状态，然后加上适当的横屏提示。

例如：

// 横屏监听
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('为了更好的体验，请将手机/平板竖过来！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('竖屏状态');
}
};
window.onorientationchange = updateOrientation;

提示越多，界面越友好，有时候设计师会漏掉一些可能出现的页面情况。
作为有态度的前端，请好好把关，让用户有好的体验。

（5）分享接口

H5做好了，要传播分享才能展示你的牛逼轰轰。
然而分享其实是个坑，分享到微信、手Q等都有各种问题。

A.微信

旧微信会使用WeixinJSBridge来声明分享的缩略图、标题、正文等，比较方便。例如：

而最新的微信提供了新的微信SDK，需要在公众账号绑定所属域名之后调用SDK作分享，可以说分享功能会更加强大，坑也会更加少。

B.手Q

手Q支持声明meta标签的的分享方式，例如：

而若在qq.com域名下也支持api的定义方式。

C.一般化分享

在默认兼容旧版微信、手Q或者各种浏览器，平台，可以用这样的方法：
写h1做标题，p做内容，img做缩略图，只需要把h1隐藏掉就好，这里的缩略图最好要大于200x200px。

例如：

当然，这样也有利于搜索引擎拉取信息。

分享的坑还有更多，例如不同浏览器例如QQ浏览器、Chrome也会有自己的默认拉取方式（部分截图作缩略图），需要多加测试优化。

（5）SEO搜索引擎优化

SEO（搜索引擎优化）的基本做法是把页面结构写好，这包括：

1.定义精确的网页标题。你的标题应该有概括性，能明确告知搜索引擎和用户你的网站大概内容和目的，可以是当前页面标题-所属类型-产品名，例如“全民来猜歌-年费黄钻-QQ空间”。

2.针对页面内容补充description和keywords的meta标签。你需要简短总结页面的主要目标，然后补充description，以及根据关键词补充keywords。

3.优化你的超链接和图片。包括优化超链接显示的文本，要具有语义性也要跟超链接的网页具有相关性，例如“空间主页”就不要链接到“www.qq.com”。同时，要补充”title”和”alt”属性，例如“<img src=’images/apple.jpg’ title=’苹果示例图’ alt=’苹果示例图’ />”。

4.建立良好的网站导航和sitemap。网站需要有一个良好的导航，控制根目录和各子目录的关键，通过sitemap可以帮助网站主了解网站结构，也方便搜索引擎收录整个站点。

5.优化目录结构和URL。你的URL应该有语义性，简短易懂，例如http://www.apple.com/macbook-air/，而且每一层级都要有它对应的页面展示以及语义。

6.善用h1-h6的标题结构树。合理的标题可以强调文字，也能让搜索引擎更加了解到各标题的重要性，因此建立良好的标题树十分有意义。

7.不断致力于提供优质的内容。社交化分享是网站曝光最快的因素，因此不断提供了优质原创内容才能真正提高你的网站曝光权重。

（6）无障碍

无障碍的普及是一件好事，这让互联网真正地为所有人可用。因此我们也应该为之而努力，无障碍的根基是你页面强壮的语义性和结构性，具体可以参考《腾讯网无障碍说明》了解无障碍的优化手段。

最后，罗嗦了这么多，只是我自己的一些小经验，请轻拍砖，多交流。

腾讯ISUX ( http://isux.tencent.com/play-with-html5-optimize.html)

CSS > 选择器优先级与效率优化

Fri, 07 Aug 2015 17:18:29 CST

CSS选择器优先级与效率优化

Date: 7th of Aug, 2015

Author: HaoyCn

本文收集网上各处关于CSS选择器的文章总结，并自己归纳一篇。

各类选择器的优先级

important声明 1,0,0,0
ID选择器 0,1,0,0
类选择器 0,0,1,0
伪类选择器 0,0,1,0
属性选择器 0,0,1,0
标签选择器 0,0,0,1
伪元素选择器 0,0,0,1
通配符选择器 0,0,0,0

在上面的选择器中，此外，经测试

属性选择器 = 伪类选择器(应用最后一个)

  :last-child{color:red;}
[desc]{color:green;}

伪类选择器 > 相邻选择器

  :last-child{color:green;}
p ~ p{color:blue;}

相邻选择器 = 子选择器 = 后代选择器(应用最后一个)

  p~p{color:red;}
body p{color:blue;}
body > p{color:green;}

后代选择器 > 标签选择器

  p ~ p{color:blue;}
p{color:green;}

样式位置的影响

<style></style> 同 <link /> 同级，应用取决于 <style>标签和 <link /> 标签的先后顺序
元素 style=""属性的优先级高于以上两种样式
!important 优先级高于以上两种样式

备注

!important 在IE6中的BUG：在同一组CSS属性中, !important不起作用。如：

  #selector{color:blue !important;color:green;}

选择器效率

读取选择器的原则是从右到左。因此，我们书写的右边的最后一个选择器，被称作关键选择器，对于效率有决定性影响。

以下效率排行由 @Steve Souders 提供。

ID选择器
类选择器
标签选择器
相邻选择器
子选择器
后代选择器
通配符选择器
属性选择器
伪类选择器

优先级高的不一定效率高

举个例子： #id .class 与 div#id p.class

前者效率高于后者，而后者优先级高于前者。我们需要在效率与优先级之间平衡取舍。

优化建议

以下网址提供了诸多建议：

扼要摘其精要总结如下：

避免使用通配符
不使用标签名或类名修饰ID规则：如果规则使用ID选择器作为关键选择器，不要给规则添加标签名。因为ID本身就是唯一的，添加标签名会不必要地降低匹配效率。
不使用标签名修饰类：相较于标签，类更具独特性。
尽量选择最具体的方式：造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式，可以减少规则去匹配标签的时间。
关于后代选择器和子选择器：避免使用后代选择器，非要用的话建议用子选择器代替，但子选择器也要慎用，标签规则永远不要包含子选择器。
利用可继承性：没必要在一般内容上声明样式。

HTML head 头标签

Sat, 17 Jan 2015 08:16:40 CST

标签： head

HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD，名称格式为 注册//组织//类型标签//语言, 注册指组织是否由国际标准化组织(ISO)注册， +表示是， -表示不是。 组织即组织名称，如：W3C。 类型一般是 DTD。 标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后 语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。

HTML 4.01 strict

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

最新 HTML5 推出更加简洁的书写，它向前向后兼容，推荐使用。
```
     <!doctype html>
```

在 HTML中 doctype 有两个主要目的。

对文档进行有效性验证。

它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。

决定浏览器的呈现模式

对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。
- 非怪异（标准）模式
- 怪异模式
- 部分怪异（近乎标准）模式关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE 标签，可详细阅读模式？标准！的内容。

charset

声明文档使用的字符编码，

   <metacharset="utf-8">

html5 之前网页中会这样写：

   <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

这两个是等效的，具体可移步阅读： <meta charset='utf-8'> vs <meta http-equiv='Content-Type'>，所以建议使用较短的，易于记忆。

lang属性

简体中文

   <htmllang="zh-cmn-Hans">

繁体中文

   <htmllang="zh-cmn-Hant">

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢，请移步阅读: 页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"。

优先使用 IE 最新版本和 Chrome

   <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>

360 使用Google Chrome Frame

   <metaname="renderer"content="webkit">

360 浏览器就会在读取到这个标签后，立即切换对应的极速核。另外为了保险起见再加入

   <metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。

相关链接：浏览器内核控制 Meta 标签说明文档

百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加

   <metahttp-equiv="Cache-Control"content="no-siteapp"/>

SEO 优化部分

页面标题 <title>标签(head 头部必须)
```
     <title>your title</title>
```

页面关键词 keywords

     <meta name="keywords" content="your keywords">

页面描述内容 description

     <meta name="description" content="your description">

定义网页作者 author

     <meta name="author" content="author,email address">

定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
```
     <meta name="robots" content="index,follow">
```

相关链接： WEB1038 - 标记包含无效的值

viewport

viewport 可以让布局在移动浏览器上显示的更好。通常会写

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边( http://bigc.at/ios-webapp-viewport-meta.orz)

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
```
     <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
```

而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。

   <metaname="viewport"content="width=device-width,user-scalable=yes">

相关链接：非响应式设计的viewport

适配 iPhone 6 和 iPhone 6plus 则需要写：

<metaname="viewport"content="width=375">

<metaname="viewport"content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

ios 设备

添加到主屏后的标题（iOS 6 新增）

<metaname="apple-mobile-web-app-title"content="标题">

是否启用 WebApp 全屏模式

<metaname="apple-mobile-web-app-capable"content="yes"/>

设置状态栏的背景颜色

<metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/>

只有在 "apple-mobile-web-app-capable" content="yes" 时生效

content 参数：

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

<metaname="format-detection"content="telephone=no"/>

iOS 图标

rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有

<linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/>

iPad，72x72 像素，可以没有，但推荐有

<linkrel="apple-touch-icon-precomposed"sizes="72x72"href="/apple-touch-icon-72x72-precomposed.png"/>

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

<linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>

Retina iPad，144x144 像素，可以没有，但推荐有

<linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>

IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。适配iPhone 6 plus，则需要在中加上这段

   <linkrel="apple-touch-icon-precomposed"sizes="180x180"href="retinahd_icon.png">

iOS 启动画面

官方文档： https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章： http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004（标准分辨率）

<linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>

iPad 竖屏 1536x2008（Retina）

<linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/>

iPad 横屏 1024x748（标准分辨率）

<linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>

iPad 横屏 2048x1496（Retina）

<linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/>

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

<linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>

iPhone/iPod Touch 竖屏 640x960 (Retina)

<linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

<linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/>

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<metaname="apple-itunes-app"content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。

<linkrel="apple-touch-startup-image"href="launch6.png"media="(device-width: 375px)">

<linkrel="apple-touch-startup-image"href="launch6plus.png"media="(device-width: 414px)">

Windows 8

Windows 8 磁贴颜色

<metaname="msapplication-TileColor"content="#000"/>

Windows 8 磁贴图标

<metaname="msapplication-TileImage"content="icon.png"/>

rss订阅

<linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/>

favicon icon

<linkrel="shortcut icon"type="image/ico"href="/favicon.ico"/>

比较详细的 favicon 介绍可参考 https://github.com/audreyr/favicon-cheat-sheet

移动端的meta

<metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"/>

<metaname="apple-mobile-web-app-capable"content="yes"/>

<metaname="apple-mobile-web-app-status-bar-style"content="black"/>

<metaname="format-detection"content="telephone=no, email=no"/><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"/>

<metaname="apple-mobile-web-app-capable"content="yes"/>

<metaname="apple-mobile-web-app-status-bar-style"content="black"/>

<metaname="format-detection"content="telphone=no, email=no"/>

<metaname="renderer"content="webkit">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="HandheldFriendly"content="true">

<metaname="MobileOptimized"content="320">

<metaname="screen-orientation"content="portrait">

<metaname="x5-orientation"content="portrait">

<metaname="full-screen"content="yes">

<metaname="x5-fullscreen"content="true">

<metaname="browsermode"content="application">

<metaname="x5-page-mode"content="app">

<metaname="msapplication-tap-highlight"content="no">

这是来自 toobug 的分享总结。

更多的 meta 标签参考

参考文章：

您可能还对下面的文章感兴趣：

移动前端不得不了解的html5 head 头标签 [2015-01-11 23:23:12]

几个前端UI框架的的比较

Wed, 11 Feb 2015 11:14:40 CST

首先是在问答里面看到了一个问题：
CSS框架 ui 有哪些啊（ http://segmentfault.com/q/1010000002547926）

刚开始接触HTML刚开始接触JS我也不懂就看了下- 正好我也在考虑怎么用HTML来搭我的APP UI。作为初学者，我发现Amaze UI是中文的，觉得对初学者看起来会更简单 - 尤其对HTML CSS等一窍不通，很快有人推荐了Ratchet，看了下感觉用来做手机APP确实很简单的样子.. 开始纠结了.. 跟公司大神讨教了下什么是UI框架以及一些主流的框架区别优劣势，以及我们一些项目上使用的内容后，大神总结出了以下内容，受益匪浅 - 作为答案有点长，以博文形式发出来供大家一起探讨下：

------- 以下分割线 --------
IoTgo 用的是 Bootstrap（ http://getbootstrap.com），原先是 Twitter 内部的一个 CSS 框架，后来开源放到 Github 上，成了 Github 上最热门的项目。Bootstrap 在 3.0 版本之前，都是以桌面优先，在 3.0 版本后，采用移动优先，即很好的支持移动平台，然后才考虑更好的支持桌面。所以 Bootstrap 对手机的支持也很好。

Foundation（foundation.zurb.com）是设计公司 zurb.com 推出的开源 CSS 框架，在 CSS 框架领域是目前唯一能跟 Bootstrap 的竞争的项目。Foundation 的可定制性更好一些（因为是设计公司的产品，要应对各种客户需求），但入手难度也高一些。对于很多 Web 项目开发者而言，他们需要的就是一套简单快捷的 UI，对其美观性、可定制性要求不是太高，所以目前相对来讲 Foundation 没有 Bootstrap 热门。

答案中推荐的Ratchet如何：
Ratchet 之前也是 Twitter 内部的一个 CSS 框架，后来也是开源到 Github 上，目前是作为 Bootstrap 的子项目存在（ http://blog.getbootstrap.com/2014/04/02/ratchet-2-0-2-released/），开发 Ratchet 和 Bootstrap 的基本就是同一拨人。Ratchet 一开始就以移动为先，预先提供了很多移动平台的常见 UI 工具，比如底部 Tab 标签栏、顶部标题及后退按钮、滑动的侧边栏等等——Bootstrap 也有，只是很多以插件形式存在，又或者需要自己做一些修改，不像 Ratchet 默认就有。

如果是做一个小项目，而且只以手机 App 的形式存在，可以考虑先用 Ratchet，如果同时兼容桌面，Bootstrap 更好一些。而且 Bootstrap 更新的速度更快，马上 4.0 版本就要出来了，有很多针对移动平台优化的特性，而 Ratchet 已经快一年没更新了。

另外，目前的移动 CSS 框架（或者更合适的说，UI 框架），还有 Facebook 的 React（ http://facebook.github.io/react/），Google 的 Angular Material（ https://material.angularjs.org），Telerik 的 Kendo UI(www.telerik.com/kendo-ui)，还有预先捆绑了 Cordova 的 Ionic Framework（ionicframework.com）等等。大家的评价大致是：

React：性能很好，因为采用了 Virtual DOM，但没有默认支持 2 way data binding（双向数据绑定），程序员需要自己做更多的工作来通过 UI 获取用户的输入
Angular Material：前景非常好，只是目前处于 pre-release 阶段（代码兼容性和稳定性都不是很好）。Angular目前几乎已经是前台 MVC 框架的事实标准（大约 70% 以上的占有率，其他的还有 Ember、Meteor、Backbone等等），Angular Material 基于 Google Material Design 开发，默认支持 Angular，因而在 UI的美观型和开发效率上都比较好。但性能是个问题，解决性能问题，需要程序员自己对代码做优化
Kendo UI：非常完备的 UI 框架，但是是商业版（前段时间将部分核心模块开源了）。开发商业 Web 或移动产品的企业更倾向Kendo UI 一些，因为可以得到很好的技术支持（当然要花钱）。Angular 热门知会，Telerik 也升级了 Kendo UI，使其能够较好的跟 Angular 交互——Kendo UI 是 UI，Angular 是前台代码逻辑
Ionic Framework：目前非常热门，因为他在 Angular 的基础上开发了支持移动平台的 UI Widget（UI组件）。Ionic Framework 搭好了整套移动开发环境（指的是 App 开发，不是网站移动版）、UI 套件、JS框架（Angular），因而在 2014 年获得巨大的社区反响。被誉为最有前景的移动开发框架（不仅仅是 UI 了）。

我个人对 Angular 比较热衷，所以都会选择能够很好跟 Angular 交互的 CSS/UI 框架——一般来说，如果是纯 CSS 框架，那么跟任一一个 MVC 框架（比如 Angular、Ember）都可以很好的配合；如果是 UI 框架，可能会有一些冲突。

之前我们的智能开关手机 App 是基于 Ionic Framework 来开发的，后来切换到 Angular Material。一个是 Ionic Framework 虽然入手简单，但出现 Bug 我搞不清楚该怎么修改（需要花时间研究 Ionic Framework 的内部工作机制），二是我认为 Material Design 会成为 UI 设计的主流思想，Angular Material 会很快成熟起来。

可视化格式模型（ Visual formatting model）再学习

Thu, 16 Apr 2015 11:41:33 CST

“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它。

场景： DEMO

元素A，C绝对定位，不设置top，bottom值；
元素B处于常规流中；

问题：为什么元素C的位置受元素B的影响，跟随在元素B的下方？

为了解决这个问题，我重新学习了CSS 2.1规范中的 9 Visual formatting model和 10 Visual formatting model details。

这两章讲解了可视化格式模型：用户代理在视觉媒体上如何处理文档树。在可视化格式模型中，文档树中的每个元素根据框模型（box modal）生成0或多个框。这些框的布局由以下因素决定：

框尺寸和类型
定位方案（常规流、浮动和绝对定位）
文档树中元素之间的关系
外部信息（比如viewport尺寸、图像的固有尺寸等）

9.1.2 Containing blocks（包含块）

CSS 2.1中，许多框的位置和尺寸的计算是相对于一个矩形框的边缘，这个矩形框称为 包含块。通常情况下，生成框是后代框的包含块（generated boxes act as containing blocks for descendant boxes;），称之为一个框为其后代创建了包含块。短语“一个框的包含块”指的是“这个框存在其中的包含块”，而非它生成的框。

每个框会相对于其包含块赋予位置，但它并不囿于包含块，可能会溢出（overflow）。包含块的尺寸计算细节在第10章有详细介绍。

9.2 Controlling box generation（控制框生成）

本节描述了CSS 2.1中可生成的框类型。一个框的类型部分地影响其在可视化格式模型中的行为。

9.2.1 Block-level elements and block boxes

处在块格式化环境（BFC，block formatting context）中的框称之为 块级框（block-level box）。每个块级元素生成一个包含后代框和生成的内容的主体块级框，同时这个框与定位方案密切相关。有些块级元素除了生成主体框外，还会生成一个附加框，如’list-item’元素。附加框相对于主体框定位。

表框（table boxes）和替换元素（replaced elements）外，块级框同时也是 块容器框（block container box）。块容器框要么仅包含块级框，要么建立一个行内格式化环境（IFC，inline formatting context），即仅包含行内级框。并非所有的块容器框都是块级框：非替换行内块（inline blocks）和非替换表格单元格都是块容器，但不是块级框。既是块级框也是块容器的框称为 块框（block box）。

“块级框”、“块容器框”和“块框”这三个术语有时被简称为 块（block）。

9.2.3 Run-in boxes（插入型框）

CSS Level 3的 CSS basic box model中定义。

run-in框的行为如下：

如果run-in框包含一个块框，那么run-in框变为块框。
如果run-in框的后继兄弟元素为块框（非浮动，非绝对定位），那么run-in框变为该块框的第一个行内框。run-in不能插入本身为run-in的块中，也不能插入块中已有run-in的块中。
否则，run-in框变为块框。

浏览器支持：IE8+，chrome（不支持，难道是太鸡肋？）

DEMO(IE下查看)

9.3.2 Box offsets: ‘top’, ‘right’, ‘bottom’, ‘left’

（绝对、固定）定位元素会生成一个定位框（positioned box），根据top，right，bottom，left布局。
初始值为 auto，非0。（文章开头的问题中未设置四值，等同设置为auto √）
对于绝对定位元素，四值指定的是元素margin边与包含块的边之间的偏移量。对于相对定位元素，四值指定的是相对于自身框边的偏移量。

9.6 Absolute positioning

从常规流中完全抽离，对其后继兄弟元素无影响。
固定定位是绝对定位的特例，它的包含块是viewport。

9.7 Relationships between ‘display’, ‘position’, and ‘float’

这三个属性影响了框的生成和布局，相互影响如下：

如果’display’值为’none’，同时不设置’position’和’float’，那么该元素不生成框。
否则，如果’positon’值为’absolute’或’fixed’，即框为绝对定位，’float’的计算值为’none’，并且’display’根据下表设置。那么该框的位置由’top’,’right’,’bottom’,’left’和框的包含块决定。
否则，如果’float’的值不为’none’，那么该框会浮动，’display’根据下表设置。
否则，如果该元素为根元素，’display’根据下表设置。
否则，剩余的’display’属性值与指定值相同。

指定值	计算值
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

10.6 Calculating heights and margins（高度和margin值计算）

10.6.4 Absolutely positioned, non-replaced elements（绝对定位的非替换元素）

静态位置（static position），粗略地讲是指一个元素在常规流中的位置。精确地讲，一个元素的静态top值，是指包含块顶部边沿与该元素的假想框的顶部margin边沿之间的距离。 假想框是指如果该元素的’position’值为’static’，以及’float’值为’non’且’clear’值为’none’时，该元素的第一个框。

对于绝对定位的元素，垂直尺寸的使用值必须满足下面约束：

‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = height of containing block

如果’top’，’bottom’，’height’值均为auto，那么’top’值为元素的静态位置。（这也就回答了文章开头的问题 √）

如果三个值均不为auto，那么：

如果’margin-top’和’margin-bottom’值均为’auto’，那么假定margin-top和margin-bottom两值相等，然后再解上面方程式。（可以利用这点实现垂直居中的效果，查看DEMO √）
如果’margin-top’和’margin-bottom’值中其一为’auto’，解上面方程式获取该margin值。
如果数值超过限制，忽略’bottom’值，解方程式获取该值。

否则，从以下六种规则中挑选适用情况：

‘top’和’height’为’auto’，’bottom’不为’auto’，那么’height’基于其内容根据 10.6.7规则计算，’margin-top’值设为’auto’，’margin-bottom’值设为0，解方程式得’top’值。
‘top’和’bottom’为’auto’，’height’不为’auto’，那么设置’top’值为其静态位置，’margin-top’值设为’auto’，’margin-bottom’值设为0，解方程式得’bottom’值。
‘bottom’和’height’为’auto’，’top’不为’auto’，那么’height’基于其内容根据 10.6.7规则计算，’margin-top’值设为’auto’，’margin-bottom’值设为0，解方程式得’bottom’值。
‘top’值为’auto’，’bottom’和’height’不为’auto’，那么’margin-top’值设为’auto’，’margin-bottom’值设为0，解方程式得’top’值。
‘height’值为’auto’，’bottom’和’top’不为’auto’，那么’margin-top’值设为’auto’，’margin-bottom’值设为0，解方程式得’height’值。
‘bottom’值为’auto’，’height’和’top’不为’auto’，那么’margin-top’值设为’auto’，’margin-bottom’值设为0，解方程式得’bottom’值。

JS 和 CSS 的位置对其他资源加载顺序的影响

Mon, 29 Dec 2014 10:24:05 CST

克军做了一系列测试： js和css的顺序关系，给出了现象和结论，但未给出原因。

JS 和 CSS 在页面中的位置，会影响其他资源（指 img 等非 js 和 css 资源）的加载顺序，究其原因，有三个值得注意的点：

JS 有可能会修改 DOM.典型的，可能会有 document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
JS 的执行有可能依赖最新样式。比如，可能会有 var width = $('#id').width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
现代浏览器很聪明，会进行 prefetch 优化。性能是如此重要，现代浏览器在竞争中，在 UI update 线程之外，还会开启另一个线程，对后续 JS 和 CSS 提前下载（注意，仅提前下载，并不执行）。有了 prefetch 优化，这意味着，在不存在任何阻塞的情况下，理论上 JS 和 CSS 的下载时机都非常优先，和位置无关。

以上三点可简述为三条基本定律：

定律一：资源是否下载依赖 JS 执行结果。
定律二：JS 执行依赖 CSS 最新渲染。
定律三：现代浏览器存在 prefetch 优化。

有了这三条定律，再来看克军的测试，就很清晰了：

a,b – head里出现外联js，无论如何放，css文件都不能和body里的请求并行

根据定律一和定律三，可以知道上面的结论不够正确。比如：

  <head>
<link rel="stylesheet" href="mock.php?css1&sleep=2">
<script src="mock.php?js&sleep=3"></script>
<link rel="stylesheet" href="mock.php?css2&sleep=4">
</head>
<body>
<link rel="stylesheet" href="mock.php?css3&sleep=5">
<img src="test.gif">
</body>

在 Chrome 下的瀑布图是：

黄色条是 js 的，可以看出 img 的延时下载是由定律一决定的。

定律三则决定了所有 js/css 都是并行开始下载的。在 Firefox 10 下，prefetch 非常强悍，对 img 也会预加载，瀑布图如下：

调整一下 sleep 时间，还可以观察到定律二的威力：

  <head>
<link rel="stylesheet" href="mock.php?css1&sleep=3"> <!-- 修改 sleep 值，使其大于 js 的 -->
<script src="mock.php?js&sleep=2"></script>
<link rel="stylesheet" href="mock.php?css2&sleep=4">
</head>
<body>
<link rel="stylesheet" href="mock.php?css3&sleep=5">
<img src="test.gif">
</body>

瀑布图立刻发生了变化：

因为定律一，决定 img 的下载在 js 执行后。又因为定律二，决定 js 的执行在第一个 css 后。于是最后在瀑布图上体现出来，就是 img 的下载在第一个 css 后。

再来看克军的第二个结论：

c – head里的内联js只要在所有外联css前面，css文件可以和body里的请求并行（图2）

d – head里的内联js只要在任一外联css后面，css文件就不能和body里的请求并行（图1）

这个是定律二的威力。结论 c 是正确的，因为没有 css 会影响 js 的执行。结论 d 则不够正确。img 等其他资源，会在 js 前面的 css 下载完成后，以及 js 执行后，立刻开始下载。与头部中，js 位置之后的 css 没关系。

克军的其他结论都是对的，不多说。

注意1：Firefox 10 的 prefetch 有点奇怪，有时会对 img 进行 prefetch，有时则不会。有兴趣的可以进一步寻找规律。

注意2：上面的三个定律，是黑盒猜测，有兴趣的可以去阅读浏览器的源码，应该能找到更深层次的原因。

注意3：本文没有考虑 defer, async 属性的影响，这是另一个故事。

浏览器在迅速发展，很多总结，特别是书籍上的，很难与时俱进。大家应该像克军学习，多测试，多发现，这样得来的知识，才不会过时。这篇博客的总结，也肯定在未来甚至就在现在，已经存在错误。这些都无所谓，关键是 要懂得测试的方法和分析的思路，有了“渔”，才能更好地探求和拥有“鱼”。

转自岁月如歌

来，让我们谈一谈Normalize.css

Thu, 20 Nov 2014 20:57:35 CST

本文译自 http://nicolasgallagher.com/about-normalize-css/
最初发布于我的博客： http://jerryzou.com/posts/aboutNormalizeCss/

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset， Normalize.css是一种现代的、为HTML5准备的优质替代方案。 Normalize.css现在已经被用于 Twitter Bootstrap、 HTML5 Boilerplate、 GOV.UK、 Rdio、 CSS Tricks 以及许许多多其他框架、工具和网站上。

综述

Normalize.css是一种 CSS reset的替代方案。经过 @necolas和 @jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

我们创造 normalize.css有下面这几个目的：

保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

Normalize vs Reset

知道 Normalize.css和传统 Reset的区别是非常有价值的。

1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下， Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时， Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。这往往超出了 Reset所能做到的范畴。关于这一点， Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的 font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

可以看以下这个例子，看看对于HTML5中新出现的 input类型 search， Normalize.css是如何保证跨浏览器的一致性的。

  /**
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

3. Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在 Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在 Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

如何使用 normalize.css

首先，安装或从Github 下载Normalize.css，接下来有两种主要途径去使用它。

策略一：将 normalize.css作为你自己项目的基础CSS，自定义样式值以满足设计师的需求。
策略二：引入 normalize.css源码并在此基础上构建，在必要的时候用你自己写的CSS覆盖默认值。

结语

无论从适用范畴还是实施上， Normalize.css与 Reset都有极大的不同。尝试一下这两种方法并看看到底哪种更适合你的开发偏好是非常值得的。这个项目在Github上以开源的形式开发。任何人都能够提交问题报告或者提交补丁。整个项目发展的过程对所有人都是可见的，而每一次改动的原因也都写在commit信息中，这些都是有迹可循的。

未来必热：SVG Sprite技术介绍

Thu, 10 Jul 2014 18:03:31 CST

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=4264

一、Sprite技术

这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。

另，本文图片甚多，爪机党继续浏览需慎重。

二、SVG Sprite与symbol元素

目前，SVG Sprite最佳实践是使用 symbol元素。 symbol元素是什么呢？单纯翻译的话，是“符号”的意思。然，这个释义并不符合这里的场景。不知大家有没有用过Flash， symbol实际上就类似于Flash中的“影片剪辑”、或者“元件”。

因此，我个人觉得， symbol应该解释为“元件”最为恰当！

那， symbol和SVG Sprite又有什么关系呢？

我们可以把SVG元素看成一个舞台，而 symbol则是舞台上一个一个组装好的元件，这这些一个一个的元件就是我们即将使用的一个一个SVG图标。

于是，对于一个集合了三个SVG图标的SVG元素的代码结构会是这样：

<svg>
    <symbol>
        <!-- 第1个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第2个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第3个图标路径形状之类代码 -->
    </symbol>
</svg>

每一个 symbol就是一个图标元件，但是，只有上面的代码，是无法呈现类似下面的效果的：

为何？

因为，舞台上只是放置了图标，如果你不使用(use)，是看不见的。就好比你女朋友买了几箱的衣服放家里，如果不穿出去，谁知道她这么土豪呢？

因此，还差一个“使用”，也就是SVG中的 <use>元素。

三、SVG中的use元素

use元素是SVG中非常强大，非常重要的一个元素，尤其在Web开发中，为何？

两点：

可重复调用；
跨SVG调用；

1. 可重复调用
你好不容易，用了几十个坐标值，好不容易绘制了一个图形，如果你想再弄一个同样造型，但位置不同的图形出来，你会怎么办？——再复制一遍代码？别说笑了，（如果真那样）SVG文件的尺寸赶得上二师兄的腰围了。

使用 <use>元素就可以，看下面的板栗：

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

结果是（IE9+浏览器可见）：

首先，注意到没有， use元素是通过 xlink:href属性，寻找要使用的元素的。 #shape对应的就是 id为 shape的元素。 use元素可以有自己的坐标，以及支持 transform变换，甚至可以use其他 use元素。

这里，两个 use元素使用的是同一个 g元素（组合），从而实现了图形的重复调用功能。

2. 跨SVG调用
SVG中的 use元素可以调用其他SVG文件的元素，只要在一个文档中。

紧接着上面的板栗：

<svg width="500" height="110"><use xlink:href="#shape" x="50" y="50" /></svg>

结果仍是那个图形：

而这个 跨SVG调用就是“SVG Sprite技术”的核心所在。

试想下，我们只要在页面某处载入一个充满Sprite( symbol)的SVG文件（或直接 include SVG代码），于是，在页面的任何角落，只要想使用这个图标，只要简单这一点代码就可以了：

<svg class="size"><use xlink:href="#target" /></svg>

图标尺寸CSS控制，里面只有一个仅有 xlink:href属性的 use元素，Done! 完成！

也即是说，在HTML层面，图标使用的代码成本，跟传统的CSS Sprite或者流行的 font-face几乎无异，代码简洁，而且很好维护。所有的SVG图标都在一个SVG源上。retina良好，尺寸可任意拉伸，且颜色可控，真乃Web图标的未来之星。

吹的嘴巴都干了，上个简单的demo给大家瞅瞅, 我先去给水排水~~

您可以狠狠地点击这里： SVG Sprite使用示意demo

代码如下截图：

效果为：

总结下就是： symbol + use => SVG Sprite

诸位会不会觉得本文的内容快要结束了呢？

嘻嘻嘻嘻，顶多才 1/3，下面的才是重点，打起精神，走起~~

四、SVG Sprite实际应用的阻碍

两大问题：

SVG图标从何而来？
SVG图标如何变成symbol并整合在一起？

第 1个问题， SVG图标从何而来？
“远在天边近在眼前”，CSS3 font-face的逐渐升温，让很多 font-face工具诞生了。例如以前我介绍过的国外的 icomoon.io，或者国内阿里系的 iconfont.cn, 或者bootsrap 3粉们的 font-awesome

这些图标实际上都是使用SVG作为媒介的，所以，根本就不要担心“SVG图标从何而来”，这图标多的就像牛魔王身上的虱子——一抖一大把啊！

OK，如何获得呢？直接下载。拿 iconfont.cn示意，点击某一图标的下载按钮：

点击下载SVG:

于是，我们就得到了SVG图标啦！如果你还需要其他图标，也按照这个步骤一个一个下载下来，很简单吧~ 然后把它们放在一个文件夹中，以备后用。

下面最关键的是第 2个问题， 如何合并这些SVG到一个SVG上？同时满足使用的是 symbol标签，并可以使用裸露的 use元素（除了 xlink:href没有其他属性）调用呢？

很长很funny, 要专门独立两段，

五、关于合并：偏开发的前端看这里

这里的方法适用于偏开发的前端，一些对指令无感的妹子们，可以看下面偏设计的方法。

Github上，有个名为 svgstore的 grunt插件，地址戳这里。如果您还不了解 grunt, 可以看看这两篇我觉得不错的文章：“ 使用GruntJS构建Web程序 (1)”和“ 使用GruntJS构建Web程序 (2)”.

grunt改装的装好后，执行下面的指令，

npm install grunt-svgstore --save-dev

烧个香保佑安装成功，然后你就会看到在 node_modules文件夹中一个名为 grunt-svgstore的子文件夹（如下）：

这个名为 grunt-svgstore的文件夹中有个名为 Gruntfile.js的文件，据我个人理解，这个JS是所有 grunt插件要使用的配置文件。

我在里面做了一件事情，加了这么一行代码：

为什么要加这么行代码呢？因为 grunt-svgstore项目README.md让加的，所以我就加了。

你会看到

svgstore: {

}

中有一大堆的配置什么的，这些都是用来独立测试各个API的（ options对象中各个键就是API名称），让你知道此插件各个API都是干嘛用的，具体释义参见该Github项目。忍不住提一下，如果你希望SVG图标颜色可以在CSS中通过 fill控制， cleanup设置为 true.

OK, 准备工作完毕，下面来实践下。我把从iconfont.cn上下载下来的3个SVG都放在了一个名为 mytest的文件夹下，我希望这个文件夹下的SVG都整合在一起，并可以方便调用，怎么办？

在 svgstore: {}内部搞个自定义的配置，见下图：

意思是： mytest文件夹下的所有SVG合并成一个名为 mytest.svg的大SVG文件，并放在 tmp文件夹下。

我们 cd到 grunt-svgstore目录，然后在命令行工具中输入：

grunt

然后走起，再烧第2根香，保佑一切正常……

然后，就可以在tmp文件夹下看到我们的小结晶—— mytest.svg，以及如何使用示意的HTML demo页面。

此demo页面源代码如下：

<svg xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;"><symbol viewBox="0 0 1024 1024" id="iconfont-baobei"><title>iconfont-baobei</title><path fill="#272636" d="M...z" transform="translate(0, 800) scale(1, -1)"/></symbol><symbol viewBox="0 0 1024 1024" id="iconfont-bianji"><title>iconfont-bianji</title><path fill="#272636" d="M...z" transform="translate(0, 800) scale(1, -1)"/></symbol><symbol viewBox="0 0 1024 1024" id="iconfont-shangchuan"><title>iconfont-shangchuan</title><path fill="#272636" d="M...z" transform="translate(0, 800) scale(1, -1)"/></symbol></svg>

<svg>
    <use xlink:href="#iconfont-baobei"></use>
</svg>
<svg>
    <use xlink:href="#iconfont-bianji"></use>
</svg>
<svg>
    <use xlink:href="#iconfont-shangchuan"></use>
</svg>

效果如下截图：

Oh, no! 怎么有残缺，不完美，感觉不会再爱了！

淡定，小问题，貌似是这些SVG制作的时候，本身有些问题（为了font-face做的调整？），我们在illustrator中打开这些SVG, 一下子就可以看出症结所在，例如，细细的铅笔图标：

铅笔的两个角在白色的舞台之外了，正好跟上面截图少掉的两个角一致。要修复，超easy, 等比例缩放到白色舞台内就OK了，ctrl+S保存，然后重新执行下 grunt命令就好了。

然后，浏览器刷新下刚刚的demo页面，当当当当，撒花撒花~~

以上~

六、关于合并：偏设计的前端看这里

注意： 这里的方法，就算是CSS完全不懂的设计师也可以轻松上手！

对于一些妹子，只会写些页面，对于开发、编程的感觉比减肥还难，显然，上面的偏开发需编译的工具插件对她们就很吃力。不急不急，这里有面向设计师的方法。

你需要一个犀利的软件，矢量之王，illustrator!

一步一步跟我来：

打开软件，新建一个文件，然后另存为SVG格式；
从标尺中拉出一些参考线，搞些正方形格子，我自己用的尺寸是 160*160, 矢量无尺寸，你随意；
把下载的SVG图形拖到这些格子中，缩放到合适大小。我是铺满的，这样由于对比明显，各个图标尺寸就都是一致的，CSS控制方便；
这一步很关键。打开Symbols面板，在Window菜单栏中，或Shift+Ctrl+F11启用。然后，拖动格子中的SVG图形到这个面板中，就会触发新建“元件”的行为，会打开类似下面的面板：

其中， name就是SVG中对应的 symbol元素的 id，因此，最好使用英文，最好易识别。下面的 type你随意，这个只要在SVG导入到Flash中使用时候才有用的，这里，我们不和Flash打交道。然后，OK, 这个图标就“元件”化了，按照同样的步骤，让3个图标都变成元件（以后可重复使用），Symbols面板会类似下面这样：
Ctrl+S保存，合并好的SVG即出炉。我们直接在浏览器中打开此SVG，效果不错哦~

是不是就这么结束了，太天真了。人生不如意事十之八九。我们瞅一瞅SVG的源代码，会发现， use元素居然跟小龙女一样，不干净纯洁啦——上面一大推乱七八糟的属性！

难道我们要在网页中使用如此臃肿的 use元素吗？

我以小新的明义告诉你，绝对不会！

因为我昨晚在家折腾出了个工具，可以将illustrator生成SVG转换成web可用SVG Sprite.

您可以狠狠地点击这里： illustrator生成SVG转换成web可用SVG Sprite工具demo

上工具完整地址是：http://www.zhangxinxu.com/sp/svg.html 很好记忆，我站点 域名+sp+svg.html, sp是 special的缩写，专门放工具用的。

使用很简单：

把illustrator生成SVG所有代码拷贝到第一个框框里；
点击“转换萌萌哒”按钮，适用于SVG Sprite技术的新代码就出来了（左下的框框）；同时，右侧显示了如何使用该SVG Sprite在web中真实实践；
左下角还有个红色的“导出该SVG”，就是字面意思，可以自定义名称，也可使用随机名称，为空即可；

一开始的 SVG Sprite使用示意demo就是使用这个工具生成的哦~ 见下缩略图：

注意：此工具值适用于illustrator生成的SVG, 水平有限，其他SVG转换十有八九会跛掉。没怎么测试，如果发现此工具转换出了问题，欢迎提醒，定会及时修复。另外，生成的SVG文件会不定期清理，请勿外链。

我想想，还有没有什么问题……哦，为什么说此方法与CSS Sprite还要简单。

因为，CSS Sprite还需要在CSS中使用 background-position一个一个地定位，哦，天哪~ 如果没有工具的话，就纯粹搬砖的苦力活啊~

但是，这里的SVG Sprite的定位，你只要在illustrator中把位置放好，illustrator这个软件就自动帮你定位好了。你只要在我的工具中转换下，生成下，然后在需要使用的地方使用：

<svg><use xlink:href="#target" /></svg>

就好了，用到CSS了吗？几乎没有，除了对SVG做尺寸限制以及改变图标的颜色。OK，这点程度的东西，小白设计师也可以轻松上手。

从这一点来看，SVG又一次成为了明日之星！设计师只要在illustrator中做好图就可以了，完全没有从前那种帮重构切图的苦逼经历了，是不是要啤酒炸鸡庆祝下！

七、唯一的制约——兼容性

SVG图标必定是未来的趋势。为何现在国内依然不温不火，不对，应该是还没有开始有温度。我觉得除了技术学习滞后性，浏览器兼容性是最关键的制约，毕竟IE8目前依然是大头(33.23%, 刚在百度流量研究院看到的数据)。

如何破？按照我的心情，鸟它个毛线，我就手机上用用，不也挺好。静下来想想，不能意气用事，提一下IE7/IE8浏览器的处理方法吧~

有些标签，浏览器识别，会忽略里面一些东西。例如SVG的 desc元素，里面的内容一向不显示的。于是，对于IE7/IE8, 我们可以把对应图标的 png图片放在其中，然后IE9+等支持SVG的浏览器就会忽略之，而IE7/IE8这些不识泰山的元素就会显示图片。拿礼物这个SVG举例：

<svg class="webicon">
    <desc><img src="iconfont-baobei.png" width="16" height="16"></desc>
    <use xlink:href="#liwu"/>
</svg>兑换礼物

于是，在IE8下，就会是这样：

其他靠谱浏览器依然是这样：

于是，完美兼容了。只是活脱脱多了个标签，略败兴。当然，你也可以针对IE7/IE8使用CSS Sprite技术，原理类似，只是 img标签换成其他 i之类标签显示背景图，至少HTML这块会干净很多。

八、结束语

今年4月份的时候刚介绍过“ CSS3图标图形生成技术”，如果说“ font-face图标生成技术”是热门的话，那“CSS3图标生成技术”则属于偏门，受设计制约很大，而本文介绍的“SVG Sprite图标生成”则代表了未来。

font-face在部分win系统下，字体较小的时候，锯齿问题很讨厌，苛刻的设计师无法忍受，甚至出现了响应式 font-face这样的名堂，但是，据我观察，纯正的SVG图标是没有这个问题的，而且，SVG图标具备 font-face几乎所有的优点，尺寸CSS可随意定制，颜色CSS可随意定制；且没有 font-face异步加载延时渲染问题；同时没有某些浏览器下 font-face跨域问题；更关键的是，SVG图标支持渐变，甚至彩色图标的。而 font-face实现彩色图标，要一个一个拼起来，你以为贴马赛克啊！而且，SVG中每个 path元素等可以独立控制，帅气的图标变换动画等的就是你来实现！

因此，各方面看，SVG完胜 font-face,

目前唯一的问题就是兼容成本。但是，随着浏览器的发展，SVG一定会迎来自己Web新舞台！

感谢阅读，欢迎交流，踊跃纠错，多多赞助！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： http://www.zhangxinxu.com/wordpress/?p=4264

（本篇完）

有话要说？点击这里发表评论。

使用uncss去除无用的CSS

Sun, 25 May 2014 00:18:40 CST

从代码的角度讲，你知道什么是比往网站或应用里添加功能更好的事情吗？删除那些没用的东西。也许是一些代码、图片、或相关依赖等，就像扔掉家中储存柜里没用的产生异味的存货。我经常用ImageOptim来优化我的图片的体积，这既能提供页面加载速度，又能减少带宽流量。然而，你知道有什么工具能找到页面中样式文件里无用的CSS吗？之前我介绍过一个用JavaScript找到无用CSS的方法，但事实上，我们并不想知道哪些CSS规则是无用的，我们想要的是一个没有多余CSS的干净的样式文件。所以，这个叫做 uncss的NodeJS工具就是我们要找的了。下面我们来看看 uncss是如何使用的！

一个基本的用法是直接在命令行窗口里输入 uncss命令：

uncss http://www.webhek.com > styles.css

执行输出的结果就是一个你想要的、剔除了所有无用的CSS规则的完整的样式表文件。那 uncss究竟是如何做到这些的呢？让我来一步步告诉你：

首先 PhantomJS会加载整个HTML页面，然后执行JavaScript。

接着从HTML页面里提取页面中所有的CSS样式。

然后用 css-parse分析并连接所有的样式规则。

用 document.querySelector过滤出哪些CSS选择器是没有用到的。

最后用剩下的CSS规则生成输出文件

跟其它NodeJS工具一样，它里面提供了很多JavaScriptAPI，下面是一个使用它的API的例子：

var uncss = require('uncss');

var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = {
        ignore       : ['#added_at_runtime', /test\-[0-9]+/],
        media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
        csspath      : '../public/css/',
        raw          : 'h1 { color: green }',
        stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
        ignoreSheets : [/fonts.googleapis/],
        urls         : ['http://localhost:3000/mypage', '...'], // Deprecated
        timeout      : 1000,
        htmlroot     : 'public'
    };

uncss(files, options, function (error, output) {
    console.log(output);
});

/* Look Ma, no options! */
uncss(files, function (error, output) {
    console.log(output);
});

/* Specifying raw HTML */
var raw_html = '...';
uncss(raw_html, options, function (error, output) {
    console.log(output);
});

一个运行维护多年的网站或Web应用必定会产生很多无用的代码，这是毫无例外的。多余的代码不仅给WEB程序员带来维护的负担，也给使用者造成负面效应。请试一下 uncss，真的非常简单，完全自动的帮你清除无用的CSS代码！

9个最新的手机/移动设备jQuery插件

Tue, 10 Jun 2014 15:20:17 CST

随着互联网的流行，移动网站开始急速增加，在2014年手机网站将会出现很多，所以手机网站是必须要学会制作的。手机网站不像桌面平台一样制作，否则会影响显示效果，目前大部分手机网站使用响应式设计技术，而且也很流行。

但是新手想实现响应式技术是不容易的，所以我们可以用一些响应式框架或适用于移动设备的jQuery插件来制作，这样能方便实现我们的需求。

今天设计达人网小编整理了9个好用的手机/移动设备jQuery插件，也许对你的手机项目有帮助哦！

相关 响应式资源推荐：
《 10个响应式设计的导航菜单源码-附教程》
《响应式WEB设计展示必备 – PSD》
《响应性网页设计资源及框架工具》

IOSSCRIPTS

iosslider这个jQuery插件可以让桌面、手机、平板设备实现自适应的网页幻灯片（灯箱），支持水平和垂直方式。

Slip.js

如果想实现触摸设备排序的话，我想Slip.js插件是最好的选择。

jQuery Finger

一个触摸事件插件。和其它相关插件不同的是，它会移除触摸设备的300毫秒延迟。

Tocca.js

超轻量级的触摸事件插件，大小只有1KB啊。

Leader.js

用户登陆插件，目前为概念设计，是否真适用在实际项目中使用呢？

JQuery Mobile Date Navigation

移动手机设备的日历导航插件，如果有日期弹出来选择就更强大了。

jQuery Navobile

这类侧边栏导航菜单插件我们介绍过，请看《好用的侧边栏菜单/面板jQuery插件》一文。

查看演示时，请把你的浏览器缩小到手机的分辨率就可以看一以了。

Responsive Mobile Menu

一个响应式移动设备菜单插件。

PhotoSwipe

图像展示类的移动设备插件，功能实用，而且效果不错，请看DEMO体验。

100个惊人的CSS、JS代码技术

Mon, 20 Jan 2014 17:09:45 CST

最近在Codepen看到Top Pens of 2013这个专题，专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens，在惊叹技术人员的创造力同时我们还能学习这些技术，对交互设计师而言还能获取灵感哦！

Top Pens of 2013专题地址： http://codepen.io/2013/popular

这里我们选出排名前10名的Pens，无论是前端人员还是设计师，我觉得还是值得一看的。PS:在浏览这些技术记得使用兼容CSS3/ HTML5的浏览器哦，否则有些效果你看不出来。

TOP 10: CSS 绝对居中（水平垂直居中）

一个CSS居中的新写法，这个我觉得比较实用，因为兼容IE8呢，IE6就不说了，一边去吧。

TOP 9: 跟随移动鼠标HOVER特效

这个中文有点难解释，大家自己看案例才知道是什么效果…挺新鲜的效果。

TOP 8: 拟实化倒计时实例

这个倒计时设计图出来的时候，第一眼就很喜欢了，现在代码版了，些DEMO由CSS+JS写的。

TOP 7: CSS 3D效果

这个在实际项目中没什么有，但可以用来学习研究，看看能否在其它项目上使用。

TOP 6: CSS+jQuery实现WIN8风格的效果切换

效果确实真的不错，动画也流畅，如果用在个人博客还是挺个性化的。

TOP 5: 创意CSS菜单

这个CSS写的菜单真的很有创新，点击后会以动画形式改变成形状的图标，NICE!

TOP 4: 拟实化CSS按钮

使用 CSS3编写，效果不错。

TOP 3: 创新CSS按钮

鼠标移到按钮上的打开面板效果很不错，带3D感，还有阴影啊，做得真细节。

TOP 2: 触摸设备菜单概念设计

设计可爱，动画效果也很棒，赞！

TOP 1: Tearable Cloth

十分强大的js技术特效，PS: 用右键可以把网切开哦！