CSS揭秘读书笔记--引言

web标准

CSS 的标准化流程由 W3C的CSSWG(Cascading Style Sheets Working Group)，由浏览器商，大学，大公司（google，IBM等），以及独立CSS专家组成。W3C 本身并不制定标准，而是作为一个论坛式的平台，接收来自小组成员的提交，并通过会议来商讨制定标准

规范经历6个阶段

编辑草案 Editor's Draft (ED)
工作草案 Working Draft (WD)
最后通告工作草案 Last Call Working Draft (LCWD)
候选推荐标准 Candidate Recommendation (CR)
建议推荐标准 Proposed Recommendations (PR)
推荐标准 Recommendation (REC)

TIPS: 书中是首个公开工作草案(FPWD), 而我搜到的是LCWD, 更具体细节参考☞ CSS 标准发布流程

CSS的规范版本

CSS2.1, CSS3, CSS4这些名词是什么意思?

CSS2.1规范
发表于 1998 年，它的定义比CSS1更加严格, 详情见:
☞ 中文文档

CSS3和CSS4

尽管“CSS3”这个名词非常流行，但它实际上并没有在任何规范中定义过。这一点跟 CSS 2.1 或更早的 CSS 1 不一样。指的是一个非正式的集合，范指CSS2.1以后的新规范

CSSWG认为以一个版本去发布 CSS 很不科学。基于这样的想法，决定把 CSS 分成很多独立的小模块，每个模块只包含一个主要的特性（feature），可以自己单独升级开发, 所以新规范要分模块去查:

延续CSS2.1中的某部分
- CSS 语法（http://w3.org/TR/css-syntax-3）
- CSS 层叠与继承（http://w3.org/TR/css-cascade-3）
- CSS 颜色（http://w3.org/TR/css3-color）
- 选择符（http://w3.org/TR/selectors）
- CSS 背景与边框（http://w3.org/TR/css3-background）
- CSS 值与单位（http://w3.org/TR/css-values-3）
- CSS 文本排版（http://w3.org/TR/css-text-3）
- CSS 文本装饰效果（http://w3.org/TR/css-text-decor-3）
- CSS 字体（http://w3.org/TR/css3-fonts）
- CSS 基本 UI 特性（http://w3.org/TR/css3-ui）
新规范
- CSS 变形（http://w3.org/TR/css-transforms-1）
- 图像混合效果（http://w3.org/TR/compositing-1）
- 滤镜效果（http://w3.org/TR/filter-effects-1）
- CSS 遮罩（http://w3.org/TR/css-masking-1）
- CSS 伸缩盒布局（http://w3.org/TR/css-flexbox-1）
- CSS 网格布局（http://w3.org/TR/css-grid-1）

观察以上规范链接可以发现: 延续 CSS 2.1 已有特性的模块会升级到 3 这个版本号, 如果某个模块是前所未有的新概念，那它的版本号将从 1 开始。

浏览器前缀

由来
浏览器厂商实验性的实现新特性会采用两种方式:

添加私有前缀
配置开关

-moz-border-radius: 10px; /* Firefox */
-ms-border-radius: 10px;  /* IE */
-o-border-radius: 10px;  /* Opera */
-webkit-border-radius: 10px;  /* Safari和Chrome */
border-radius: 10px; /* 兜底 */

解决方案:
Autoprefixer(https://github.com/ai/autoprefixer)采用 Can I Use... (http://caniuse.com)的数据库来判断哪些前缀是需要添加的;它是在本地完成编译的，类似预处理器。

CSS编码技巧

DRY

尽量减少改动时要编辑的地方, 当某些值相互依赖时，应该把它们的相互关系用代码表达出来

举例: 给按钮添加了一些效果

<div class="wrap">
    <button class="btn">click</button>
    <button class="btn ok">ok</button>
    <button class="btn cancel">cancel</button>
</div>

.btn {
    padding: 6px 16px;
    border: 1px solid #446d88;
    background: #58a linear-gradient(#77a0bb, #58a);
    border-radius: 4px;
    box-shadow: 0 1px 5px gray;
    color: white;
    text-shadow: 0 -1px 1px #335166;
    font-size: 20px;
    line-height: 30px;
}

需求1: 如果我们改变父级的字号，按钮的尺寸就会随之变化

.btn需要改动的有:

.btn {
    ...
    padding: .3em .8em;
    border-radius: .2em;
    box-shadow: 0 .05em .25em gray;
    text-shadow: 0 -.05em .05em #335166;
    font-size: 125%; /* 假设父级的字号是 16px */
    line-height: 1.5;
}

需求2: 基于这个样式, 要创建一个红色的取消按钮，或者一个绿色的确定按钮，该怎么做呢?

.btn {
    ...
    background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
    box-shadow: 0 .05em .25em rgba(0,0,0,.5); 
    text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
}

/* 并叠加 */

.cancel {
    background-color: #c00;
}
.ok {
    background-color: #6b0;
}

☞ 按钮demo

`currentColor`

CSS 颜色(第三版)(http://w3.org/TR/css3-color)规范中，新增的关键字, 被解析为color

`inherit`

设置font, color, border, background

input, select, button { font: inherit; }

a { color: inherit; }

合理使用简写

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-size和repeat多次重复, 应改写为:

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

givencui博客首发, 转载请注明来自GivenCui

CC的故事