Tips

1. 基于active,checked等状态类名的web前端交互开发

• .active等JS交互类名自身绝对…绝对不能有CSS样式
  再说一遍，自身无样式，就是一个状态标识符，用来和其他类名发生关系，然后让其他类名的样式发生变化。这种关系可以是父子，兄弟或者自身。
  下面我们看下关键的CSS代码，这个.active是如何自身无样式的：

.box {
    max-height: 80px;
    transition: max-height .25s;
    overflow: hidden;
}
.box.active {
    max-height: 200px;
}
.active > .more {
    display: none;
}

可以看到，当我们点击按钮后，盒子变高，以及更多元素隐藏，全部都是通过和.active发生关系后发生的，而不是.active自己的样式。例如，我们盒子实现的200px以内任意高度的动画效果，是通过.box.active组合类名触发的，用中文解释就是.box元素同时有.active状态的时候，样式如何如何…

2. 巧用CSS属性值实现向下兼容

• 就拿盒阴影和边框例子举例，如果我来实现，则会是这样的：

.box {
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    border: 1px solid #d0d0d5;
    border: 0 rgba(0,0,0,.2);
}

想要让IE9+浏览器没有边框其实很简单，只要使用一个只有IE9+认识的同时没有边框的书写形式就可以了。虽然border所有浏览器都识别，但是rgba色值确实IE9+浏览器才支持，于是，我们就可以巧妙利用IE8-浏览器不识别rgba色值这一特性，实现我们的向下兼容处理。

里面的例子，理论上，直接使用`rgba(0,0,0,0)`也是可以实现我们的效果的，少了1个字符，本来挺好。但是，如果你在`Sass`中写出`border: 0 rgba(0,0,0,0);`，则会被`Sass`自以为是地编译成`border: 0 transparent`，我靠，这个可就差了十万八千里了，虽然看表现`rgba(0,0,0,0)`和`transparent`是一个东西，都是透明，但是，对于`border`属性而言，`rgba(0,0,0,0) `IE9+浏览器才能识别，`transparent`从IE7浏览器就开始识别了。于是乎，IE7，IE8浏览器下，本要出现的边框就这样直接被干掉了，妥妥的bug啊！为了规避这个让人无语的问题，这才使用了`rgba(0,0,0,.2)`。

• 所有数值相关的兼容试试CSS3 calc()

.box {
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    border: 1px solid #d0d0d5;
    border: calc(0px + 0px) #000;
}

因为CSS3 calc()计算IE9+浏览器才开始支持。

• 背景图可以试试background多背景

.box {
    background: url(test.png);         /* IE8 */
    background: url(test.svg), none;   /* IE9+ */
}

• IE10支持但是IE9不支持的属性
  transtion, animation, gradient, transform, translate3d

3. 纯CSS实现IE7/IE8下的正圆效果

.box {
    width: 150px; height: 150px;
    position: relative;
    /* 值显示左上角那个圆点 */
    overflow: hidden;
}
.radius {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 149px dotted;
    /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */
    margin: 0 0 1px 1px;
    color: #cd0000;
    background-color: currentColor;
}

4. appearance大全鉴赏

1. 去掉date类型框的叉叉：

::-webkit-clear-button {
     -webkit-appearance: none; 
}

2. 去掉number类型框的上下箭头：

::-webkit-inner-spin-button {
     -webkit-appearance: none;    /* 上下小箭头按钮，你丫太丑了，滚粗，负分 */
}

3. 去掉search类型框的N多特征：

/* 去除圆角 */
input[type=search] { -webkit-appearance: none; }

/* 隐藏取消按钮 */
::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 隐藏放大镜 */
::-webkit-search-results-button { -webkit-appearance: none; }

5. 中文英文左右padding一致两端对齐实现

.justify {
    text-justify: inter-ideograph;
    text-align: justify;
}