1、图像黑白处理
支持Chrome18.0、Firefox35、Safari6.0、oprea15.0以上版本以及IE6-9版本
img.desaturate {
filter: grayscale(100%);
/*TODO 对Firefox早期版本提供兼容支持，用户量少，可考虑删除此段代码*/
filter: url('url("data:image/svg+xml;utf8, <svg%20xmlns='http: //www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");');
/*TODO gray属性值仅兼容IE6-IE9，未来可考虑删除此段*/
filter: gray;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
可以使用这一段代码对IE10和IE11进行处理，毕竟用户量还不少。
function grayscaleIe(src) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++) {
for(var x = 0; x < imgPixels.width; x++) {
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
2. 使用 :not() 选择器排除所选择的某一个元素。查看CSS选择器
直接使用 :not() 伪类来设置菜单元素之间的间隔线，支持主流浏览器以及IE8以上版本。
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：
3. 页面顶部阴影
下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果，所有主流浏览器都支持 :before 选择器。在IE8及以下版本中，必须声明，否则无效。
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
4. 给 body 添加行高
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：
body {
line-height: 1;
}
这样文本元素就可以很容易地从 body 继承。
5. 所有一切都垂直居中
除IE外的主流浏览器均能很好的支持，因此在IE中使用要特别注意。当然因为flex，所以就不要考虑IE10以下的版本了。
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
6. 逗号分隔的列表
让html列表项看上去像一个真正的，用逗号分隔的列表：
ul > li:not(:last-child)::after {
content: ",";
}
7. 使用负的 nth-child 选择项目
在CSS中使用负的 nth-child 选择项目1到项目n。
li {
display: none;
}
li:nth-child(-n+3) {
display: block;
}
8. 对图标使用 SVG
极力推荐使用SVG做字体图标。毕竟，目前浏览器几乎都能支持字体图标，且兼容性表现极好，包括古老的IE6。
.logo {
background: url("logo.svg");
}
另外，如果您的项目已经舍弃IE8以下版本，那也可以采用另一种方案，我们可以在项目构建的时候，将图标以basc64编码的方式引入到我们的CSS代码中，这样的话对于图标便可以做到0个http请求，加载速度自然能够非常快，也减少了制作字体图标所花费的时间。但是弊端也明显，会明显增大被嵌入代码的体积，所以使用的时候请设置先决条件：‘仅用小于30K的小图标，且不要在HTML中使用’，避免滥用造成的性能问题。
9. 优化显示文本（请不要在IE浏览上使用，包括Edge）
font-smoothing: grayscale将对字体图标文件抗锯齿反走样作出处理，使图标字体更清晰，防止模糊。以后不用再吆喝‘为什么我的字体图标有点模糊了’。虽然已有不少网站使用，但毕竟还不是标准属性，所以还请谨慎，具体是否使用待看过一篇权威文档后再做考量。
text-rendering 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡，仍然请看文档再决定是否使用。
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
注：请负责任地使用 optimizeLegibility，使用它后浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效，该属性值在移动设备上会造成比较明显的性能问题。此外，IE /Edge没有 text-rendering 支持。
10. 对纯 CSS 滑块使用 max-height
使用 max-height 和溢出隐藏来实现只有CSS的滑块，感觉鸡肋，也许是我无知无畏吧。
.slider ul {
max-height: 0;
overlow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease;
}
11. 继承 box-sizing
让 box-sizing 继承 html，关于box-sizing的知识点请查看菜鸟教程中相关的描述。
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
推荐使用，这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
12. 表格单元格等宽
表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：
.calendar {
table-layout: fixed;
}
推荐使用，且兼容性良好，目前多有浏览器均支持此段代码。
13. 用 Flexbox 摆脱外边距的各种 hack
当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了，推荐使用。但因为使用的Flexbox，请小心老古董IE。
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
14. 使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接：
a[href^="http"]:empty::before {
content: attr(href);
}
相当方便，但要小心IE，在IE9及以上浏览器中才生效。
15. CSS 写出三角形
利用border来写三角形代码，并且兼容IE6。这是个神技能，神技巧。
/* 上三角 */
div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; /* left arrow slant */
border-right:5px solid transparent; /* right arrow slant */
border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
/* 下三角 */
div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/* 左三角*/
div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-right:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
/* 右三角 */
div.arrow-right {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-left:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
16. 文本渐变
文本渐变效果很流行，使用 CSS3 能够很简单就实现，推荐使用，可以在重影字。-webkit-mask-image，仅可以使用在-webkiet浏览器中，其他浏览器参考，算了，别参考了，老老实实在手机端使用吧。
但是在firefox57.0.4中好像是支持的，其它的我再也不知道了。
HTML：
<h2 data-text="我正在渐变，你看着哈"></h2>
CSS：
h2[data-text] {
position: relative;
}
h2[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
left: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(138,200,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
17. 禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了，可惜了IE系列仅支持IE11。
.disabled { pointer-events: none; }
18. 模糊文本
简单但很漂亮的文本模糊效果，简单又好看！仅支持IE9以上
.blur {
color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
说了这么多，恩，IE有病，但是用户量还不少呢。
网友评论