CSS3—CSS3和现代Web设计

当在网站界面中实现闪亮的特性时, 一下良好的思考过程应当贯穿其中. 1)创建一个基本的可访问的HTML内容. 基于内容的样式和行为应该尽可能可用和样式增强, 但他们不是作为访问内容的必须条件. 2)思考你是否有必要使用所有炫目和先进的技术, 还是单纯只因为你是个想要众人捧的酷酷小孩所以想使用而已. 3)检查用你所对剑的实施方案是否做到了优雅降级, 同时留有可访问的基本内容. 4)测试内容是否可访问并且在多个设备上能正常显示(例如不同屏幕尺寸、控制机制) 5)在没有CSS3和WebGL的情况下或者任何情况下, 对于特定用户, 内容是否可访问. 你最好建立一个提供内容入口的后背机制. 让内容被尽可能多的用户所访问到, 这是你一直要关注的宗旨. 1)牢记优雅降级/渐进增强. 2)使用内置特性向不可访问的内容提供备选方案(例如, alt文本、视频的字幕). 3)当没有任何内置机制时建立你个人的备选方案(例如, 用Modernizr来检测特性并提供替换样式). 4)用补丁方案向那些不存在的特性提供支持.

很多模块还未完成, 但这不影响你使用其中的一些特性. 很多特性已经得到浏览器支持, 不过你需要增加厂商前缀. 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图片值和替换内容. 这个模块包括一些控制背景图片和替换内容等有用特性, 其中一些特性已经开始得到跨浏览器的支持.