CSS3和现代Web设计
1.1 现代Web设计理念
1.1.1 可访问性第一
同样一段内容, 可以用成千上万的方法为其设计样式, 但全世界的用户应该依然可以访问它们, 不管他们用什么方式去访问Web——无论手机、键盘控制器还是屏幕阅读器. 因此关于锁定那些没有使用矫正光泽水准的设备的用户是很重要的.
1.1.2 可用性其次
当用户访问网站中的内容和服务的时候, 他们能理解并且找到他们想要的信息吗? 为什么人们不多思考：对于浏览他们网站的用户来说, 什么信息是最有用的, 然后如何展现这些信息才能让用户更容易消化吸收? 一个简洁、书写良好和明确提供的副本远比堆砌浮华、夸张和专业性的只是来得更有效.
1.1.3 优雅降级和渐进增强
优雅降级和渐进增强两者都是用来解决当浏览器不支持构建内容所需的所有特性时, 内容如何去表现的问题. 优雅降级指的是简化网站内容的一些特效但仍能完美地保证其可访问性和可用性. 渐进增强指的是首先保证内容可被所有浏览器访问, 在这个基础上为那些高级浏览器添加对可用性和样式增强的支持. 幸运的是, CSS3可以很容易做到渐进增强和优雅降级, 并且在旧版浏览器也能正常工作. 如果大部分的特性能够得到合理使用, 它们就优雅地降级从而达到基本内容不支持的浏览器里依然可以访问的目的. 另外, 如果需要的话, 还有一些机制润徐你构件支持或者提供可替代的内容.
1.2 对内容的思考过程
当在网站界面中实现闪亮的特性时, 一下良好的思考过程应当贯穿其中. 1)创建一个基本的可访问的HTML内容. 基于内容的样式和行为应该尽可能可用和样式增强, 但他们不是作为访问内容的必须条件. 2)思考你是否有必要使用所有炫目和先进的技术, 还是单纯只因为你是个想要众人捧的酷酷小孩所以想使用而已. 3)检查用你所对剑的实施方案是否做到了优雅降级, 同时留有可访问的基本内容. 4)测试内容是否可访问并且在多个设备上能正常显示(例如不同屏幕尺寸、控制机制) 5)在没有CSS3和WebGL的情况下或者任何情况下, 对于特定用户, 内容是否可访问. 你最好建立一个提供内容入口的后背机制. 让内容被尽可能多的用户所访问到, 这是你一直要关注的宗旨. 1)牢记优雅降级/渐进增强. 2)使用内置特性向不可访问的内容提供备选方案(例如, alt文本、视频的字幕). 3)当没有任何内置机制时建立你个人的备选方案(例如, 用Modernizr来检测特性并提供替换样式). 4)用补丁方案向那些不存在的特性提供支持.
1.3 CSS3模块
很多模块还未完成, 但这不影响你使用其中的一些特性. 很多特性已经得到浏览器支持, 不过你需要增加厂商前缀. 1)CSS颜色. 在CSS3中CSS颜色有许多方法定义来指定颜色, 包括RGB(红、绿、蓝), HSL(色相、饱和度、亮度), RGBA和HSLA(分别和前面两个一样但是引入了定义透明度的alpha通道), 以及一个单独opacity属性来控制选区元素的透明度. 2)CSS3字体. 该模块不但包括对于可下载的Web字体的定义,而且包括其他影响字体的属性定义(比如, font-feature-settings). 3)CSS3文本. 它与能让文字变得光彩夺目的CSS3字体相辅相成. CSS3文本包括CSS2所熟悉的条目, 比如letter-spacing和text-transform, 并且引入新的条目, 比如hyphenation(断字)和text-shadow(文字阴影). 4)CSS3选择器. 对比CSS2中现有的选择器, CSS3选择器定义一个更强大、更健壮的机制. 它润徐你在所指定的元素上应用样式. 这些选择器几乎都有良好的跨现代浏览器支持. 5)媒体查询. 媒体查询是目前你为不同浏览器设备(宽屏和窄屏)提供相同内容不同最佳布局的主要方法. 6)CSS3背景和边框. 背景和边框定义任何与背景和边框有关的样式, 包括圆角(border-radius)、阴影效果(box-shadow)和花哨的边框效果(border-image). 7)CSS多栏布局. CSS多栏布局通过定义一个简单的方法来将内容分为多栏布局. 比起不精确的且有hack的浮动, 它能更好的重排. 8)CSS变形. 这两个规范(2D变形和3D变形)适用于元素在二维和三维中改变尺寸、位置和形状. 9)CSS过渡. CSS过渡提供了一种状态变化的平滑过渡方式, 比如链接颜色的改变或者鼠标悬停时增加横幅(banner)的尺寸. 10)CSS动画. CSS动画实现Flash式的声明式动画, 你可以使用关键帧详细地设置不同属性值, 然后浏览器会在关键帧之间自动生成"补间动画". 11)CSS弹性盒模型布局. 它主要应用于行和列的等宽或等高分配, 该模块为display属性定义了新值来实现更强大的布局技术. 虽然这个属性在现代浏览器中得到了不同程度的支持, 但它确实值得一提. 12)CSS图片值和替换内容. 这个模块包括一些控制背景图片和替换内容等有用特性, 其中一些特性已经开始得到跨浏览器的支持.