身为greader的重度用户，之前写过stylish，今天来简单分析下其中关于body的一点小技巧。
- 区分不同浏览器
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
- 布局切换
当界面隐藏侧边栏时（以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'); })这样书写及维护起来非常方便。
- 换肤
众所周知的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;}
没有评论:
发表评论