图解CSS3 读书笔记--前言_html/css_WEB-ITnose

注：本文来自本人阅读大漠前辈的图解CSS3后的个人总结。

CSS3在哪些方面进行了改进

选择器

新增：关系选择器（只有E~F,用于匹配E后的所有兄弟元素F）；属性选择器、结构伪类选择器：顾名思义，用于dom节点结构关系的选择器如E:first-child等；ui元素状态伪类选择器:主要用于表单元素状态的选择器；其他新增选择器。

边框

新增：border-radius（圆角）、border-image、box-shadow。
改进：border-color。

背景

新增：background-origin（背景原点）；background-clip（背景裁切）、background-size（背景尺寸）；多背景属性和内联元素背景图像平铺循环方式。

文本

新增：text-shadow（文本阴影）；text-overflow（文本溢出处理方式）：一般会配合white-space:nowrap和overflow使用；word-wrap、word-break、white-space（文本换行）

颜色

改进：CSS颜色模式（新增HSLA、RGBA模式）；新增：opacity属性。

渐变

新增gradients属性实习元素颜色渐变效果。

盒模型定义

新增：box-sizing属性，重新定义盒子模型；overflow-x、overflow-y内容溢出处理方式；resize自由缩放；outline轮廓属性。

布局盒模型

运用Flexbox模型进行布局。新增columns属性进行多列布局。

变形、过渡、动画

新增2D、3D变换特性；transition元素状态过渡效果；@keyframes和animation配合使用实现复杂动画效果。

媒体特性

主要是提供媒体识别和匹配相应样式的方法。

font-face和图标字体

新增@font-face模块，从新定义图标方式。减少图片的引入。

渐进增强和优雅降级

渐进增强和优雅降级是两种不同的网站实现方式。

渐进增强

保证最核心功能的实现，让任何低端浏览器都能看到站点内容，然后考虑使用高级但非必要的CSS和js等增强功能。
这种方式可能会让领先的浏览器的优势无法充分显示出来。

优雅降级

先考虑低端设备用户能否看到所有内容，然后再此基础之上为高端用户进行设计。
为高端设备用户提供一个完美的应用，也为不同性能级别的设备用户设计不同级别的不那么完美的应用。

引用一段stack overflow大神对渐进增强和优雅降级方式的解释

They ARE almost exactly the same thing, but they differ in
context.There is a class of browsers called "A Grade Browsers". These
are your typical audience members that (probably) make up the majority
of your visitors. You'll start with a baseline of these users. Call
this best modern practices.

If you want to enhance the experience for anyone happening to use
FF3.6 or Safari 4 or some other whizbang developer nightly webkit
whathaveyou, you'll want to do awesome things like rounded corners via
css shadowed text (but please god, not TOO much) drop shadows (see
above parenthetical) These make your site kick-ass looking, but won't
break it. This is progressive enhancement.Embracing the future from
the point of best practices.

On the other hand, your niche Nintendo site attracts a fair number of
IE5 users.Poor you, but you also want to make sure they keep coming
back. You might provide an alternative to your ajax behavior by
including the ajax script in an external file and if their JS isn't
turned on, maybe your links update the whole page. Etc. From the point
of view of best modern practices, you're making sure that certain
historical markets are being catered by some semblance of a functional
site. This is graceful degradation.

自己大概翻译一下：

其实这两种方式都是同一个概念，只是他们运用的背景不同。有一种浏览器叫做一级浏览器，这些大概会是你网站受众多数使用的浏览器，你将基于这一类比较高级的浏览器进行网站的设计制作。这种方式称为最佳现代实现。

现在举个栗子：如果你想提高如FF3.6或safari 4浏览器用户们访问你网站时的用户体验，你可能会加这些效果：css圆角、文字阴影等。这些特性会让你的网页看起来很眩酷，但是不会破坏原有的基础功能。这就是渐进增强。

但是这个时候你的网页有相当一部分的ie5用户。。你不想失去他们，你可以为你的网页添加额外的文件来解决ie5下js打不开ajax脚本的问题，来为实现ajax行为提供另一种选择。或者直接用链接的方式打开整个页面。从现代最佳实践方式的角度来说，你要确保你的网页有类似功能来兼容拥有一定历史市场的低端浏览器。这就是优雅降级。