CSS高级技巧（一）常见的注意事项

检测某个样式属性是否被支持，核心思路就是检查element.style对象上检查属性是否存在

如果需要检测某个对应的属性值是否支持，那就将该属性赋给对应的属性值

提供不兼容属性的回退机制，例如：

background: rgb(255, 128, 0);
background: -moz-linear-gradient(0deg, yellow, red);
background: -o-linear-gradient(0deg, yellow, red);
background: -webkit-linear-gradient(0deg, yellow, red);
background: linear-gradient(90deg, yellow, red);

减少浏览器前缀的使用，应用新的配置开关的方法

 提升代码的可维护性

（1）涉及到font-szie属性的地方使用百分比或em作为单位

（2）对于按钮等元素边框，阴影，背景色的调整，可以巧妙的使用半透明的黑色或白色提亮或加深，推荐使用HSLA

（3）对于简写属性，应用如下方法更好维护：

border- 10px;
border-left- 0;

（4）或用currentColor，该属性时CSS的第一个变量，默认从文本哪里得到颜色

（5）活用inherit

 调整元素的过程中，相信眼睛，而不是数字

将媒体查询作为最后手段，尽可能的运用弹性布局

（1）尽可能使用百分比单位，视口单位vw,vh,vmin.vmax

（2）当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是 width

（3）替换元素记得设置max-100%

（4）当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定 列的数量

（5）在 使 用 多 列 文 本 时， 指 定 column-width（ 列 宽 ） 而 不 是 指 定 column-count（列数）

小心的使用预处理器，因为原生的CSS功能可能更加强大