JS护航下CSS3效果的渐进增强使用

这篇文章发布于 2011年07月29日,星期五,02:13,归类于 Web综合。 阅读 66171 次, 今日 2 次 9 条评论

 

一、渐进增强噔噔蹬蹬

何为“渐进增强(Progressive Enhancement)”?去年春暖花开的时候,我曾写过篇“CSS渐进增强在web制作中常见应用举例”的文章,part 1就相对详细地介绍了我个人对“渐进增强”的一些认识和理解,这里我就不重复口水了,建议您阅读本文之前先围观下这篇文章。我自己现在回头看这篇文章都觉得:这小子写的还真不错!

不过,but,however,diemo(日),本文的标题虽然挂着“渐进增强”的名号,实际的内容却又不是真正意义上的“渐进增强”。怎么讲呢?真正意义上的“渐进增强”的终效果是不兼容的,颓废的浏览器效果OK,还带的出去;带感的浏览器效果更上一层楼,锦上添花。而本文的内容却是讲如何实现兼容性的锦上添花,笑容绽放的效果,主旨是有差异的。

目前正处于CSS2.1 → CSS3使用过渡的阵痛期,随着IE9浏览器支持了不少CSS3属性,这种阵痛感越来越明显。例如,我们要实现一个大于4像素的圆角效果,怎么办?考虑到兼容性,我们是不是还是依照老路,牺牲点前端性能,花点功夫切个圆角图片,或定位或移位实现圆角效果。但是,又想到,IE9, FireFox,Chrome浏览器都支持CSS3 border-radius圆角效果,且现在前缀都不需要了。这么好的东西,不用又可惜。一边是兼容性,一边是优秀省力的CSS属性。难道非要等到IE6~8浏览器都坐动车回家那天才能使用CSS3属性吗?于是,我们就会产生阵痛。

有这种阵痛感的同行们很多,在国外,似乎要比我们早很多,许多优秀的web工程师们会想一些招缓解这些阵痛。即既可以有效使用现代浏览器的CSS3属性,又能使用其他手段实现诸如IE浏览器下的兼容性的效果。

例如比较有名的CSS3 pie(具体可参见我之前的“PIE使IE浏览器支持圆角盒阴影和渐变渲染”一文),文中还列举了些其他方法或工具:

  1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)
  2. Aaron Gustafson的 eCSStender
  3. Drew Diller的 DD_roundies
  4. Remiz Rahnas的border-radius.htc
  5. Nick Fetchak的 ie-css3.htc
  6. Keith Clark的ie-css3.js
  7. zoltandulac的cssSandpaper

我写过的其他相关文章还有:“让IE6/IE7/IE8浏览器支持CSS3属性”,“cssSandpaper-兼容IE的CSS3 JavaScript库”。

不过,but,however,diemo(日),本文虽然也是来缓解CSS3过渡时期的阵痛的,但是不同于上面的工具或是库之类,不是借助浏览器特殊特性(例如IE浏览器的VML)实现一些效果。而是把传统的兼容IE6/IE7/IE8浏览器效果部分通过JS的实现。例如,我们过去实现圆角可能需要多个标签和图片,但是在现代浏览器下,我们只要单独一个标签,且无需图片。我们的原始HTML就是CSS3属性下的单标签,此时IE6~8浏览器肯定效果一般般,此时,可以借助JS的元素创建等兼容低版本IE浏览器下的效果。这就是JS护航下的CSS3效果使用。因为无JavaScript部分的内容,实际上走的是“渐进增强”路线。因此,才有了本文的标题。

所谓一图胜千言,一例胜千图。下面看几个例子就知道我的想法和做法究竟是什么?

二、实例之JS护航下CSS3大圆角和盒阴影的实现

圆角效果截图 张鑫旭-鑫空间-鑫生活

demo页面
您可以狠狠地点击这里:JS护航下CSS3大圆角和盒阴影demo

当你使用Firebug或是Chrome浏览器自带的的元素审查查看demo页面圆角效果和下阴影效果,会发现他们是一个孤单单的类名为box的div实现的,效果驱动来自CSS3 border-radiusbox-shadow属性。

单标签下的CSS3实现 张鑫旭-鑫空间-鑫生活

