Selectivizr:让IE6~IE8支持CSS3高级选择器

@youngwind 2016-03-13 03:15:45发表于 youngwind/blog 兼容性

问题

IE6~IE8不支持CSS3的高级选择器,比如nth-child(),nth-of-type()等等,非常的不方便,selectivizr帮我们完成了这件事情。

解决方案

1. 使用方法

// index.html
<link rel="stylesheet" href="/css/index.css"/>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

<script src="/js/jquery-1.12.0.js"></script>
<script src="/js/selectivizr2.js"></script>
// index.css
tr:nth-child(3){
    background-color: red;
  }

2. 结果

IE8下效果
2016-03-13 10 42 05

3. 必须要注意的事情

  1. 原库selectivizr已经很久没有人维护了,而且也没有bower版本,使用起来很不方便。所以有了fork版本selectivizr2
  2. selectivizr必须搭配下面js库的任意一个使用。
  • jQuery (1.3+)
  • Dojo (1.5.0+)
  • Prototype (1.6.1+)
  • Yahoo UI Library (2.8.0+)
  • DOMAssistant (2.8.0+)
  • MooTools (1.3+)
  • NWMatcher (1.2.3+)

3.样式必须是link:css引入的,不能是行内样式,也不能是内联样式。因为selectivizr的工作原理是**通过ajax请求css文件,然后重新解析css文件,然后操作DOM元素添加上相应的类名。**如下图所示。
2016-03-13 11 27 50
4.由于css文件是ajax请求得来的,由于js同源策略的限制,css请求的位置必须跟html页面同域。(media.xxx.com和www.xxx.com不是同域)这个问题比较严重,因为在大型网站中,为了加快网页响应速度,一般都会通过多级域名加快静态资源下载速度。或许可以用跨域的思路来解决它,有待研究。