七夕,让你的网站跟css3约会吧

南瓜小米粥 发表于 前端开发 分类,标签: css3解决方法 Conditional-CSS使用方法

对于单身宅男来说,节日什么的真的就是浮云,我们的生活里只有上班和周末。

css3、html5已经出生一段时间了,但至今仍然是两条光棍,远不及自己的学长xhtml、css2受欢迎。究其原因无非他们妈逼的紧,再加上这2条光棍要求也高。

这个七夕,Conditional-CSS做红娘,让css3跟你的网站来一次约会吧。

先介绍下Conditional-CSS:

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

简单的说就是:Conditional-CSS允许你在css文件中使用类似脚本语言的if语句。是不是很爽呢~~更爽的是:当浏览器请求css时Conditional-CSS会过滤掉跟当前请求的浏览器不匹配的css内容,而不是把所有的css都输出给客户端:


DEMO (切换不同的浏览器,看加载的css是否不一样)

这样有什么好处呢:

1. 更少的文件内容,更快的加载速度。差异化的css,对于高级浏览器来说客户端能加载更少的css文件。

2. 更少的维护成本。相对于一般的css3部署方式(混合css2、css3或者为css3单独设置存放文件),这种处理方式减少后期的维护成本。

Conditional-CSS怎么部署呢,以php版为例(其它版的我也不熟)

1. 从官方下载php类,放在网站目录下,这里我放在emlog的风格目录下(content/templates/cosa/c-css.php);

2. 取消c-css.php文件实例化类的注释,在$oCss->fnComplete();前面引入你需要的css文件:$oCss->fnAddFiles("style.css");

2. 将页面中css的引用路径改为步骤1中的路径

上次参加杭州html5沙龙,发现大家都对html5很感兴趣,但是普遍的感觉是不知道要怎么用,什么情况下用。一定要等到html5、css3一统江湖的时候才下手吗? 如果那时又出个css13,我们该怎么办? 每次新旧技术的交互,最苦逼的都是程序员,但是,最幸福的也是程序员。虽然我们不一定有证,但仍然能在第一时间了解新技术,并将这些新技术提供给千千万万的普通用户使用。

可能你会发现,Conditional-CSS并不是一套完美的css3解决方案,也不适合部署在大型网站上(从官方网站看,作者写这个类的目的应该是解决浏览器差异引起的bug),但是它指引了我们一条解决问题的方法,对于程序员来说,代码上的问题没有什么是不可能实现的。

发表我的评论