深入了解CSS3
引言
在开始使用CSS3前，你应该了解它是什么，为什么要用和如何使用。在本章，你将了解到CSS3和CSS2.1的不同之处，以及浏览器已经支持的标准。针对那些还没有达到期望,即完全支持CSS3的浏览器，我们会学习到一些临时措施和模拟CSS3的办法。你还能知道立刻在项目中实践CSS3的好处，还有说服那些仍抱有疑虑的客户或管理层的大量理由(这可不是论据)。最后，我们会通过渐进增强的方式设计,及最佳实践来学习CSS3,尽可能达到健壮和可扩展。
go over的翻译存在问题，但想不到特别适合的词
what is css3?
CSS3
is an extension of CSS 2.1 that adds powerful new functionality， but it’s no longer a
single specification. Instead， it’s been divided up into several modules. Each module is a standalone specification
for a subsection of CSS， like selectors， text， or backgrounds. Every module has its
own set of authors and its own timetable. The advantage of this is that the
entire CSS3 specification doesn’t have to be held up waiting for one little bit
to get worked out—the module that that little bit is in can wait， while the rest moves forward.
什么是CSS3
CSS3是基于CSS2.1的升级，增加了很多强大的功能，但它已经不在单一标准。换而言之，它已经被分成了几个模块。每个模块都是一份独立的CSS子集标准，像选择器，文本或者背景等。每个模块都有相应的编者群和时间表，这样做的好处就是整份CSS3标准不必因为任何轻微问题得不到解决而停滞，也就是说，除了有问题的模块需要等待，其余的都可以继续发展。
move forward的翻译可以更好
You
can see a list of all the modules， plus their current status on the path towards being finalized， at www.w3.org/Style/CSS/current-work. We’ll
discuss the status of these modules later in this chapter， but for now let’s get right into what’s new and exciting in CSS3.
你可以通过www.w3.org/Style/CSS/current-work这个地址查看所有模块列表,其中包括了推广前所处于不同阶段的状况。本章我们将会讨论这些模块的状况，不过在此之前，让我们先看看CSS3带来了什么令人激动的新特性。
finalized翻译成实际状态推广是否合适?
overview of what’s new
Much
of CSS3 is a repeat of CSS 2.1， of course. But there are many
additions
and revisions. What follows isn’t an exhaustive list of differ-
ences—there
are far too many changes to list here—but an overview of
the
best-supported， popular， and useful changes to CSS from level 2.1
to
level 3.
了解新功能：
大部分CSS3显然是继承于CSS2.1，但有大量的增补和修订。由于太多的新功能不能一一罗列，本书在随后内容不能提供详尽的列表，但会让你大致了解那些是从版本2.1到版本3都受到浏览器支持最好，最受欢迎，最有用的。
将change翻译成新功能
l Image-free visual effects. CSS3 contains a lot of new properties
that allow you to create visual effects that previously could be accomplished
only with images (or sometimes scripting)， such as rounded corners， drop shadows， semitransparent backgrounds， gradients， and images for borders. Many of these new properties are in the
Backgrounds and Borders module; others are in the Colors and Image Values
modules. We’ll go over many of these effects in Chapter 2， and use them again in later chapters.
l 非图片式的视觉特效。CSS3包含了大量新属性，来实现之前只有通过图片或者脚本才能做到的视觉特效，如圆角，阴影，半透明背景，渐变和图片边框等。大部分新属性来自背景和边框模块，其他则来自颜色和图像模块。本书在第二章节会学习这类的大量特效，并在随后章节运用他们。
Images Values翻译成图像是否好
l Box transformations. Another category of visual effects that CSS3
makes possible are those that manipulate the box’s position and shape in two-
or three-dimensional space， such as rotating， scal-ing， or skewing it. These effects are called transforms， and are covered in the 2D Transforms and 3D Transforms modules.
You’ll learn about transforms in Chapter 2.
l 弹性盒模型。不管是控制盒子容器位置,还是用旋转，缩放或倾斜等改变其二维或三维外观，有一类CSS3视觉特效都能实现。这种称之为变形的特效由2D变形和3D变形模块提供。你可以在第二章节学习到变形。
l Unique fonts.
The Fonts module introduces the @font-face rule that allows you to link to a
font file on your server and use it to display the text on your page， instead of being limited to the fonts on your
users’ machines. This makes beautiful typography so much more attainable.
You’ll learn about @font-face in Chapter 3.
l 嵌入字体。字体模块提供了@font-face这个规则，让你可以使用在服务器的字体库来显示网页文本,进而摆脱字体必须依赖用户系统的限制。使用好看的印刷字体将成为现实。你可以在第三章学习到@font-face
Unique fonts
嵌入字体似乎是网络流行术语
so much more attainable翻译成为现实，合适?
l Powerful selectors. CSS3 introduces over a
dozen new selectors， mostly
pseudo-classes and attribute selectors. They allow you to target specifc pieces
of your HTML without needing to add IDs or classes，
streamlining your code and making it more error-proof.These selectors are
included in the Selectors module， naturally. You’ll
learn about some of them in Chapters 4 and 5.
l 强大的选择器。CSS3提供了一大批新的选择器，大部分是伪类和属性选择器。你就可以不用通过标识或者样式定位到指定的HTML元素，从而优化代码而减低出错的可能性。这些选择器自然包含在选择器模块里。你可以在第四和第五章节学习到其中一些选择器
l Transitions and animations. CSS3 transitions， covered in a module of the same name， are a simple type of animation that allow you to ease the change
from one style on an element to another， such as
gradually and smoothly changing the color of a button when you hover over it.
Full-fledged CSS3 animations， again covered in a module
of the same name， can make more complicated style
changes and movements possible without needing Flash or JavaScript. Both are
covered in Chapter 5.
l 转换和动画。和模块名字一样的转换特性,以简单的动画自然地改变元素外观,例如鼠标滑过按钮时，按钮的颜色平滑的改变颜色。同样和模块名一样的CSS3动画标准一旦完全推广,开发者就可以不通过Flash或者Javascript来实现复杂的外观和位置的变化。你可以在第五章节学习到这两项知识点。
Full-fledged结合上下文翻译成完全推广后
l Media queries. The Media Queries module
introduces syntax for feeding styles based on the capabilities of the user’s
display or device， such as
the viewport width， screen resolution， and how many colors it can display. Media queries are a great tool
for creating mobile-optimized web sites. You’ll learn about them in Chapter 6.
l 媒体查询。媒体查询提供了一个可以根据用户显示器或者设备的性能应用不同样式的规则，例如视窗的宽度，屏幕的分辨率，以及可显色彩范围。它是创建最优移动WEB站点的强大工具。你可以在第六章学习到相关内容。
媒体查询是一种网络流行术语,但似乎不是最优翻译
l Multiple-column layouts. CSS3 introduces a few new modules that make multi-column
layouts easier to create. The Multi-column Layout module deals with flowing the
text of a single block into multiple columns， similar to newspaper layout; we’ll cover
this in Chapter 6. The Flexible Box Layout module deals with making blocks
align horizontally or vertically with each other and making them more flexible
to the available space than floats or positioning can be. There are also more
experimental layout modules called Template Layout and Grid Positioning. We’ll
cover these last three layout systems in Chapter 7.
l 多列布局。CSS3提供一些新模块，可以方便的创建多列布局。在第6章会说明如何通过多列布局模块将一个块状容器的文本由流式渲染变成报纸布局那样多列渲染。灵活的盒子布局模块可以渲染盒子容器成水平对齐或者垂直对齐，让他们比流式布局或者绝对定位更容易适应可用空间。另外还有一些处于试验性质的布局模块如模板布局和网格定位。之前提到的三个布局方式都会在第七章节讨论。
where css3 stands
So
just how soon is all this cool new CSS3 stuff going to be finalized so we can
use it??， I can hear
you asking. As I mentioned before， each module is on
its own timetable， and you can see the status of each
at www.w3.org/Style/CSS/current-work。The table lists the status， usually called a maturity level but sometimes called a stability
status by the W3C， of the current version of the module
as well as the next version， with links to each
document.
CSS3的进展
你可能会有疑问,这些很酷的新特性多久才能全部修订完成并被使用？我之前提到，每个模块都有自己的时间表，你可以通过www.w3.org/Style/CSS/current-work查看当前状况。列表中列出了带文档链接的状况，大部分是较成熟的，有些则是W3C认为已经稳定，不会在下一个版本更改。
The
levels the W3C uses are， from least mature to most mature:
W3C所采用的逐步完善级别
1. Working Draft.
The first publicly available version of the specification， published for review by the community， in order to solicit further changes. A module or specification can
go through several working drafts.
1.
草案。第一份公开发布,并用于开发社区讨论的版本,用于征集意见。一个模块或者一份标准会经过多次草拟。
2. Last Call. A working draft with a deadline
for final comments. It indicates the working group thinks the module does what
it should—though it usually receives significant changes after this point—and
is probably planning to advance it to the next level.
2．最后修订。一份带截止时间，用于最后评审的草案，表明工作组认为这个模块已经达到设计要求。也就是说，即使在这个版本后有重大的变更，也只能在下个版本提出。
3. Candidate Recommendation.
The working group believes the module meets requirements， is stable， and should
be implemented by browsers and put into everyday use by web developers， in order to see how implementable it is. Browsers are allowed to drop
their vendor prefixes. Changes are still possible after this point， but not many and not major.
3.候选推荐.工作组相信:只有符合要求且稳定的模块被浏览器支持,并通过WEB开发者应用进入日常生活，才能证明可行性。浏览器厂商也被允许加入他们的自有前缀。在这版本后,还是有可能有变化的,但是不会频繁和有重要变动。
4. Proposed
Recommendation. A mature， well-reviewed document that has been sent to the W3C Advisory
Committee for final endorsement. There are rarely changes after this point.
4. 提案。一个完善并经过认真复审的文档会被提交到W3C咨询委员会做最后的确认。这版之后就已经极少修改。
5. Recommendation. Complete and finalized.
Normally referred to as a “standard.”
Hopefully
it’s clear from this list that we web developers are not only allowed to use
W3C specifications long before they are complete and finalized Recommendations， but that we are expected to. In fact， if you look at the list on the W3C site，
shown in Figure 1.1， you may notice that only the SVG
module， at the very bottom of the list， is at Recommendation status (at the time of this writing). Even CSS
2.1， which we’ve been using for
many， many years， is still a
Candidate Recommendation， not even a Proposed Recommendation. Thus，
even though it is not a finalized standard， we can use
much of CSS3 now.
5. 推广。修订完成版本,通常就认为这就是标准。但愿我们期望的这个列表能尽快完成，不然网页开发者们就不能在W3C修订完成并推广前使用他们。事实上，当你查看W3C站点上的列表，如图例1.1，会发现仅有在列表最下方的SVG模块已经是处于发布状况(在这本书编写的时候)。就连已经被使用很多年的CSS2.1，也仍然处于候选推荐状态，还不能做为提案。因此，即使这还不是一个最终版本，我们已经使用很多CSS3特性。
Hopefully it’s clear from this list that翻译的质量似乎不是最佳
use css3 now
A
couple of CSS3 modules are at Candidate Recommendation status， indicating they should be used， but it’s also fine to use some pieces that are
still in Working Draft status. While you should wait to use properties and
techniques that are still undergoing change and have poor browser support， there’s no need to wait to use the
better-supported and stable parts of CSS3 in appropriate situations.
立刻使用CSS3
很多处于候选推荐状态的CSS3模块表明他们已经可以被使用，同时，尝试使用一些还处于草案状态的特性也是不错的。没有必要去等待一些正在变化或者浏览器支持不好的属性和特效，应该针对场景选择支持较好以及版本稳定的CSS3.
Not
until new CSS techniques get put to work can we discover the real-world
challenges of using them so that the W3C can address these challenges. Using
new CSS techniques now in real situations helps the web development community
uncover shortcomings， discrepancies， and holes in the specification， and
introduces new ideas for how the specification can be improved， extended， or clarified. We can help CSS3
become better by testing it out while we still have a chance to change it， rather than waiting until the specification is finalized and
missing our chance.
只有在实际工作中运用新的CSS特性,才能发现现实中的问题,并让W3C处理这些问题。在实际场景中使用新的CSS特性促进WEB开发团队发现标准的不足,差异和漏洞，并引入新理念让标准得以改进，扩展，明晰。我们现在就有机会可以促进CSS3在实践中增强，不然只能等标准完成而浪费机会。
Using
these somewhat cutting-edge techniques also shows the browser vendors which
pieces of CSS3 are the most popular and useful to web developers. In effect， it pressures those vendors to support the new
pieces of CSS and move forward.
通过使用最前沿的特性也能向浏览器厂商表明那种CSS3是最受网页开发者欢迎和有用的。事实上，这才能催促这些厂商支持某些新CSS特性，才能发展(？)。
So， using new CSS early is an essential part of
the process towards getting that new CSS to be standard CSS. It will never get finalized
if it never gets used.
因此，新CSS越早地被使用，是它成为标准必不可少的步骤。不使用，就不会完成修订。
I’m
not saying that everything that’s listed on the W3C site is fair game to use
right now. Not all new properties and techniques are ready to be used now， or to be used on every project. You should
use only those pieces of CSS3 that are fairly stable and won’t harm non-supporting
browsers by their lack. And you should use them wisely! Don’t add CSS3 just
because you can—decide if it makes sense for the site’s goals and its users， and add it where appropriate.
我可没说过任何在W3C站点的CSS特性都适合马上使用。不是所有的属性或特效都可以立刻使用，或者在任意项目中使用。建议你仅仅使用那些已经足够稳定的,不会因为缺乏浏览器支持导致出错的CSS3。另外你应该明智运用,不要因为你乐意就随意添加，应该根据站点的目标和用户群，在恰当的地方使用。
Some
pieces of CSS3 are not at Candidate Recommendation level yet， but have stable syntax that has not changed
for a long time and probably won’t change in the future.
Unfortunately， there’s no way
to know what these pieces are by looking at the W3C site alone. Instead，
you have to rely on other articles and books to fill you in on
the history and stability of a particular property or technique. In this book，
we’ll deal almost entirely with pieces of CSS3 that are stable
and practical to use now; in the rare exceptions when we do delve into the more
experimental， I’ll always give
you a heads-up.
虽然一些CSS3还不是申请推荐状态，但其语法相当稳定，很久没被更改了，估计未来也不会有所更改。不幸的是，除了查看W3C站点，没有其他方式去了解这些规则，或者，你可以通过阅读文章和书籍去了解某个特定属性或者特效的历史和稳定性。在这本书里，我们主要讨论已经足够稳定和有实际意义的CSS3规则,极少数情况会深究一些实验性特性，我会时刻给予提醒。
the state of browser support
Another
consideration that will usually go into whether or not you use a piece of CSS3
is how well-supported it is by major browsers， or the browsers of your particular users. While there are times
when you may the add more experimental and poorly supported CSS， perhaps as a little Easter egg for a particular browser， usually it’s not practical to spend time
adding CSS that will be seen by only a tiny sliver of your audience.But in
order to know which pieces of CSS3 are going to be seen by a good chunk of your
audience， you need to know what browsers are currently
in wide use.
浏览器支持程度
还有另外一个考虑因素:是否使用某条CSS3规则取决于该规则是否被主流浏览器良好支持，或被你特定客户群常用浏览器支持。或许有一天你使用了还处于实验阶段或支持较少的样式，有点像在客户端埋了一个彩蛋，显然这种做法只会被极少数浏览者者看到，还很浪费时间。因此，为了清楚知道哪些CSS效果能被大部分浏览者看到，你必须知道哪些是已经被浏览器广泛支持的。
browser market share
Browser
usage is always changing and hard to establish with certainty， but Figure 1.2 shows the most used browsers in October 2010， rounded to the nearest percentage. These figures come from the
well-trusted and broadly-sourced statistics from
Net Applications
(http://marketshare.hitslink.com/browser-market-share.aspx?
qprid=0).
For
statistics from many other sources， visit the Wikipedia page “Usage share of web browsers” at http://en.wikipedia.org/wiki/Usage_share_of_web_browsers.
浏览器市场占有率
浏览器使用率时刻在变化，很难锁定在特定几个，图例1.2就显示了2010年10月经常被使用的浏览器，这和目前比例差不多。这些图例来自可信度较高，采样数据宽泛的互联网应用(http://marketshare.hitslink.com/browser-market-share.aspx? qprid=0)
。你还可通过很多其他数据渠道了解统计率，例如维基百科页面“Usage share of web
browsers” ,地址是 http://en.wikipedia.org/wiki/Usage_share_of_web_browsers.
参考资料
http://www.ibm.com/developerworks/cn/web/1101_qinjian_css3/index.html?ca=drs-
http://crecian.com/a/Design//2010/0415/464.html