《CSS Secrets》读书笔记（1）

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来，本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》，做笔记的过程中我会根据自己的过往经验加上自己的理解和看法，用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人，如果你是新手，阅读起来可能有点吃力，同时，笔记也是针对我个人的查漏补缺，有些知识点并不会记录进去。

文章目录

引言

web标准：是敌还是友
CSS 编码技巧

尽量减少代码重复
相信你的眼睛，而不是数字
关于响应式网页设计
合理使用简写
我应该使用预处理器吗

引言

web标准：是敌还是友

@supports 关键词

h1 { color: gray; }
@supports (text-shadow: 0 0 .3em gray) {
    h1 {
        color: transparent;
        text-shadow: 0 0 .3em gray;
    }
}

检测某个样式属性是否被支持

var root = document.documentElement; // <html>

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前缀

将标准属性写在最后总是明智的，但是也不需要将所有浏览器的前缀的写上，因为有些浏览器可能没实现，有些浏览器一开始就用标准的写法实现，所以人工很难维护，我们可以借助一些自动化工具。

自动化工具：Autoprefixer、预处理器的mixin、JS运行出兼容结果再处理的-prefix-free

-webkit- (谷歌, Safari, 新版Opera浏览器等)
-moz- (火狐浏览器)
-o- (旧版Opera浏览器等)
-ms- (IE浏览器 和 Edge浏览器)

CSS 编码技巧

尽量减少代码重复

相互关系用代码表示

{
    font-size: 20px;
    line-height: 1.5;
}

代码易维护 vs. 代码量少

{
    border-width: 10px;
    border-left-width: 0;
}

currentColor，一直被解析为color

hr {
    height: .5em;
    background: currentColor;
}

继承

input, select, button { font: inherit; }
a { color: inherit; }

创建提示框的时候，你可能希望它的小箭头能够自动继承背景和边框的样式

.callout { position: relative; }

.callout::before {
    content: "";
    position: absolute;
    top: -.4em; left: 1em;
    padding: .35em;
    background: inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}

相信你的眼睛，而不是数字

人的眼睛并不是一台完美的输入设备。

数值上垂直居中，但视觉上稍微偏下了
我们倾向于把圆形感知得比其实际尺寸更小一些
字母的形状在两端都比较整齐，而顶部和底部则往往参差不齐，从而导致你的眼睛把这些参差不齐的空缺部分感知为多出来的内边距。因此，如果我们希望四边的内边距看起来是基本一致的，就需要减少顶部和底部的内边距。

关于响应式网页设计

使用百分比长度来取代固定长度。或者其他类似相对单位如vw/vh/vmin/vmax
使用 max-width 而不是width，可以适应小屏幕，不需要媒体查询
给替换元素（img,object,video,iframe,input,textarea,select）设置max-width:100%
background-size: cover背景图片完整地铺满一个容器
让视口的宽度来决定列的数量

合理使用简写

简写前

{
    background: url(tr.png) no-repeat top right / 2em 2em,
    url(br.png) no-repeat bottom right / 2em 2em,
    url(bl.png) no-repeat bottom left / 2em 2em;
}

注：background-position方向或数值后面的 “/” 表示background-size属性大小。

简写后

{
    background: url(tr.png) top right,
                url(br.png) bottom right,
                url(bl.png) bottom left;
    background-size: 2em 2em;
    background-repeat: no-repeat;
}

这样简写将有利于维护修改。

我应该使用预处理器吗

目前常见预处理器有 Stylus、Sass、Less等

还有类似PostCSS,Myth等强大先进的工具，如果使用得当，它们在大型项目中可以让代码更加灵活。

但是使用预处理器有一些很常见的弊端。

CSS 的文件体积和复杂度可能会失控。这里大概说的是层级嵌套滥用，这是非常常见的失控，我们甚至忘了怎么写出优秀的CSS样式。
调试难度会增加，好在有了SourceMap，不过我遇到的情况是有时候映射不准确。不管是使用Sass还是PostCSS我都遇到了。
一定的延时，编译需要时间

以上好像都不是什么好的借口来拒绝使用预编译器，当然不是拒绝，我自己每天都用。因为我们希望看到的是CSS原生支持这些东西，而不是通过预编译器，当然现在比如变量，计算函数等大部分浏览器已经支持了，我们希望环境越来越好，我们的CSS更加灵活方便。

END.