最近在看《CSS揭秘》一书，还没看完，想把里面比较好的一些分享出来，然后自己也可以一边看一边记边更新
- css标准： DRY1①、可维护、灵活性、轻量级
DRY 是 Don’t Repeat Yourself 的首字母缩写，意思是不应该重复你已经做过的事。它是一种 广为流传的编程理念，旨在提升代码某方面的可维护性：在改变某个参数时，做到只改尽量 少的地方，最好是一处
-
浏览器兼容信息查询网站： Can I Use...?（http://caniuse.com） WebPlatform.org（http://webplatform.org） Mozilla Developer Network（http://developer.mozilla.org）
-
浏览器回退机制(浏览器前缀)： 应该把标准语法排在最后
.bg {
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);
}
因为很多浏览器在当时的版本，一些css特性还是实验特性，浏览器为了提前支持实验特性并获得反馈，就在属性值前面加上自己的前缀。这就导致了上面这种意想不到的问题，所以后面新的css特性，要求开发人员需要手动从设置里面开启选项才能体验，然后提供反馈，而这些将不能用在生产环境中，因为你不可能要求用户去手动开启这个设置选项。
最常见的前缀分别是 Firefox 的 -moz-、IE 的 -ms-、Opera 的 -o- 以及 Safari 和 Chrome 的 -webkit-。
-
自动加前缀的工具或方法：1. CSS3, Please!（http://css3please.com）和 pleeease（http://pleee- ase.io/playground.html）2. Autoprefixer 3. 在css预处理器(LESS、Sass等)中为常用属性加前缀mixin
-
可以通过检查css属性支持度，在根元素(<html>)添加一些辅助类来提供完善的回退机制：
h1 { color: gray; }
.textshadow h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}
- 尝试灰常新的css属性，可以用@supports规则实现回退：
h1 { color: gray; }
@supports (text-shadow: 0 0 .3em gray) {
h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}
}
==慎用@supports== 在上面的例子中，我们想要的文本 投影效果只会在那些支持 text-shadow 且同时支持 @supports 规则的浏览 器中生效。这个范围明显比我们所期望的要窄。
- 用JavaScript检查css属性支持度并添加辅助类的方法：
核心思想就是在任意元素的element.style上检查该属性是否存在：
var root = document.documentElement;
if ('textShadow' in root.style) {
root.classList.add('textshadow');
} else {
root.classList.add('no-textshadow');
}
或者如下封装以检测多个属性：
function testProperty(property) {
var root = document.documentElement;
if (property in root.style) {
root.classList.add(property.toLowerCase());
return true;
}
root.classList.add('no-' + property.toLowerCase());
return false;
}
- 检测属性值是否支持，并添加辅助类：
如果我们想要检测某个具体的属性值是否支持，那就需要把它赋给对应 的属性，然后再检查浏览器是不是还保存着这个值。很显然，这个过程会改 变元素的样式，因此我们需要一个隐藏元素
function testValue(id, value, property) {
var dummy = document.createElement('p');
dummy.style[property] = value;
if (dummy.style[property]) {
root.classList.add(id);
return true;
}
root.classList.add('no-' + id);
return false;
}
- css编码技巧： 1. 尽量将带数字属性的值与字体相关，比如行高应该写1.5而不是30px：
{
font-size: 20px;
line-height: 1.5;
}
但是border-width属性慎重考虑
- 利用展开属性合并和合并属性复写，这样可以提高该代码的可维护性：
{
border: 10px 10px 10px 0;
}
/*拆分为下面的写法虽然增加了代码量，但是提高了可读性和维护性：*/
{
border: 10px;
border-left-width:0;
}
- 利用颜色关键字currentColor, 他将会被解析为一个颜色值，虽然功能很有限，但它真的是个变量
hr {
height: .5em;
background: currentColor;
}
currentColor 本身就是很多 CSS 颜色属性的初始值，比如 border-color 和 outline-color，以及 text-shadow 和 box-shadow 的颜 色值，等等。
- 利用inherit关键字继承属性从而不需要重复指定:
input, select, button { font: inherit; }
- 把试觉错觉放到你的设计中：左边是完美居中的，而右边稍微上移一点儿，但在人类眼睛看来恰好居中
- 关于响应式的建议：避免媒体查询
- 使用百分比长度取代固定长度. 如果实在做不到，可以尝试使用与视口相关的单位（vw、vh、vmin 和 vmax），它们的值解析为视口宽度或高度的百分比
- 当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询
-
css预处理器缺点：1. CSS 的文件体积和复杂度可能会失控。 2. 调试难度会增加。 3. 预处理器编译解析阶段耗时，虽然通常很快。 4. 增加团队学习成本。 5. 抽象遗漏法则：：“所有重大的抽象机制在某种程度 上都存在泄漏的情况。预处理器有它们自己的bug
-
css自定义变量：申明的时候使用‘--’开头，使用的时候使用var()：
ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }
因为自定义变量有自己的作用域，上面的写法可以做的不同的列表li颜色自动变化。这是预处理器做不到的
- 实现半透明边框：
{
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box; /*调整背景区域为padding-box, 默认是border-box(边框的外边缘)*/
}
- box-shadow实现多重投影：
{
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
网友评论