通常来说,CSS非常简单。但是当浏览器厂商开始实现CSS3特性,问题开始变得有些复杂了。不难,只是有些复杂。这可能包括两个方面:首先有些心得CSS3属性(比如,transition、渐变、transform等)不是那么简单,其次我们不得不使用浏览器厂商指定扩展。
直到你最喜欢用的IDE原生支持CSS3,你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的,这里将收集能够助你学习和使用CSS3的真正有用的工具。
生成器
- 跨浏览器的CSS规则生成器,支持:border-radius、box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
- 支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
- 有一些列的CSS3生成器:、、、、和。
- 来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
- 为Firefox和Webkit浏览器生成线性渐变。
- 生成用于Firefox、Webkit和标准CSS3语法的“border-radius”属性。
- 简单的助你理解Webkit引入的CSS3特性。
- 动态为你的浏览器获取私有前缀并检测该属性是否被它支持。
JavaScript方案
- 一个确实很有用的JavaScript库,可以检测HTML5/CSS3的原生支持,并为你提供一种维护良好控制级别的方法,不管浏览器的能力。如果你更喜欢使用MooTools,你可以使用 (MooTools 版本的Modernizr)
- 一个纯Javascript选择器引擎,被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器,比如忽略选择器(escaped selectors )(”.foo\+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。
- YUI CSS3 选择器组件,提供一个收集、过滤和测试HTML元素的稳定的简写方法。
- 一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。
- ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本,然后在你的样式表中使用这些伪类选择器,然后IE就可以使用了。
参考指南
腾讯ISD WebTeam制作的一个CHM格式的参考手册,很全面,介绍+实例,推荐下载收藏;- CSS3、HTML5、SVG以及其它即将可用的页面技术的浏览器兼容性列表;
- 使用Modernizr库检测你的浏览器支持的“高级”特性,包括CSS3特性和选择器的支持。
- 自动运行大量的判断你的浏览器是否支持一些CSS选择器的小测试;
- 一个提供CSS2和CSS3选择器介绍的在线工具。简单的给它一些选择器,他就会返回选择器匹配的相关说明。
- 提供当前CSS3规范的列表,列出属性可用的值、常用的选择器模式参考,以type/单位组织,选择器类型参考和单位参考和信息(另有);
- SitePoint的CSS参考的相关部分内容;
- CSS3属性、选择器类型以及可用的值的列表,PDF格式;
提供所有147种色彩的名字以及按照字母排序的值。
如有更多有用的工具,欢迎通过评论分享。
转载请注明:代码学堂>web前端 > css技巧 > css3学习快速入门工具之CSS3样式生成器
随机文章
- 1css高级技巧之CSS文件优化规则
- 2使用CSS3渐变代替图片制作背景渐变效果
- 3CSS设置元素透明度的几个方法不同浏览器兼容性详细介绍
- 4高效的CSS写法之css属性的缩写讲解
- 5CSS3新特性之阴影、渐变、颜色模式讲解
- 6CSS样式管理之继承与重复利用
- 7css高级技术之CSS sprite应用详解
- 8CSS代码布局八条最常见的错误
- 9css3学习快速入门工具之CSS3样式生成器
- 10快速清理无用CSS样式常用工具使用说明
- 11CSS网页制作教程:网页中常用的web安全字体
- 12CSS网页制作教程:字体单位em简介
- 13CSS网页制作教程之浮动清除的另一种方法
- 14CSS入门教程——链接(a)
- 15CSS入门教程——定位(position)
排行榜