chisdy.A.Pro » css

CSS3开发工具收集

chisdy — Mon, 03 May 2010 04:20:40 +0000

整理自：List of Really Useful Tools For CSS3 Developers
中文：CSS3开发工具收集

通常来说，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种色彩的名字以及按照字母排序的值。

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

原来学东西真的需要复习之css的position

chisdy — Mon, 07 Sep 2009 08:01:39 +0000

最近在弄网站的时候出现个问题，也是之前一直没去解决的，一个非常简单的问题，花了我几个小时的时间一步步去查找，如果平时的知识点能好好的积累的话，根本没必要花这样的冤枉时间，NND。

我习惯于用css的position属性去制作网页的头部跟其他我觉得没必要去float的东西，说实话挺讨厌float的，老是需要清除浮动以至于得到满意的效果。用position的话，不仅可以考虑在去掉css的情况下html文档的重点输出顺序，还可以减少不必要的嵌套代码，更重要的就是自由，爱放哪放哪。

这次的问题出现在position:relative同辈元素的z-index设置上，一般同辈元素都是靠z-index去定位层级，z-index数值越大者越居上。在例子中#header跟#ibanner为同辈元素，在不设置z-index值的情况下，因为#ibanner的html输出在#header的后面，所以#ibanner层对比#header层来说是居上叠加的，看Demo1

Demo1在IE(IE6、IE7、IE8，Jquery紧支持IE6+)浏览器下，很好的证明的这点。但在非IE浏览器下.nav的z-index属性值战胜了#ibanner，跑到上面去了。.nav的父辈元素是#menubar祖辈元素是#header，没理由啊，想不通，后来看了14px发布的《层叠加的五条叠加法则》后才明白过来，原来白为IE鼓掌了，最后变成又是IE的问题了。

接下来最终目的是要把.nav的层级提高，那么只需要搞定IE就行了，这个就简单了，设置#header跟#ibanner的z-index值就OK了。看Demo2（中间迷失了一个多小时，以为#ibanner设置z-index值就OK了，一直在测试就是不行，还用上了判断为IE浏览器的时候，#ibanner的z-index值为-1，太扯了，太瞎了。还有个可能是jquery的问题。）

我是明白过来了，估计看这篇文章的人一下子反应不过来，去看下14px发布的《层叠加的五条叠加法则》就清楚了，自己测试摸索吧，这样才记得牢。

重温css表单设计

chisdy — Wed, 10 Jun 2009 18:33:06 +0000

对于网店来说，表单的设计是很重要的，无论是注册，登录，还是订购，都是吸引访客进行下一步操作的重要因素。那么，从table布局过度到div+css及合理语义化布局后，表单的设计不再就几个tr，td死死的框着，可以考虑表单的便捷及亲和力可用性，以下便介绍几个例子，重新温习下：

1、Fancy Form Design Using CSS

这篇文章相信很多人都看过了，文章很长，主要介绍了构建表单的标签应用，布局及如何用CSS去控制，非常值得学习。

2、StylePhreak Simple CSS Form
3、Who says CSS forms can’t be pretty?
4、Man in Blue: Form Examples
5、CSS Play – A form with style
6、The Form Garden
7、Prettier Accessible Forms
8、HTML form effects with CSS
9、A 2 column CSS form layout
10、25 Stylish Examples of Web Forms

有介绍25个不错的表单形式

http://wufoo.com/ http://www.phpform.org/ 两个表单设计网站，非常方便。

分享3个站点

chisdy — Sat, 02 May 2009 19:45:40 +0000

好长时间没整过DIV+CSS站点了，最近弄了下，感觉有点吃力了。发觉很多基础方面的东西都不牢固，每次遇到问题只会复制代码，没去真正研究下为什么。因为有遇到关于自适应布局方面的问题，所以分享几个也许大家都很熟悉的站点。

http://layouts.ironmyers.com/这个站点里有很多布局上的实例，可以说是CSS模板吧，研究下直接套用就行了，不过个人觉得有点繁琐，还是搞清楚来龙去脉，自己写比较好。

http://css.maxdesign.com.au/ 这个站点里也挺多好玩的东西，不过要研究完还是要花点时间，每次我都是挑选着去看，去做实例，也许是这样CSS布局方面才一直停滞不前吧。

http://www.intensivstation.ch/en/templates/ 这里也有几个布局，大体上差不多，有兴趣的再自己去了解。

写到这里才发现，其实没什么好介绍的。

IE浏览器各版本的CSS条件判断

chisdy — Thu, 05 Mar 2009 16:00:38 +0000

IE8出到现在还没敢装，前些天下载了个Xenocode Browser Sandbox安装了下，发现之前一直用的一个纯CSS横向导航的水平居中出了问题，在IE8下完全居左了。找了很久没发现问题所在，索性每份CSS分开屏蔽，最终确定是针对IE的CSS问题，得避掉IE8只对IE7及以下版本设置。

之前只是针对所有的IE浏览器：

要避掉IE8的话就得：

lt在此作小于用，也就是小于IE8的版本都能识别。

或者：

lte在此作小于及等于用，也就是小于及等于IE7的版本能识别。

或者：

在此单独避掉IE8版本。

在网上找了以下代码，测试了下有几个不符合：

1.  除IE外都可识别 
2.  
3. 
4. 
5. 
6. 
7. 
8.  
9. 
10. 
11.

经过测试后：

5.

这个只有IE6以上的版本才可识别，也就是不包括IE5.0

7.

这个只有IE5以下的版本才能识别，也就是不包括IE6

10.

这个只有IE6以下的版本才能识别，也就是不包括IE7

后来才在经典那找到：

