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提供了条件注释，于是可以<!--[if IE 6]><link /><![endif]-->这种方式来载入不同的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 |
出处： http://easygame.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
1297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
