猫叔:Fighting!!!

CSS——几个最新解决方案

  一、重置默认样式
    normalize.css
      ①不像其他CSSreset,它保存了一些有用的默认样式。
      ②规范了大量样式,纠正了一下bug与表现形式。
      ③有详细的注释解释代码的作用。

  二、清除浮动

    /* 现代浏览器: */
            .cf:before, .cf:after {content:""; display:table;}
            .cf:after {clear:both;}
    /* For IE6-7: */
            .cf {*zoom:1;}

     ★使用overflow:hidden;清除浮动的弊端:
      ①当窗口小于容器时,无滚动条,隐藏内容与子元素。
      ②干扰margin、border、outline 和 绝对定位的png图片。
      ③影响CSS3属性的应用,如box-shadow、text-shadow、transform等。
        【即使非得使用,也应该确保触发hasLayout——zoom:1;】

  三、图片替代文字
    Kellum方法:在隐藏文本的同时保留了文本在屏幕内。而不是以前的-9999px(hack)。

    .hide-text {
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
    }

     提高性能,特别是平板电脑或小屏幕设备。

   四、图标元素
    当需要设置一个元素的背景图片,作为一个图标显示时,比起<span>等元素,<i>元素更具语义。

   五、使用CSS3
    CSS3有两个消极点:许多规范未确定需要前缀;旧浏览器不支持。
    (1)CSS3兼容性
      CSS3新属性最新支持列表:

         

      通过JavaScript插件实现IE6~IE9对CSS3特性的支持:
        ①IE9.js.这里有一个IE9.js影响的属性和问题修正的解释
        ②Selectivizr
        ③CSS3 Pie
        ④CSS Sandpaper
        ⑤Modernizr
      虽然增加了页面的大小和加载事件,但这个代价值得。
    (2)CSS3工具
      查看HTML5与CSS3最新规范与支持度:http://html5please.comhttp://css3please.com/
      渐变工具:Ultimate CSS Gradient Generator
      W3cplus整理了九十多个前端工具:《前端工具

   六、流体图片【常用于响应式布局】

    img { max-width: 100%; height: auto; }

  七、HTML5文档声明

    <!DOCTYPE html>

    HTML5的文档声明能快速改变页面模板和实现文档重构。
    在IE6~IE8用条件注释引入脚本<HTML5-Shiv>,可使旧浏览器正确呈现元素。

 

 

本文整理自:http://www.w3cplus.com/css/css-architectures-new-best-practices.html

posted @ 2013-06-17 12:06  庄丶大虾  阅读(...)  评论(... 编辑 收藏