通常来说,CSS 非常简单。但是当浏览器厂商开始实现 CSS3 特性,问题开始变得有些复杂了。不难,只是有些复杂。这可能包括两个方面:首先有些心得 CSS3 属性 (比如,transition、渐变、transform 等) 不是那么简单,其次我们不得不使用浏览器厂商指定扩展。
直到你最喜欢用的 IDE 原生支持 CSS3,你最好的伙伴将是 CSS3 生成器、手册、参考指南以及基于 JS 的方案。这正是本文要推荐的,这里将收集能够助你学习和使用 CSS3 的真正有用的工具。
生成器
- CSS3 Please! 跨浏览器的 CSS 规则生成器,支持:border-radius、box-shadow、渐变 (线性)、rgba 色彩、transform (旋转)、transition 和 @font-face。
- CSS3 生成器支持 border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和 outline.
- CSS3 Sandbox 有一些列的 CSS3 生成器:线性渐变、放射渐变、文字阴影、盒阴影、Transforms 和文字描边。
- @font-face 生成器来自于 Font Squirrel 的很好用的 CSS3 @font-face 生成器。
- CSS3 渐变生成器为 Firefox 和 Webkit 浏览器生成线性渐变。
- CSS 圆角生成用于 Firefox、Webkit 和标准 CSS3 语法的 “border-radius” 属性。
- Webkit CSS3 生成器简单的助你理解 Webkit 引入的 CSS3 特性。
- CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。
JavaScript 方案
- Modernizr 一个确实很有用的 JavaScript 库,可以检测 HTML5/CSS3 的原生支持,并为你提供一种维护良好控制级别的方法,不管浏览器的能力。如果你更喜欢使用 MooTools,你可以使用 MooModernizr (MooTools 版本的 Modernizr)
- Sizzle – JavaScript 选择器库一个纯 Javascript 选择器引擎,被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的 CSS3 选择器——它甚至包括一些很不常用的选择器,比如忽略选择器 (escaped selectors )(”.foo\\+bar”)、Unicode 选择器、以及在 document 序列中返回的结果。这也是 jQuery 使用的选择器引擎。
- YUI 选择器组件 YUI CSS3 选择器组件,提供一个收集、过滤和测试 HTML 元素的稳定的简写方法。
- ie7-js 一个让 IE 拥有兼容标准的浏览器一样的行为的 JavaScript 库。
- CSS3 伪类选择器模拟 ie-css3.js 可使 Internet Explorer 识别 CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本,然后在你的样式表中使用这些伪类选择器,然后 IE 就可以使用了。
参考指南
- CSS 3.0 参考手册
腾讯 ISD WebTeam 制作的一个 CHM 格式的参考手册,很全面,介绍+实例,推荐下载收藏; - 我什么时候能用 CSS3CSS3、HTML5、SVG 以及其它即将可用的页面技术的浏览器兼容性列表;
- 浏览器支持清单使用 Modernizr 库检测你的浏览器支持的 “高级” 特性,包括 CSS3 特性和选择器的支持。
- CSS3 选择器测试自动运行大量的判断你的浏览器是否支持一些 CSS 选择器的小测试;
- SelectORacle 一个提供 CSS2 和 CSS3 选择器介绍的在线工具。简单的给它一些选择器,他就会返回选择器匹配的相关说明。
- CSS3 手册与快速指南提供当前 CSS3 规范的列表,列出属性可用的值、常用的选择器模式参考,以 type/单位组织,选择器类型参考和单位参考和信息 (另有 PDF 版本);
- CSS3 伪类 SitePoint 的 CSS 参考的相关部分内容;
- CSS3 速查手册 CSS3 属性、选择器类型以及可用的值的列表,PDF 格式;
- CSS3 色彩名称 提供所有 147 种色彩的名字以及按照字母排序的值。
(转自前端观察)
yanhaijing 2013 年 10 月 24 日
CSS 3.0 参考手册
腾讯 ISD WebTeam 制作的一个 CHM 格式的参考手册,很全面,介绍+实例,推荐下载收藏;
这个地址不存在