C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知（转）

JavaScript和CSS作为客户端浏览器负责解析的代码，在进行ASP.NET进行编程时会有一些不便，JavaScript可以进行语法错误检查和调试，JQuery现在也可以在Visual Studio中添加智能感知，而CSS虽然有Visual Studio自带的CSS2.1版本的智能感知，单由于版本过低，导致许多CSS3的属性和属性值编写不便。CSS本身不支持变量、函数复用等 [less]，即使不考虑CSS是否需要这些编程语言的功能，不同浏览器对CSS的兼容性也让人大大的头疼。

对于VS2010有CSS 3 Intellisense Schema插件来实现HTML5和CSS3的智能感知，我使用的是VS2008，只好从该插件中提取了HTML5和CSS3的相关文件手动进行修改，有兴趣的朋友可以写一个自动从注册表获取VS的安装路径信息，进行文件拷贝和注册信息添加的小工具。

外置CSS文件效果如下：

HTML5及内置CSS效果如下：

对智能提示的简单扩展：

CSS3的智能感知添加：

1.从注册表获取Visual Studio的安装路径[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0]。

2.拷贝CSS3的智能感知文件到安装路径下的\Common7\Packages\2052\schemas\CSS\目录中。

3.修改注册表，在[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0 \Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas]，添加新项：Schema 5，添加两个字符串名值对：

File：css3.xml

Friendly Name: CSS 3.0

,其中File值为智能感知文件名，Friendly Name为VS中下拉列表的列表项名。CSS智能感知的文件除了上面提供的下载也可以到这里。

HTML5的智能感知添加：

1.拷贝html智能感知文件以及svg文件到安装路径下的\Common7\Packages\schemas\html\目录中。

2.修改注册表[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0 \Packages\{1B437D20-F8FE-11D2-A6AE-00104BCC7269}\Schemas]添加新项：Schema 24，添加3个字符串名值对：

File：html\xhtml5.xsd

Friendly Name: xhtml5

URI:http://schemas.microsoft.com/intellisense/xhtml5

智能提示的扩展：可以直接打开CSS3的XML格式的智能感知文件，添加或编辑<cssmd>节点的enum属性，由于其中的enum属性使用空格进行属性值的分隔，所以暂时没有找到好的方法对类似background-position:center center;这样的CSS属性提供默认选择扩展。

VS提供了外部工具选项，也可以考虑可以集成EditPlus、UltraEdit和Notepad++等编辑器的并利用其CSS的智能感知功能进行CSS编辑，其中EditPlus的语法文件和代码补全文件可以从官网进行下载，EditPlus不提供智能提示，只提供代码补全功能，例如起代码补全文件中定义了：#T=dir direction: ^!，当你输入dir+空格时会自动补全为direction。UltraEdit默认提供了CSS3的语法文件，其代码补全功能在敲入时会自动提示选择的下拉列表，EditPlus没有这个功能。Notepad++也有类似的功能，单其css配置文件为css2版本，需要手动扩展。

使用EditPlus进行编辑：

使用UltraEdit进行编辑：

使用Notepad++进行编辑：

CSS最让人头疼的地方是浏览器的兼容性，导致CSS文件中各种各样的hack充斥，hack主要是用来对付IE系列，而IE提供了条件注释，于是可以这种方式来载入不同的css文件取代hack方式，但实际应用中不多，大家还是习惯用hack把针对不同浏览器的应对写到一个CSS文件中，由于hack会由于浏览器的升级导致不良的后果，属性hack比选择器hack维护更加艰难，于是想出用下面这种方案，后来在一个wordpress模板中发现已经有人在用，别且用的更巧妙，IE的条件注释和Jscript的条件编译真是很。。。

<!--[if IE 9]><body class="ie ie9"><![endif]-->

<!--[if IE 8]><body class="ie ie8"><![endif]-->

<!--[if IE 7]><body class="ie ie7"><![endif]-->

<!--[if IE 6]><body class="ie ie6"><![endif]-->

<!--[if !IE]><body><![endif]-->

由于非IE浏览器不识别条件注释，并且IE10将取消条件注释的支持，因此改为以下版本：

<!--[if IE 9]><body class="ie ie9"><![endif]-->

<!--[if IE 8]><body class="ie ie8"><![endif]-->

<!--[if IE 7]><body class="ie ie7"><![endif]-->

<!--[if IE 6]><body class="ie ie6"><![endif]-->

<!--[if !IE]><--><body><--<![endif]-->

据说LESS的变量和复用等功能让CSS强大很多，据说而已。CSS本身不支持变量、函数等特性，如果可以用类似JavaScript、C#、PHP的方式来书写CSS，并且在输出时自动处理浏览器的兼容性貌似有很多好处，貌似而已，我进行了下尝试，一下代码中，每个CSS属性值设置函数均可以传入一个 params string[]设置单个或多个值的CSS属性：

1.可以使用变量功能：

View Code

2.可以使用枚举代替属性名：

View Code

3.可以使用函数代替属性名：

View Code

4.可以使用函数代替属性名和属性值：

View Code

5.可以进行链式操作：

View Code

输出：

6.可以进行复用：

View Code

输出:

输出:本来我计划加入下面这些功能：

1.对静态css进行解析，静态和动态同时输出。

2.对css输出的属性值提供自定义排序。

3.对css文件的合并和缓存进行处理。

4.对IE下的PNG应用滤镜。

5.对CSS圆角和阴影自动应用htc文件和-moz-，-webkit-处理。

css属性值的合法性判断，css复合属性的处理采用父子关系进行判断，如果有复合属性，则把后续加入的子属性合并到复合属性，这个功能也基本完成，当我尝试去实际使用一下时，忽然意兴索然，这还是CSS吗？我因为从事过C#开发，也从事过前台编码这样写我能接受，可是对于没有从事过C#开发的前台人员，怎么能奢求他们如此写？即使是我在实际应用中，除了看着链式的语法和智能提示有些好玩，丝毫提不起其他兴趣了，我也不知道具体的原因是什么，只是感觉怪怪的。

简单统计了下关于动态CSS的数据，只粗略根据请求的CSS文件URL是否有参数来判断。

#	网站	类别	css文件	css文件位置	css图片位置	css与图片	css图片引用	css文件大小	css文件数量
1	网易	国内	静态URL	其他域名	与css文件同域名	子目录	绝对URL	655b	1
2	搜狐	国内	静态URL	当前域名	与css文件同域名	子目录	相对URL	9.5kb	4
3	腾讯	国内	静态URL	当前域名	与css文件同域名	当前目录	绝对URL	1.4kb	1
4	淘宝	国内	动态URL	其他域名	其他域名	-	绝对URL	17.6kb	6
5	京东	国内	html内置css	-	其他域名	-	绝对URL	-	-
6	优酷	国内	静态URL	子域名	与css文件同域名	子目录	相对URL	15kb	2
7	人人	国内	静态URL	其他域名	其他域名	-	绝对URL	29.2kb	4
8	起点	国内	静态+动态	当前域名+其他域名	其他域名	-	绝对URL	49.1kb	5
9	赶集	国内	html内置css	-	其他域名	-	相对URL	-	-
10	cctv	国内	静态URL	当前域名	与css文件同域名	子目录	相对URL	20.1kb	2

作者：Tjerry
出处：http://easygame.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。