当你查看HTML源代码,你会发现,HTML代码很干净,没有多余的每个实现效果而不得不使用的多余标签。按照我们经验,孤单单的一个标签是不可能在IE6/7浏览器下实现圆角外加盒阴影效果的,所以,我们可能就会认为此demo页面在IE6/7/8下会是类似下面的直接白板:
假象IE下的直角 张鑫旭-鑫空间-鑫生活

然而,实际上,demo页面在IE6/IE7下是效果很赞的圆角:
实际IE7下的圆角效果 张鑫旭-鑫空间-鑫生活

这是怎么回事?实际上IE6~8浏览器下的圆角借助了图片、额外标签元素和JS实现的。

具体实现
对于IE9浏览器,FireFox等现代浏览器,我们直接使用简单标签和CSS3就可以实现很赞的效果了。对于IE6~8浏览器,我们需要按照传统做法来处理。

①切图
上下圆角图片,考虑到自适应,上下边缘的圆角图片长度要足够长1000像素宽度以上。

②CSS
使用传统CSS实现,如下CSS代码,可以完全不使用CSS hack。

/*图片式圆角*/
.radius_bot_ie,.radius_bot_ie_in {
    background: url(/study/image/radius_bot_ie.png)\9;    
}

.radius_top_ie,.radius_top_ie_in {
    background: url(/study/image/radius_top_ie.png)\9;    
}

.radius_bot_ie,.radius_top_ie {
    height: 9px;
    padding-left: 10px;
    position: relative;
    overflow: hidden;
}

.radius_bot_ie_in,.radius_top_ie_in {
    height: 100%;
    background-position: 100% 0;
}

.radius_top_ie {
    margin-bottom: -9px;
}

.radius_bot_ie {
    margin-top: -9px;
}

③JS护航
使用JS护航,在IE6~8浏览器下,将含有圆角图片样式的HTML护航到对应的位置。本demo中是box类名所在div的前后。在jQuery库下,就会有如下的JS代码:

//检测是否是不支持圆角的IE6/IE7/IE8浏览器
var $isIe6_8 = !navigator.geolocation,
    htmlBefore = '<div class="radius_top_ie"><div class="radius_top_ie_in"></div></div>',
    htmlAfter = '<div class="radius_bot_ie"><div class="radius_bot_ie_in"></div></div>';

if ($isIe6_8) {
    $(".forSelector").before($(htmlBefore)).after($(htmlAfter));	
}

于是不干扰IE9以及火狐等现代浏览器的情况下实现了低版本的IE浏览器的圆角和盒阴影效果。

说明:navigator.geolocation是浏览器地图API是否支持的判断,IE6-8浏览器不支持,其他浏览器支持,可以用来区分IE6~8和其他浏览器。navigator.geolocation的实际使用可以参见前不久我整理的“浏览器地理位置(Geolocation)API 简介

更多技术实现细节可以直接查看demo页面的源代码。

三、实例之JS护航下CSS3小圆角的实现

小圆角的CSS3实现 张鑫旭-鑫空间-鑫生活

demo页面
您可以狠狠地点击这里:JS护航下CSS3小圆角实现demo

本demo页面实现的效果很简单,就是有个暗红色背景的2像素圆角选中效果。我们可能知道,一些小的圆角,我们可以直接使用CSS模拟的,虽然效果不及浏览器的圆角渲染来得平滑,但是,对于用户而言,已经不会产生足已形成差异感的影响。

与上面的例子类似,在现代浏览器下,直接就是一个单纯的标签加一个border-radius:2px实现,如下CSS代码和HTML代码:

