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文件效果如下:

C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知_第1张图片

HTML5及内置CSS效果如下:

C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知_第2张图片

对智能提示的简单扩展:

C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知_第3张图片


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+空格时会自动补全为directionUltraEdit默认提供了CSS3的语法文件,其代码补全功能在敲入时会自动提示选择的下拉列表,EditPlus没有这个功能。Notepad++也有类似的功能,单其css配置文件为css2版本,需要手动扩展。

使用EditPlus进行编辑:

C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知_第4张图片

使用UltraEdit进行编辑:

C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知_第5张图片

使用Notepad++进行编辑:

C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知_第6张图片

        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

输出:

C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知_第7张图片

6.可以进行复用:

View Code

输出:

C#仿jQuery链式操作CSS、消灭CSS hack、在VS2008中使用HTML5和CSS3智能感知_第8张图片

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

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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

你可能感兴趣的:(css,hack)