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大全鉴赏
- 去掉
date类型<input>框的叉叉：
::-webkit-clear-button {
-webkit-appearance: none;
}
- 去掉
number类型<input>框的上下箭头：
::-webkit-inner-spin-button {
-webkit-appearance: none; /* 上下小箭头按钮，你丫太丑了，滚粗，负分 */
}
- 去掉
search类型<input>框的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;
}