.ron {
    display: inline-block;
    line-height: 16px;
    padding: 1px 8px;
    border-radius: 2px;
    background-color: #800;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
<a class="ron forSelector" href="#">全部</a>

按照上面的CSS + HTML组合,如果不是遇到妖孽的话,IE6等浏览器下应该是看上去不太舒服的直角角:
假象的IE7下面的直角效果 张鑫旭-鑫空间-鑫生活

而实际上,在demo页面中,IE7浏览器下的效果是有个小圆角的:
IE7下demo页面中实际的小圆角 张鑫旭-鑫空间-鑫生活

实现原理
IE6~8下还不支持border-radius属性,因此这些浏览器实现圆角效果无法使用CSS3,如果采用CSS模拟,则没有两层标签或多个标签是搞不定的。

我们可以当这世界上只有IE6~8浏览器,我们的实现应该会这样:
外面再套一层标签,使用负移位实现小像素的圆角效果。

外层嵌套CSS代码如下:

.ron_out {
    display: inline-block;
    padding: 1px 0;
    background-color: #800;
}

.ron_out .ron {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 -1px;
    _position: relative;
    _left: -1px;
}

然后,我们使用JavaScript护航,将这个外层标签带到IE9之类支持圆角浏览器的单标签的外面(jQuery库下):

//检测是否是不支持圆角的IE6/IE7/IE8浏览器
var $isIe6_8 = !navigator.geolocation,
    htmlOut = '<span class="ron_out"></span>';

if ($isIe6_8) {
    $(".forSelector").wrap(htmlOut);	
}

于是,就有了我们在低版本IE下看到的效果了。

四、干净自由灵活的JS护航

本文的内容实质上就是将CSS hack应该实现的东西,纯生CSS3实现之外多余的HTML全部交给JavaScript实现了。

我们可以对比下JS护航法和传统CSS Hack + HTML做法以及CSS3 Javascript库之间的优劣。

和传统传统CSS Hack + HTML做法相比,JS护航法的HTML源代码更加干净了,不用考虑CSS hack的问题,省掉了不少CSS代码,且效果实现可以公用,这比日后一个一个删除多余HTML代码省事的多。不足之处在于,需要JavaScript的支持,部分对JavaScript不熟悉的人员可能上手有些不易,其次如果脚本位置放置不当或遭遇阻塞,在IE6等浏览器下很看到页面明显的直接变圆角的效果,体验上可能少少打了点折扣。

和CSS3 Javascript库相比,JS护航法更易懂,更易维护,更灵活。CSS3 JS库的使用一般需要不少限制条件,例如元素相对或决定定位。对页面环境也要有要求,因为不少是htc文件。然后还有其他一些不知名的问题。出了问题后又因为是不熟知的VML或是封装好的滤镜,往往不知该怎么办。同时,CSS3 JS库尺寸有一点,功能稍稍多了点。往往不能很好的有的放矢。

就我个人而言,我是强烈推荐本文的JS护航下的CSS3效果实现。即最大限度地使用了很多浏览器的CSS3特性,又兼顾了低版本浏览器的兼容性效果,代码干净,使用简单,灵活。权衡来看,是上上之选。

五、关注想法本身

本文的两个例子本身其实没什么,因为web页面各种情况千奇百怪,记住两个例子顶个小鸡用。关键是想法本身,通过JS转移 CSS hack和多层级或多标签的HTML,保证IE9和现代浏览器下有最大限度的CSS3使用和最好的web性能。

时刻有这种意识,并且去做了,那么目前CSS3过渡时间的阵痛就会随着时间的推移完全消失的。否则,守着所谓的兼容性的顽固想法,等(说不定不要2年)到CSS3时代真正到来,过去的啰哩吧嗦的实现想改都改不了,只会有后续的不断疼痛。

做人做事都需要要远见,不要再抱残守缺,试试一些新的想法,一些新的做法吧。

欢迎讨论,提出异议!

(本篇完)

分享到:


发表评论(目前9 条评论)

  1. Johnson说道:

    鑫旭哥的思维真是活跃,一点不呆板,检测是否是IE6,8 用到了这么直接了当的方法,很启发我

  2. 小嘉说道:

    太麻烦了。如果简单点就好了。

  3. 小不点说道:

    请问下 您开发的用的是什么前端开发工具啊

  4. 哀音说道:

    移动平台没鸭梨 – -。最近一直在整合CSS3资源
    http://rebuildpattern.com/css3

  5. 说道:

    恩,技术很新。CSS3其实很强大,但用的人还是少。

  6. bdmaster说道:

    ie系列坐动车这个很给力哈哈

  7. cqggff说道:

    个人觉得,现代浏览器就应该有更好体验。这样才能促进浏览器的更新换代

  8. dvaknheo说道:

    navigator.geolocation

    这个属性看起来不保险啊,某年之后这个属性就被咔嚓了呢?

  9. radom说道:

    很牛插!受教了。