no_css3.png

• 按需加载

  优雅降级已经越来越深入人心，比如一个圆角效果，我们可以让支持CSS3的浏览器用border-radius实现，而让不支持的用图片实现，但我们通常会把这些图片也合入Sprites图片里。今天在一个小项目的时候，我想为什么不用不把它做的更进一步，把这些用来代替CSS3的图片单独合并成一张图片呢？这样子，对于不支持CSS3的浏览器就下载这张图片，而高级浏览器就不用浪费性能来下载这些图片了。

  一个在面包屑导航上，利用content生成">"符号，代替背景的例子，这里是Demo，这里是主要代码：

  
  .nav{
    *zoom:1;
  }
  .nav:after{
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
  }
  .nav li {
    float:left;
    margin-right:5px;
  }
  /*
  ie6,7 use image
  other broswer use content
  */
  .nav a {
   *background:url(http://www.zhouqicf/demo/css/2010/img/no_css3.png) no-repeat right -248px;
   *padding-right:10px;
    text-decoration:none;
  }
  .nav a:after {
    content:">";
    margin-left:5px;
    color:#ccc;
  }
  

  • 口碑江湖榜首页
  • 口碑江湖搜索
  • 列表

This document is written by ZhouQi.

2010-6-4 night