揭秘CSS(第 1 版)
10.2.2 客户端脚本
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

渐进增强与优雅降级

兼容浏览器的方法

CSS Hack

客户端脚本

CSS很强大的一点是,它具有很强的向前兼容性:如果浏览器不识别某个属性或值,它会忽略这个声明;如果不识别某个选择器,它会忽略整个规则。

这意味着新的选择器、属性和值,不会对老的浏览器产生严重影响。因此,设计师就可以大胆的应用CSS3的高级规则和声明,而不必担心老浏览器是否能够识别。

事实上,这些高级规则确实给设计带来极大的便利,设计师都迫不及待的要使用它,并且希望它们在老的浏览器中,和现代浏览器中能够产生相同的效果。

幸运的是,网上存在大量的优秀脚本,可以让老的浏览器支持CSS3的一些高级特性。如,selectivizr、PIE、respond.js 等等。

selectivizr

selectivizr 是一个非常优秀的Javascript工具,它可以让IE6-8浏览器支持CSS3的伪类选择器和属性选择器等。

selectivizr的使用非常简单,但是并不能直接使用,需要在页面的 <head> 标签中,先加载如jQuery、dojo、prototype、mootools等诸多流行的Javascript库中的任意一个。然后,再使用IE条件注释,让IE6-8版本加载 selectivizr 脚本,剩下的工作就交给 selectivizr 来完成:

<script src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
    <script  src="selectivizr.js"></script>
    <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

其中,JS library 是你要使用的Javascript库,selectivizr会自动检测最佳的Javascript库,如果你没有使用任何 Javascript 库,则伪类选择器和属性选择器等就不起作用。使用不同的库,所能支持的选择器如图 10‑1 所示:

selectivizr支持的库和选择器
图10-1 selectivizr支持的库和选择器

需要注意的是,selectivizr只解析使用 <link> 标签引入或使用 @import 导入的外部样式表,而不解析在 <style> 标签中定义的样式,也不支持站外样式调用。

考虑到浏览器的安全机制,需要通过 http 或https协议访问页面才行,通过 file:// 协议访问页面,selectivizr则不能发挥它的正常功能。

PIE

PIE.js 也是一款不错的Javascript工具,可以使IE6-8支持CSS3的部分渲染效果,如圆角、盒阴影、边框图像、多背景图像、渐变背景等。

PIE的使用也非常简单,只需在页面的 <head> 标签中,使用IE条件注释,让IE6-8版本加载 PIE 脚本,并调用 PIE.attach() 方法,将所有需要按CSS3进行渲染的选择器名称,添加到PIE对象:

<!--[if lt IE 9]>
<script  src="PIE.js"> </script>
<script>
$(function() {
    $(".rounded").each(function() {
        PIE.attach(this);
    });
}); 
</script>
<![endif]-->

上述代码就表示,包含类 .rounded 的每一个元素,将按CSS3进行渲染。如果有多个选择器,需要按同样的方法都添加到PIE对象中。

使用Javascript 相对麻烦,因此,PIE还提供了 .htc 文件,使用起来更加方便,只需在相应的选择器中,通过 behavior 属性直接链接 pie.htc 文件即可。如:

.rounded  {
    border-radius: 8px;
    behavior: url(pie.htc);
}

respond.js

respond.js 是一个快速、轻量的 Javascript 工具,它可以为IE6-8 提供媒体查询的 min-width 和 max-width 特性,使它们能够支持响应性设计。

respond的使用及其简单,只需在页面的头部,使用IE条件注释,让IE6-8版本加载 respond.js 脚本即可:

<!--[if lt IE 9]>
<script  src="respond.js "></script>
<![endif]-->

说明:.htc 文件

.htc 文件是一种脚本文件,用来描述 web 行为,web 行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件来完成这个功能。

由于只有IE才能认识 .htc 文件。因此,常常用来解决 IE 特有的问题。如,在 IE6 及更低版本中,只有链接元素 a 才支持 :hover 伪类选择器。

csshover.htc 是一个脚本,只需下载该脚本,并在 body 的元素选择器中,通过 behavior 属性的 url 指向它,就可以让锚以外的元素支持 :hover 伪类选择器。如:

body  { behavior: url(csshover.htc); }

这样一来,就可以在CSS中,定义诸如 div:hover、li:hover、p:hover、img:hover、自定义选择器:hover,使 IE6 及更低版本支持在图像、列表等元素上使用 :hover 伪类选择器。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验