详情
本书正是用来帮助Web设计师拥抱Web的灵活性，并使用现在就能起作用的那些CSS技术。本书包含了15篇文章，包含了许多专家提供的各类有用的技术、技巧和指南，涉及了CSS布局、响应式Web设计、CSS文字排版、CSS跨浏览器兼容性及其它的高级CSS技术。
书名：众妙之门——精通CSS3
ISBN：978-7-115-31269-3
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [德]Smashing Magazine
译 李景嫒 吴晓嘉
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
德国知名博客Smashing Magazine。长期关注Web设计与开发方面的热点。来自全球的顶级设计师和开发人员都在Smashing Magazine上发表文章。
本书特色
Mastering CSS for Web Developers
Copyright © 2009 by Smashing Media GmbH
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, by photocopying, recording or otherwise, without the prior permission in writing from Smashing Media GmbH.
CHINESE SIMPLIFIED language edition published by POSTS & TELECOM PRESS Copyright ©2013.
本书中文简体版由德国Smashing Media公司授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。
版权所有，侵权必究。
本书所介绍的内容是知名网页设计网站Smashing Magazine上关于CSS专题的知识及经验的分享。书中的文章都是全球知名设计师的精华总结，可以帮助网页设计师们充分体验网页设计的灵活性，并使用那些令人炫目的CSS技术。本书共分为14章，包含了许多资深网页设计师提供的各类有用的技术、技巧和指南，内容涉及CSS布局、响应式网页设计、CSS字体排版、CSS跨浏览器兼容性及其他的高级CSS技术。
本书最大的价值在于其结合大量实例，以生动的方式，详细阐述了CSS的相关知识。相信广大读者读完这本书之后，一定会有一种相识恨晚的感觉。
许多网页设计师不能很好地接受CSS3或HTML5之类的新技术，究其原因，就是他们认为这些技术对跨浏览器还缺乏全面的支持。很多人都在抱怨这种情况使得他们在工作中束手束脚、裹足不前。
但全面地对跨浏览器提供支持的技术并未真正地出现，当然也就不可能引领我们进入一个全新的网页时代，这使得我们的设计在每一个网页浏览器里看上去都相差无几。并且，一些用户仍然愿意使用老的浏览器，有一些用户还会禁用浏览器的JavaScript和图片。有时候，我会觉得我们在设计中并不是真的缺少提供跨浏览器兼容的能力，而是我们不愿花精力去学那些可以显著改进我们工作的新技术。
本书正是用来帮助网页设计师充分体验网页的灵活性，并使用现在就能起作用的那些CSS技术。本书分为14章，包含了许多专家提供的各类有用的技术、技巧和指南，内容涉及CSS布局、响应式网页设计、CSS字体排版、CSS跨浏览器兼容性及其他的高级CSS技术。
Thomas Burkert
Smashing Magazine
Zoe Mickley Gillenwater
现在到了创建CSS布局的激动时刻了！为了兼容那些老式浏览器，多年来我们一直在使用老的技术，现在，我们终于看到浏览器实现了CSS3、HTML5和其他一些技术，为我们的设计提供了非常酷的新手段和新技巧。
但我们面对所有这些变化的时候，也会有一定的压力。如何才能跟得上这些新技术，确保我们的网页在越来越多的浏览器和设备上都有良好的展现？在本文的第一部分，我们将学习成功的现代CSS网站所具备的5个重要特征。在本文的第二部分，我们将学习网站要具备这些特征所需的技术和工具。
我们不会去讨论体现出现代CSS布局特征的设计趋势和风格。反之，我们将深入地关注一种更为普遍的理念，就是如何用最新的技术去创建最成功的CSS布局。例如，把内容和展现进行隔离仍然是CSS网页设计中的基本原则，但现代的CSS网页还是有一些不同于以往并且更为重要的新特性。一个基于CSS的现代网站应当是：渐进式的增强、适应不同的用户、模块化、高效率以及丰富的字体排版。
渐进式的增强即意味着我们可以创建一个可靠的页面，对其中的内容以恰当的方式进行标记，同时也为这个页面添加了高级的样式（也有可能是添加了脚本处理），使得各种浏览器都可以进行处理。这样做使得网页可以被所有的浏览器使用，但看起来却未必是一模一样的。使用高级浏览器的新用户可以因此而看到更酷的视觉效果，也能够体验到更出色的可用性。
允许一个设计在不同的浏览器上有不同展现，这其实并不是一个新的理念。因为字体可用性、渲染、色调、像素计算等一些技术因素在不同的浏览器和平台上本来就是变化多端的，所以CSS的导师们多年来一直在为这种理念进行布道。许多的网页设计师在设计中会避免使用“精确的像素”，他们的设计在不同的浏览器上存在些许差异也是能够接受的。但如果他们利用过去几年来逐步流行的渐进增强的CSS布局特性，也许可以在这方面再往前迈出一步。实现了渐进增强的设计在不同的浏览器上也许不仅仅是略有差异，它们看起来可能有天壤之别。
例如，tweetCC网站（http://tweetcc.com/）使用了许多CSS3属性来增加一些极具吸引力的视觉化效果，如文本后面的阴影、多栏文本和不同颜色背景“图片”（实际上不需要不同的图片）。这些效果在不同浏览器上似乎不太一样，如在IE6这样的老式浏览器上看起来就是最“朴素”的。然而，即便是在IE6中，这些文本也有很好的可读性，整个设计同样具备非常好的可用性。
tweetCC（http://tweetcc.com/）在Safari浏览器中的显示效果
tweetCC（http://tweetcc.com/） 在IE 6中的显示效果
在支持CSS3的浏览器中，如Safari，tweetCC（http://tweetcc.com/）网站会出现一些在IE6中见不到的视觉效果。
这种存在于浏览器之间的独特差异是非常好的事情，这不仅是因为这应当就是网页的内在本质，更重要的是，这种渐进式的增强能给我们带来以下好处。
我们不是使用功能削减的方法去创建一个在各种浏览器上都完全正常的页面，使页面提供对低级的浏览器向后兼容的能力，采用渐进增强的设计，我们的关注点是先创建出一个在所有浏览器上都能正常工作的“基本”页面。
我们首先打造一个确保最基本的功能和样式对所有人而言都一致的页面。使用老式浏览器、移动设备和辅助技术的用户，会因为一种简洁、可靠而运转良好的页面设计而感到高兴；用最新和最好的浏览器的用户也同样会得到一种丰富的、精雕细琢的体验。
我们不用花很多的时间让我们的设计在所有浏览器上看起来都很好，并且都是一模一样的。对于一个完成了全部功能和样式的设计版本，我们也无需为了让页面在老一些的浏览器上工作而花很多时间去进行逆向工程（如同使用削减功能的设计方法）。
一旦有新的浏览器或新的技术出现，我们就能够把新的特性添加上去，而不需要去改变或分解存在的特性。我们只需要对唯一的一份页面或代码的基础版本进行升级，而不需维护多个版本（就像使用削减功能的设计方法那样）。
我们会因为在网页页面上能够用上很酷和极具创新的新技术而充满乐趣，无需耗上多年去等待那些老式浏览器被淘汰。
现代基于CSS的网页能够广泛地适应各种浏览器、设备、屏幕分辨率、字体大小、辅助技术和其他一些用户所特有的需求。这不是一种新的理念，但随着网页用户多样化程度越来越高，这种理念正变得越来越重要。例如，几年以前，我们数数手指头就知道用户使用的不外乎就是那么两三种屏幕分辨率。现在呢，用户访问页面的时候可能会使用10寸的笔记本、30寸的宽屏显示器或任何介于这两者之间的显示尺寸，更别提那些小的移动设备了。
在Soh Tanaka的文章《Smart columns with CSS and jQuery》（《使用CSS和jQuery实现灵活的列》）中，他描述了一种基于当前浏览器窗口进行布局适应的技术
创建一个网页设计，使其对所有的用户在各种场景都能适用从来就是不可能的事情。但无论如何，如果我们能够取悦更多的用户，无论是对客户抑或我们自己，都是一件更好的事情。随着用户访问网页的方式的多样性越来越高，现今成功的CSS布局一定要比以往更加的灵活，适应性也要更强。
在创建CSS布局的时候我们要考虑的因素有：
设计在当前大多数的主流浏览器上是否是可用而又引人注目的？在老式浏览器上是不是至少是可用的？
我们的设计在PC、Mac和Linux的机器上是不是都是可用的？
我们的设计能不能适应低分辨率的移动设备？在有全分辨率的移动设备（例如iPhone）上看起来如何？
我们的设计在多种视口（viewport，例如窗口）宽度下还能保持一致吗？在不同的宽度下仍然是引人注目且易于阅读的吗？设计是否能适应不同的视口宽度？在极窄或极宽的情形下还是正确的吗？（例如：通过使用min-width和max-width属性进行调整）
我们的设计能适应不同的默认字体尺寸吗？当字体尺寸不断改变的时候我们的设计会不会变得乱七八糟？在不同的字体尺寸下设计还是引人注目且易于理解的吗？
在黑白颜色下，设计还是有意义的并且内容还是可读的吗？如果用户是色盲或者弱视或者色弱的话，我们的设计还能起作用吗？
页面在没有JavaScript的情况下还正常吗？
在没有图片（不管是背景还是前景）的情况下内容仍然是有意义的并且是可读的吗？
当使用屏幕阅读器的时候，页面还起作用吗？无法使用鼠标的时候又会怎么样？
以上这些不是一份专业的综合测验列表。也就是说，我们不可能让设计都能适应上述的每一个变化。但这些问题解决得越多，我们的网站对用户就会更加友好、更加稳健，也会更加成功！
现代网站不再是一堆静态页面的集合。对于一个现代网站来说，其内容块和设计组件应当可以在整个网站内重用，甚至在不同的网站之间共享，如CMS（内容管理系统）、RSS聚合和越来越受喜爱的用户生成内容（user-generated content）。现代的设计组件必须能适应不同的使用方式，并适应它们所包含的不同类型和数量的内容。
Object Oriented CSS（面向对象的CSS， http://wiki.github.com/stubbornella/oocss）是Nicole Sulivan尝试创建的一个框架，它使得开发者可以写出性能良好的、可维护的、基于标准的、模块化的前端代码
模块化的CSS，从广义上讲，就是被分解的独立工作的CSS块，用来创建能被单独重用的设计组件。这意味着可以把设计样式分割到多个样式表中，例如layout.css、type.css和color.css；这也意味着我们可以为表单布局创建一系列通用的CSS类，而这些类可以应用到网站的任何表单上，而不是为每一个表单都单独地进行样式化。CMS、框架、布局网格和其他一些工具都可以帮助我们创建更加模块化的网页。
模块化CSS有以下好处（取决于使用的工具和技术）：
如果网站的所有内容都仅用少量的CSS类，而不是使用大量的只针对特定页面的特定内容片断的CSS ID标签就可以完成样式化，样式表的冗余代码就会变得更少。
使用框架、标准的类和其他模块化的CSS工具，可以让你在开始设计一个新网站时，避免重新发明轮子。使用我们自己或其他开发者经过检验且证明可靠的CSS类，可以减少在不同的浏览器上测试和调校的时间。
当样式表中包含了可以在网站上普遍重用的类时，一旦我们需要添加新的内容，就不用再去创建新的样式了。同样，如果CSS代码是精简的，并且有良好的组织，一旦网页在浏览器中弹出bug时，我们在样式表中定位问题的时间就会大大减少。
除了维护时花的时间更少以外，安排有序的CSS代码和命名巧妙的CSS类同样会让那些最初没有参与到样式表开发中的开发者更容易去维护。他们会更容易地找到所需的类并去使用它。使用了CMS及其他一些框架的设计也可以让那些对我们的网站不熟悉的人轻易地去升级维护，而不会把事情弄糟。
框架和布局网格可以让设计变得容易，例如，可以在不同的页面间切换应用不同的布局类型，或者在一个页面内插入不同类型的内容（http://24ways.org/2008/making-modular-layout-systems）。
通过重用相同的类并避免基于特定位置的样式化，可以保证整个网站内所有相同类型的元素都有一致的风格。应用CMS和框架的网站能够更好地保证设计的一致性。
高效率
现代基于CSS的网站的高效率表现在两个方面：
开发上更有效率；
服务器和浏览器处理用户的页面展现会更有效率。
作为网页开发者，我们都承认在开发时有较高的效率是件好事。如果我们能节省时间，却仍然有高质量的工作，我们还有什么理由不采用更加高效的CSS开发实践呢？虽然创建高效运行的页面有时并不能引起用户足够的关注，但即便是网络的连接速度变得越来越快，页面加载时间对用户来说仍然是极为重要的。事实上，随着网速的提高，用户会更希望所有的页面都能非常快地完成加载。所以，确保网站的运行速度能够跟得上网速是非常重要的，仅仅是把页面的加载时间减少几秒钟，也会大有不同。
我们已经讨论了模块化的CSS如何减少开发和维护时间，让我们的工作流程更快、更有效率。现在我们可以借助很多工具来更快地编写CSS代码，在这篇文章的第二部分会有所涉及。通过使用CSS3提供的新效果，CSS的开发过程可以变得更加流畅，这将减少在创建图形和增强代码可用性方面所花费的时间。
一些CSS3技术也有助于提高性能和速度。例如，对于一个方框，传统的圆角技术需要多张图片和DIV标签来配合实现。但使用CSS3去创建圆角根本就不需要图片，这样可以减少对服务器HTTP的调用，让页面加载变得更快。不需要图片同样可以减少用户需要下载的字节数，提高页面加载时间。在CSS3中实现圆角也不再需要多个DIV标签来嵌套，这将减少页面文件的大小并再次提高页面加载速度。仅仅是因为圆角而切换到CSS3上来，就可以大幅提升网站的性能，特别是在网站上每一个网页都有许许多多圆角方框的时候。
利用缩写属性、组选择器和其他有效的语法来编写简洁的CSS代码对于改善页面性能来说，和以往同样重要。许多令基于CSS的页面加载得更快的高级技巧，在CSS3中无论是用途还是重要性方面都有所增加。例如，CSS Sprites技术（http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/）仅仅借助于一个文件，通过使用CSS的background-position属性就能分隔并显示出许许多多的小图片。这项技术最早在2004年由Dave Shea（http://www.alistapart.com/articles/sprites/）提出，并从那时起就不断地改进并且加入了大量的内容。许多大的企业网站现在已经严重地依赖这项技术来减少HTTP的请求数,而这项技术也能给在小网站工作的人带来有效的改进。CSS压缩技术变得越来越常用，用一些自动化的工具去压缩和优化CSS可以说是一件轻而易举的事情，我们将在本文的第二部分学习这些内容。
丰富的字体排版技术跟刚刚提到的四个概念看上去似乎有点不相称。但这里并不是要讨论任何排版或字体的特殊样式，而是谈一些更加广泛的概念，即通过应用一些经检验可靠的排版原理，去使用最新的技术来创建可读性强却又具有独特外观的文本。字体排版是当前网页设计发展得最快的领域之一。其实，网页设计领域也确实该发展发展了！网页设计师用图形来表达他们的设计时很少有限制，但对于字体排版，这种限制却是明显并且令人沮丧的。
直到最近，网页设计师还会受到他们的最终用户机器上的字体的限制。在过去的几年中，图片替代技术和诸如sIFR（http://wiki.novemberborn.net/sifr3/）等更加灵巧的技术已经给我们带来了新的可能，但这些技术没有一种是简单易用的。在过去的一年中，由于对CSS3中@font-face规则支持的增多，在网页上进行文字印刷的可能性大大地提高了，就像Cufón（http://cufon.shoqolate.com/generate/）和Typekit（http://blog.typekit.com/）网站提供的易于使用的新技术和服务一样。
@font-face规则允许网站去连接服务器上的字体，叫做“Web font”（网页字体），就像我们连接到服务器上的图片一样。这样设计时就不用局限于使用大多数人在机器上安装的字体了，我们能够利用以前梦寐以求的那些漂亮、独特的字体来做设计。
Craigmod（http://www.teehanlax.com/labs/projects/fontface/）
Nicewebtype网站
以上几个截图（http://nicewebtype.com/fonts/museo-and-sans/）都是应用@font-face的例子
使用@font-face的主要问题，除了之前提到的浏览器兼容性（http:// a.deveria. com/ caniuse/#feat=fontface）问题外，主要是大多数的字体许可证——甚至是那些免费的字体——是不允许通过网页来提供的。这就是如Typekit（http://blog.typekit.com/）、Fontdeck（http://fontdeck.com/）和Kernest这类网站要介入@font-face服务的原因。他们和字体设计师一起为网页设计，以一种“租赁”的原则，为一些精选的字体颁发许可证。这种基于订阅的服务让我们为网站设计而去租用字体，可以使用更多的字体，却又可以避免许可证的问题。
For A Beautiful Web（http://forabeautifulweb.com/）网站的网站名、介绍文本和标题都使用了Typekit提供的字体嵌入服务（http://blog.typekit.com/）。
Ruler of the Interwebs网站（http://ruleroftheinterwebs.blogspot.com/）在名称和标题上使用了Kernest提供的字体嵌入服务
我们仍然有很长的路要走，但可能出现的新事物使得字体排版对网页设计而言比以往更为重要。我们将在第二部分对如何使用现代的字体排版技术进行更深入的介绍，以使我们的设计真正地引人瞩目。
我们已经学习了现代CSS网站的五个特征：
在第二部分，我们将介绍如何在基于CSS的网站页面上实现这些重要特征的技术和工具。
