{"action":"created","issue":{"url":"https://api.github.com/repos/cssmagic/CSS-Secrets/issues/30","repository_url":"https://api.github.com/repos/cssmagic/CSS-Secrets","labels_url":"https://api.github.com/repos/cssmagic/CSS-Secrets/issues/30/labels{/name}","comments_url":"https://api.github.com/repos/cssmagic/CSS-Secrets/issues/30/comments","events_url":"https://api.github.com/repos/cssmagic/CSS-Secrets/issues/30/events","html_url":"https://github.com/cssmagic/CSS-Secrets/issues/30","id":150556520,"number":30,"title":"[注解] [102] CSS 编码技巧","user":{"login":"cssmagic","id":1231359,"avatar_url":"https://avatars.githubusercontent.com/u/1231359?v=3","gravatar_id":"","url":"https://api.github.com/users/cssmagic","html_url":"https://github.com/cssmagic","followers_url":"https://api.github.com/users/cssmagic/followers","following_url":"https://api.github.com/users/cssmagic/following{/other_user}","gists_url":"https://api.github.com/users/cssmagic/gists{/gist_id}","starred_url":"https://api.github.com/users/cssmagic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cssmagic/subscriptions","organizations_url":"https://api.github.com/users/cssmagic/orgs","repos_url":"https://api.github.com/users/cssmagic/repos","events_url":"https://api.github.com/users/cssmagic/events{/privacy}","received_events_url":"https://api.github.com/users/cssmagic/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cssmagic/CSS-Secrets/labels/%E6%B3%A8%E8%A7%A3","name":"注解","color":"006b75"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-04-23T13:44:35Z","updated_at":"2016-04-26T14:03:52Z","closed_at":null,"body":"## 经验分享\r\n\r\n#### 如何正确编写 Fallback 样式\r\n\r\n在浏览器特性参差不齐的大环境下，“渐进增强” 与 “平稳退化” 是一种务实的策略。因此，在编写华丽样式的同时，我们还需要想好退路，为功能较弱的浏览器提供 fallback（回退样式）。\r\n\r\n总的来说，我们应该利用 CSS 自身的机制来组织回退样式，而不是依赖 CSS hack 来实现。\r\n\r\n![rgba-black](https://cloud.githubusercontent.com/assets/1231359/14772958/a0e504ca-0ad6-11e6-9d43-ccb4fe0da42c.jpg)\r\n\r\n举个例子，设计师要求某个元素的背景色显示为半透明的黑色。但我们都知道，低版本 IE 等浏览器并不支持 RGBA 颜色，因此对于这些浏览器，我们需要将它的背景色设置为最接近设计意图的纯黑色。那么在这里，半透明黑色是我们期望的 “理想样式”，而纯黑色则是用来兜底的 “回退样式”。\r\n\r\n在搞清楚状况之后，我们很快写出了下面的代码：\r\n\r\n```stylus\r\nbackground: rgba(0,0,0,0.75);\r\nbackground: #000\\9;\r\n```\r\n\r\n这段代码的意图是这样的：第一条声明是我们理想的样式，写给标准浏览器；第二条声明是专门写给 IE 的 CSS hack，因为只有 IE 浏览器才能识别这一行，所以在 IE 下这个元素的背景色就是黑色的了。\r\n\r\n听起来似乎很有道理，现实中也有很多代码就是这样写的，但它存在一些明显的缺陷：\r\n\r\n* 首先，第二行代码命中的是 “IE 浏览器”，但实际上我们应该命中那些 “不支持 RGBA 的浏览器”。虽然从现状上来说，这两个集合的重合度相当高，但代码的作用和我们的实际意图不符，这是一个不小的问题。\r\n\r\n* 此外，这种回退样式的写法在 IE6、7、8 当道的年代还算说得通，但当 IE9+ 出现之后就站不住脚了。因为 IE9+ 一方面是支持 RGBA 的，另一方面又可以识别第二条声明，最终导致 IE9+ 也把元素显示为纯黑背景（它本可以显示出我们理想的效果）。在这里我们也可以看出 CSS Hack 的脆弱之处——没有人能对它的未来兼容性提供担保。\r\n\r\n我们不妨换个思路，其实 CSS 有一项非常重要的 “向前兼容” 机制——当浏览器遇到无法识别的某行声明时，并不会报错或中止解析，只是默默地忽略它而已。（实际上 CSS Hack 之所以会起作用，也是利用了这个机制。另外，当浏览器遇到无法识别的选择符时，会忽略整条规则。）\r\n\r\n因此，正确的代码组织方式应该是先写 “回退样式”，再写 “理想样式”：\r\n\r\n```stylus\r\nbackground: #000;\r\nbackground: rgba(0,0,0,0.75);\r\n```\r\n\r\n这种写法更像是具备了 “特性检测” 的功效：不支持 RGBA 的浏览器不识别第二条声明，因此只有第一条会生效；而对于支持 RGBA 的浏览器来说，它们可以同时识别这两条声明，但由于第二条声明的权重更高，这些浏览器最终将显示出半透明的效果。\r\n\r\n> <sup>（插图来源：取自 @Justineo 的 GitHub-HoverCard 项目）</sup>\r\n\r\n## 花絮与注解\r\n\r\n#### 第 10 页 · 第三段\r\n\r\n> 举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用 `inherit` 的特性即可\r\n\r\n“表单元素” 指的是输入框、按钮等元素。\r\n\r\n为什么要把表单元素的字体设定为 “与页面的其他部分相同”？为什么表单元素不能自动从祖先元素那里继承字体样式？这是因为在浏览器的默认样式中，通常已经给表单元素指定了字体样式。当一个元素自身已经指定某个属性之后，就无法从祖先元素那里继承了。\r\n\r\n#### 第 12 页 · 最后一行\r\n\r\n> ——在 Iterations 中实践响应式设计\r\n\r\nIterations 是 Basecamp 公司的一个内部管理工具。\r\n\r\nBasecamp 公司原来叫做 37signals，从 2014 年开始改为现在的名字。Basecamp 原来是这家公司的主打产品的名字，后来当产品的名气远远超过公司名气的时候，公司改名也就是顺理成章的事情了。\r\n\r\n\r\n## 交流与答疑\r\n\r\n（暂无）\r\n"},"comment":{"url":"https://api.github.com/repos/cssmagic/CSS-Secrets/issues/comments/214755788","html_url":"https://github.com/cssmagic/CSS-Secrets/issues/30#issuecomment-214755788","issue_url":"https://api.github.com/repos/cssmagic/CSS-Secrets/issues/30","id":214755788,"user":{"login":"yisibl","id":2784308,"avatar_url":"https://avatars.githubusercontent.com/u/2784308?v=3","gravatar_id":"","url":"https://api.github.com/users/yisibl","html_url":"https://github.com/yisibl","followers_url":"https://api.github.com/users/yisibl/followers","following_url":"https://api.github.com/users/yisibl/following{/other_user}","gists_url":"https://api.github.com/users/yisibl/gists{/gist_id}","starred_url":"https://api.github.com/users/yisibl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yisibl/subscriptions","organizations_url":"https://api.github.com/users/yisibl/orgs","repos_url":"https://api.github.com/users/yisibl/repos","events_url":"https://api.github.com/users/yisibl/events{/privacy}","received_events_url":"https://api.github.com/users/yisibl/received_events","type":"User","site_admin":false},"created_at":"2016-04-26T14:03:52Z","updated_at":"2016-04-26T14:03:52Z","body":"不错，减少 hack。"}}