2009年4月3日星期五

body标签class属性的妙用(Google Reader前端简单分析)

身为greader的重度用户,之前写过stylish,今天来简单分析下其中关于body的一点小技巧。

  1. 区分不同浏览器

    IE6:

    <body class="ie ie6 loaded">

    IE7:

    <body class="ie ie7 loaded">

    IE8:

    <body class="ie ie8 loaded">

    GECKO内核(firefox/flock等):

    <body class="gecko loaded">

    WEBKIT内核(safari/chrome等):

    <body class="webkit loaded">

    以上值通过JS判断当前浏览器后给body的class赋值。

    当然,并不是每种浏览器都利用到了相应的class,部分是预留的,CSS中只用到了以下部分:

    .gecko .goog-inline-block{display:-moz-inline-box;}
    .gecko .goog-inline-block{display:inline-block;}
    .ie6 .goog-inline-block{display:inline;}
    .ie7 .goog-inline-block{display:inline;}

    这段代码是为了实现跨浏览器的display:inline-block,其中只用到了gecko/ie6/ie7这三个class

  2. 布局切换

    当界面隐藏侧边栏时(以firefox为例):

    <body class="gecko loaded lhn-hidden">

    body增加了lhn-hidden的class:

    .lhn-hidden #chrome-lhn-toggle-icon{border-color:#ebeff9 #ebeff9 #ebeff9 #68e;border-width:5px 0 5px 5px;}
    .lhn-hidden #chrome-lhn-toggle:hover #chrome-lhn-toggle-icon{border-left-color:#fff;}
    .lhn-hidden #nav{display:none;}
    .lhn-hidden #chrome{margin-left:0;}
    .lhn-hidden #chrome-title{display:inline;}
    .lhn-hidden #entries .entry-body{max-width:100%!important;}

    通过给body添加/删除class="lhn-hidden"来实现侧边栏的显示隐藏,实现了结构、表现、行为的高度分离!

    用jquery的话则变得更加简单,JS只需以下几句:

    $('#chrome-lhn-toggle').click(function(){
        $('body').toggleClass('lhn-hidden');
    })

    这样书写及维护起来非常方便。

  3. 换肤

    众所周知的GR彩蛋:上上下下左右左右BA,就是通过给 body 增加 class 实现的

    <body class="konami">

    konami 的 css 如下:

    .konami #sub-tree{background:#006f89 url(/reader/ui/1466947354-ninja-sidebar.gif) repeat-y left 0;}
    .konami .lhn-section{background-color:#006f89;}
    .konami .scroll-tree li{background:transparent;}
    .konami .entry .entry-actions .star, .konami .entry .entry-actions .like, .konami .entry .entry-actions .read-state, .konami .entry .entry-actions .broadcast, .konami .entry .entry-actions .broadcast-with-note, .konami .entry .entry-actions .email, .konami .entry .entry-actions .item-link, .konami .entry .entry-actions .tag, .konami .entry .entry-icons .star, .konami .entry-likers-n .number-of-likers{background-image:url(/reader/ui/3207170781-konami-action-icons.png);}
    .konami-like-image{position:absolute;}
    

没有评论: