《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.5　CSS3及其他

本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第1章，第1.5节，作者：【英】Peter Gasston，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5 CSS3及其他

正如HTML5对应HTML4.01一样，CSS3对应的是CSS2.1。CSS3是对一些现有CSS2.1功能进行标准化的进化迭代；因为在不同浏览器中，这些功能的执行会略有差异。另外，在这个网络发展的新时代，网络浏览器可以被嵌入任何设备，所以CSS3还引入了一套全新的功能，使得CSS能符合新时代的要求。

改造浏览器的第一类CSS3功能在很大程度上是视觉效果上的，并且，这些功能基于开发人员已经使用多年的编辑程序：使用任何来源的字体、圆角，并在文本和框上放置阴影。登录之后是一系列新的选择器，这些选择器能使文件寻访式样变得更容易；此外，它们能产生更动态的效果，如2D和3D的转换以及过渡动画。

除了许多光彩夺目的视觉效果，CSS3的真正革命来自于媒体查询。媒体查询是一种语法，使用这种语法，就可以根据浏览器的尺寸和功能，为浏览器提供样式，这是迈向多设备式样的第一步。第3章会讲到媒体查询，还会讲到CSS的一系列其他属性，这些属性对于创建响应式和适应式网站非常有用。

CSS还面临另一个重大挑战：如何解决布局的问题—即要使布局能够真正具备支持被用户代理查看的功能。这些功能包括动态用户界面属性和CSS控制网格系统。在第4章中会有更多相关内容。

不同于CSS2.1，CSS3不是一个单一的规范。在CSS2.1中，一切都放在同一个文档里描述，这种行为导致了文档太大且太复杂。相反，CSS3是模块化的，它是一系列更短更特定的规范，可以由浏览器通过模块化的方式来实现。和使用HTML5一样，如果打算等到CSS3“准备就绪”再使用它，那这种想法就太愚蠢了，因为某些模块将会很快就绪并实现，而另一些模块需要等待很长的时间。

CSS模块有级别数字，这些数字可以显示它们经历了多少迭代；有些模块已经到了级别4，这些级别4模块的可以先于级别3的模块实现。然而，这并不意味着，有一天我们会迎来CSS4。这种情况是不可能发生的。因为CSS3是一个简称，它表示“任何比CSS2.1更新颖的东西”，总有一天，这种区别将被摒弃，一切都将只是CSS。

1.5.1 供应商特定前缀

当浏览器以实验或予标准的方式来实现功能时，为了能确保安全，避免兼容性问题，浏览器往往使用带有规范化属性名称的供应商特定前缀。例如，当CSS Apes模块提出了名为“gorilla”的新属性，Firefox和WebKit都在对这种新属性进行稍有差别的实验性的实现。可是，新属性在两个浏览器中产生的效果是不同的，所以，如果Firefox和WebKit都使用该属性名称时，通常会在属性名称前加上供应商前缀以避免一些潜在的冲突：

供应商特定前缀本是一个伟大的想法，但事实上，情况变得有些混乱。和其他方面问题一样，一些前缀的属性被开发人员如此广泛地使用，以至于其他浏览器厂商也感觉有必要使用它们竞争对手的供应商前缀，这样做很公平，但却让整件事变得有些荒谬。

浏览器厂商正试图让这个系统处于他们的掌控之中，但有时，使用供应商前缀属性会难以避免。大多数情况下，在我的代码示例中，我都使用无前缀属性。

1.5.2 CSS框架和预处理器

如今，使用一些帮手为CSS开发助一臂之力，成为了非常时髦的事儿，尤其是致力于大型开发团队或是大项目的时候。通常，这些帮手以框架或预处理器的形式参与进来，并且往往两者同时参与CSS开发。

框架是一套预先定义的CSS规则，使用这些规则可以使开发更快速。它们通常包括版式和窗体，很多时候，还包括布局模式。Blueprint.css是一种非常珍贵的老框架，被用于许多知名网站；但目前流行的框架是Twitter推出的Bootstrap。Bootstrap提供了许多预先格式化的布局、排版和表单选项，以及一系列可重用的组件，甚至还提供JavaScript的扩展性。

预处理器是运行于服务器端的程序，它使用CSS类语言来提供扩展语法和简写语法；因为CSS类语言在生成时，可转变成正确格式化样式表。这些扩展不但有节省时间的功能，如变量和嵌套的规则；而且还有自定义功能，它们赋予用户难以置信的权力。在预处理器竞争中，Sass最受欢迎，而LESS紧跟其后，成为前者最主要的竞争对手。

虽然在现代网络开发中，框架和预处理器两者都有各自不同的作用，但在本书中，我不会讨论或使用它们。因为，我教授的是更基本的语言，同时也是它们两者所依赖的语言。

侧边导航栏（抽屉式设计）界面 (html + css) 写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。