百度空间 | 百度首页 
 
查看文章
  
delicious的样式表hack方案
2009-07-16 11:07
经常看到有文章讨论css如何针对各种浏览器做hack，最典型的就是如何对ie6和ie7来做了：
#someNode
{
    position: fixed;
   #position: fixed;
   _position: fixed;
   *position:fixed;
}

  • 第一排给Firefox以及其他浏览器看
  • 第二排给IE7（可能以后的IE8、IE9也是如此，谁知道呢）看
  • 第三排给IE6以及更老的版本看
  • 第四排给ie浏览器看
这种方式的特点就是比较简单，只需要稍微增加一个符号即可实现针对不同浏览器的兼容。不过，也还总是有一些不足之处。如果需要对firefox和opera、safari、chrome之类的浏览器做hack，又该如何展开呢？而且，这几个符号如此相似，意义却大不相同，那么一不小心极有可能会有张冠李戴的后果。

delicious在这方面做了一些很有参考意义的尝试，通过服务器端对userAgent的判断得出浏览器类型，然后限制body的样式，从而可以再样式表中针对body的样式进行特殊浏览器的hack。具体来说，有如下一些步骤：
1、在服务器端通过request headers获知浏览器类型。比如ie6、或者fifefox等。

2、在页面呈现时给body定义不同的浏览器对应的类型值。比如如果判断客户端是ie6浏览器，则body可以这样定义其样式：
<body class="is_ie is_ie6">

3、对需要进行特殊浏览器实现兼容的样式进行hack。比如一个class="favorite"的span在ie6里边需要进行hack，可以这样来定义：

.favorite {}
.is_ie6 .favorite{}

如果是safari，则可以定义成
.is_safari .favorite{}

这种方案的好处就是：
1、开发人员进行样式hack的时候，不需要具体记忆各种浏览器的详细hack方式，只需要根据一开始定义好的命名规范来进行即可。

2、也可以针对任何可能的浏览器做hack，即使这些浏览器本身不提供hack的可能性。

类别：技术追峰 | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者：
 
网友评论：
发表评论：
姓　名：
网址或邮箱： (选填)
内　容：
验证码： 请点击后输入四位验证码，字母不区分大小写
      

     

©2009 Baidu