Skip to content

Commit

Permalink
Update notes.
Browse files Browse the repository at this point in the history
  • Loading branch information
cssmagic committed Sep 24, 2017
1 parent 914efeb commit 4856aae
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 49 deletions.
13 changes: 2 additions & 11 deletions .gitignore
Expand Up @@ -22,14 +22,5 @@ npm-debug.log
*.gz

*.psd
notes/*/*.md
!notes/chapter-0/*.md
!notes/chapter-1/*.md
!notes/chapter-2/*.md
!notes/chapter-3/*.md
!notes/chapter-4/*.md
!notes/chapter-5/*.md
!notes/chapter-6/*.md
!notes/chapter-7/*.md
!notes/chapter-8/*.md
notes/*/508.extra.md
notes/featured/*.md
!notes/featured/102.*.md
40 changes: 2 additions & 38 deletions notes/chapter-1/102.md
Expand Up @@ -22,42 +22,6 @@ Iterations 是 Basecamp 公司的一个内部管理工具。
Basecamp 公司原来叫做 37signals,从 2014 年开始改为现在的名字。Basecamp 原来是这家公司的主打产品的名字,后来当产品的名气远远超过公司名气的时候,公司改名也就是顺理成章的事情了。


## 经验分享
## 延伸阅读

#### 如何正确编写 Fallback 样式

在浏览器特性参差不齐的大环境下,“渐进增强” 与 “平稳退化” 是一种务实的策略。因此,在编写华丽样式的同时,我们还需要想好退路,为功能较弱的浏览器提供 fallback(回退样式)。

总的来说,我们应该利用 CSS 自身的机制来组织回退样式,而不是依赖 CSS hack 来实现。

![rgba-black](https://cloud.githubusercontent.com/assets/1231359/14772958/a0e504ca-0ad6-11e6-9d43-ccb4fe0da42c.jpg)

举个例子,设计师要求某个元素的背景色显示为半透明的黑色。但我们都知道,低版本 IE 等浏览器并不支持 RGBA 颜色,因此对于这些浏览器,我们需要将它的背景色设置为最接近设计意图的纯黑色。那么在这里,半透明黑色是我们期望的 “理想样式”,而纯黑色则是用来兜底的 “回退样式”。

在搞清楚状况之后,我们很快写出了下面的代码:

```stylus
background: rgba(0,0,0,0.75);
background: #000\9;
```

这段代码的意图是这样的:第一条声明是我们理想的样式,写给标准浏览器;第二条声明是专门写给 IE 的 CSS hack,因为只有 IE 浏览器才能识别这一行,所以在 IE 下这个元素的背景色就是黑色的了。

听起来似乎很有道理,现实中也有很多代码就是这样写的,但它存在一些明显的缺陷:

* 首先,第二行代码命中的是 “IE 浏览器”,但实际上我们应该命中那些 “不支持 RGBA 的浏览器”。虽然从现状上来说,这两个集合的重合度相当高,但代码的作用和我们的实际意图不符,这是一个不小的问题。

* 此外,这种回退样式的写法在 IE6、7、8 当道的年代还算说得通,但当 IE9+ 出现之后就站不住脚了。因为 IE9+ 一方面是支持 RGBA 的,另一方面又可以识别第二条声明,最终导致 IE9+ 也把元素显示为纯黑背景(它本可以显示出我们理想的效果)。在这里我们也可以看出 CSS Hack 的脆弱之处——没有人能对它的未来兼容性提供担保。

我们不妨换个思路,其实 CSS 有一项非常重要的 “向前兼容” 机制——当浏览器遇到无法识别的某行声明时,并不会报错或中止解析,只是默默地忽略它而已。(实际上 CSS Hack 之所以会起作用,也是利用了这个机制。另外,当浏览器遇到无法识别的选择符时,会忽略整条规则。)

因此,正确的代码组织方式应该是先写 “回退样式”,再写 “理想样式”:

```stylus
background: #000;
background: rgba(0,0,0,0.75);
```

这种写法更像是具备了 “特性检测” 的功效:不支持 RGBA 的浏览器不识别第二条声明,因此只有第一条会生效;而对于支持 RGBA 的浏览器来说,它们可以同时识别这两条声明,但由于第二条声明的权重更高,这些浏览器最终将显示出半透明的效果。

> <sup>(插图来源:取自 @Justineo 的 GitHub-HoverCard 项目)</sup>
* [如何正确编写 Fallback 样式](https://github.com/cssmagic/CSS-Secrets/issues/82)
39 changes: 39 additions & 0 deletions notes/featured/102.fallback-style.md
@@ -0,0 +1,39 @@
---
title: "[注解·加强版] 如何正确编写 Fallback 样式"
---

在浏览器特性参差不齐的大环境下,“渐进增强” 与 “平稳退化” 是一种务实的策略。因此,在编写华丽样式的同时,我们还需要想好退路,为功能较弱的浏览器提供 fallback(回退样式)。

总的来说,我们应该利用 CSS 自身的机制来组织回退样式,而不是依赖 CSS hack 来实现。

![rgba-black](https://cloud.githubusercontent.com/assets/1231359/14772958/a0e504ca-0ad6-11e6-9d43-ccb4fe0da42c.jpg)

举个例子,设计师要求某个元素的背景色显示为半透明的黑色(如上图所示)。但我们都知道,低版本 IE 等浏览器并不支持 RGBA 颜色,因此对于这些浏览器,我们需要将它的背景色设置为最接近设计意图的纯黑色。那么在这里,半透明黑色是我们期望的 “理想样式”,而纯黑色则是用来兜底的 “回退样式”。

在搞清楚状况之后,我们很快写出了下面的代码:

```stylus
background: rgba(0,0,0,0.75);
background: #000\9;
```

这段代码的意图是这样的:第一条声明是我们理想的样式,写给标准浏览器;第二条声明是专门写给 IE 的 CSS hack,因为只有 IE 浏览器才能识别这一行,所以在 IE 下这个元素的背景色就是黑色的了。

听起来似乎很有道理,现实中也有很多代码就是这样写的,但它存在一些明显的缺陷:

* 首先,第二行代码命中的是 “IE 浏览器”,但实际上我们应该命中那些 “不支持 RGBA 的浏览器”。虽然从现状上来说,这两个集合的重合度相当高,但代码的作用和我们的实际意图不符,这是一个不小的问题。

* 此外,这种回退样式的写法在 IE6、7、8 当道的年代还算说得通,但当 IE9+ 出现之后就站不住脚了。因为 IE9+ 一方面是支持 RGBA 的,另一方面又可以识别第二条声明,最终导致 IE9+ 也把元素显示为纯黑背景(它本可以显示出我们理想的效果)。在这里我们也可以看出 CSS Hack 的脆弱之处——没有人能对它的未来兼容性提供担保。

我们不妨换个思路,其实 CSS 有一项非常重要的 “向前兼容” 机制——当浏览器遇到无法识别的某行声明时,并不会报错或中止解析,只是默默地忽略它而已。(实际上 CSS Hack 之所以会起作用,也是利用了这个机制。另外,当浏览器遇到无法识别的选择符时,会忽略整条规则。)

因此,正确的代码组织方式应该是先写 “回退样式”,再写 “理想样式”:

```stylus
background: #000;
background: rgba(0,0,0,0.75);
```

这种写法更像是具备了 “特性检测” 的功效:不支持 RGBA 的浏览器不识别第二条声明,因此只有第一条会生效;而对于支持 RGBA 的浏览器来说,它们可以同时识别这两条声明,但由于第二条声明的权重更高,这些浏览器最终将显示出半透明的效果。

> <sup>(插图来源:取自 \@Justineo 的 GitHub-HoverCard 项目)</sup>

0 comments on commit 4856aae

Please sign in to comment.