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

身为greader的重度用户,今天来简单分析下其中关于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:

<body class="gecko loaded">

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

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

<body class="webkit loaded">

这样书写及维护起来非常方便。 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;}