gt = Great Then 大于 > = > 大于号
lt = Less Then  小于 < = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then  or Equal 小于或等于

一下就明白过来了，还费了那么大劲。

5种方法立刻写出更好的CSS代码

chisdy — Wed, 25 Feb 2009 18:14:16 +0000

文章转自：http://www.yeeyan.com/articles/view/toydime/30047

原文：http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/

简介：当然，每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！

1.重置

首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset，或者你自己编写的重置代码，只要使用就对了。它能很简单的移除所有元素的填充（padding）和边距（margin）：

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式表。

噢，请停止使用：

* { margin: 0; padding: 0; }

花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。

2.排序
一个小的测试：这个例子就是要让你思考如何更快的找到右边距属性？

Example#1

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Example#2

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;}

你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS，将帮助你节省花费在寻找一个特殊属性的时间。

我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。

3.组织
你应该组织你的样式表以致相关的内容靠在一起，更简单的找到想要的。使用更有效的注解。举个例子，这是我如何构造我的层叠样式表：

/*****Reset*****/移除元素的填充（padding）和边距（margin）。
/*****Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。
/*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素
/*****Header*****/定义所有Hearder元素
/*****Content*****/定义所有内容框内的元素
/*****Footer*****/定义所有Footer的元素
/*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组，将更快的找到你想要的。

4.一致性
无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。

就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。

div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

所以找到你喜欢的工作方式然后保持一致。

5.从正确的地方开始
在完成标记语言之前不要去尝试靠近你的样式表。

当我准备分割一张网页的时候，创建CSS文件之前，我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer.因为我知道这些东西是现实存在的。

通过先标记文档，你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译）。

利用CSS子选择器指定子元素；不要只是机械的给元素添加类或者ID选择器。记住：没有一个良好的格式化文档（或者标记结构）CSS是无价值的。

总结
这些Tips能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束，接下来我将会去带来一些其他的与大家分享。

你有什么更好的Tips帮助我们完善CSS代码？

CSS兼容方案的一些简便技巧

chisdy — Sat, 16 Feb 2008 08:30:56 +0000

让你的样式完美兼容各大浏览器，这个方案主要是用来解决Safari的，Opear是在测试的时候顺带试了一下，结果发现竟然也行，所以顺便也解决了。

.e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html .e{/*IE6*/ background-color:#00FFFF }

经FF2、OP9.21、OP9.10、Sa3.0.3(pc)、IE7、IE6测试通过，如果你在其他的浏览器版本上测试过，到http://www.52css.com留言。

需要注意的是：IE7对样式的解释跟DTD是有关，在没有DTD的时候，IE7是能读取IE6的hack的。

转自: http://www.52css.com

IE多版本共存–Multiple IE

chisdy — Sun, 25 Nov 2007 18:49:51 +0000

要考虑网页在不同浏览器下的显示，得一个个去测试，感觉挺麻烦的。但把问题解决了，似乎挺爽的，特别是使用性高却令人头痛的IE浏览器。IE7出来后，一直在使用，但对比IE6来说，改进挺多的，变成在IE6和之前的IE版本的浏览器的测试上更麻烦，老是要换机子测试。在家里弄好，还得等第二天上班时在公司电脑上测试IE6下的显示。今天偶尔发现了个好东西——Multiple IE。

Multiple IE可以在现有的系统上同时运行 IE 3 – IE7，安装了测试了下，只有IE5.5和IE6比较正常，IE3-IE5都不行，但已经够用了，呵呵！

有兴趣的可以去看下！
官方网站地址：http://tredosoft.com/Multiple_IE

CSS跨浏览器滑动菜单

chisdy — Thu, 13 Sep 2007 06:09:14 +0000

很久没上cssplay.co.uk逛下了，刚进就看到了这个好东西，昨天发布的又一个适应各种浏览器的CSS滑动菜单，主要是有分级显示当前选择项，而且可以添加说明文字，不错！老外都喜欢这样弄，用户体验呐！什么都解释的清清楚楚。他那提到在Firefox上关于文字大小方面会有点问题，呵呵！没去测试。

原文地址:http://www.cssplay.co.uk/menus/pro_droptab.html

下载地址:Download pro_droptab.zip

CSS之兼容浏览器篇

chisdy — Fri, 07 Sep 2007 20:02:37 +0000

IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本，这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服

http://www.tantek.com/CSS/Examples/boxmodelhack.html

IE5.X/win对box-model的解析是一样的，他们认为width包括了边框(border)和补白(padding)，幸运的是这个情况在IE6中有了好转
但是IE6在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(DOCTYPE)声明，IE6才能够接受正确的box-model
所以，tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作

div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: “\”}\”"; //IE5.X/win忽略了”\”}\”"后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}

现在回到主题，我们经常看到!important和(空格)/**/:组合在一起使用，这个写法有什么奥妙呢？

看刚才那个写法，我这里可以提供另一种写法也能达到这样的效果

div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}

同样，这个方法仍必须依靠正确的文档类型声明才能够正常工作，原因在前面已经说过。

文档类型声明就像一个开关，打开向后兼容的未来，而错误使用的话，就是一个Pandora box

chisdy.A.Pro » css

CSS3开发工具收集

生成器

JavaScript方案

参考指南

Related Posts

原来学东西真的需要复习之css的position

Related Posts

重温css表单设计

Related Posts

分享3个站点

Related Posts

IE浏览器各版本的CSS条件判断

Related Posts

5种方法立刻写出更好的CSS代码

Related Posts

CSS兼容方案的一些简便技巧

Related Posts

IE多版本共存–Multiple IE

Related Posts

CSS跨浏览器滑动菜单

Related Posts

CSS之兼容浏览器篇

Related Posts