CSS3 开发工具收集

所属分类: 网页制作 / CSS 阅读数: 630
收藏 0 赞 0 分享

通常来说,CSS非常简单。但是当浏览器厂商开始实现CSS3特性,问题开始变得有些复杂了。不难,只是有些复杂。这可能包括两个方面:首先有些心得CSS3属性(比如,transition、渐变、transform等)不是那么简单,其次我们不得不使用浏览器厂商指定扩展。

CSS3开发工具收集

直到你最喜欢用的IDE原生支持CSS3,你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的,这里将收集能够助你学习和使用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种色彩的名字以及按照字母排序的值。

    如有更多有用的工具,欢迎通过评论分享。

    更多精彩内容其他人还在看

    CSS配合JavaScript做酷的动态页面效果

      利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
    收藏 0 赞 0 分享

    WEB标准,Web前端开发工程师必备技术列表

      想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
    收藏 0 赞 0 分享

    用CSS制作Alpha滤镜测试板

    alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
    收藏 0 赞 0 分享

    非常流行的所谓的气泡窗口

    普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
    收藏 0 赞 0 分享

    CSS教程:li和ul标签用法举例

    LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
    收藏 0 赞 0 分享

    CSS教程:CSS中的定位(position)

      使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
    收藏 0 赞 0 分享

    CSS教程:盒模型(BOX Model)

      如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
    收藏 0 赞 0 分享

    无延迟翻滚的图形与CSS混合风格按钮

      在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
    收藏 0 赞 0 分享

    css里expression实现界面对象的批量控制

    用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
    收藏 0 赞 0 分享

    CSS教程:水平对齐(text-align)

      水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
    收藏 0 赞 0 分享
    查看更多