作家
登录

关于各浏览器下Hack的写法

作者: 来源: 2014-06-26 10:14:17 阅读 我要评论

   关于各浏览器下Hack的写法

  1、Firefox

  @-moz-documenturl-prefix(){.selector{property:value;}}

  上面是仅仅被Firefox浏览器识别的写法,具体如:

  @-moz-documenturl-prefix(){.demo{color:lime;}}

  支持Firefox的还有几种写法:

  /*支持所有firefox版本*/#selector[id=selector]{property:value;}或者:@-moz-documenturl-prefix(){.selector{property:value;}}/*支持所有Gecko内核的浏览器(包括Firefox)*/*>.selector{property:value;}

  2、Webkit枘核浏览器(chromeandsafari)

  @mediascreenand(-webkit-min-device-pixel-ratio:0){Selector{property:value;}}

  上面写法主要是针对Webkit内核的浏览器,如GoogleChrome和Safari浏览器:

  @mediascreenand(-webkit-min-device-pixel-ratio:0){.demo{color:#f36;}}

  3、Opera浏览器

  html:first-child>bodySelector{property:value;}或者:@mediaalland(min-width:0){Selector{property:value;}}或者:@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~bodySelector{property:value;}}

  上面则是Opera浏览器的Hack写法:

  @mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{background:green;}}

  4、IE9浏览器

  :rootSelector{property:value9;}

  上面是IE9的写法,具体应用如下:

  :root.demo{color:#ff09;}

  5、IE9以及IE9以下版本

  Selector{property:value9;}

  这种写法只有IE9以及IE9以下版本能识别,这里需要注意此处“9”只能是“9”不能是别的,比如说“8”,不然会失去效果的,如:

  .demo{background:lime9;}

  6、IE8浏览器

  Selector{property:value/;}或者:@media�screen{Selector{property:value;}}

  上面写法只有IE能识别,如:

  .color{color:#fff/;}或者:@media�screen{.color{color:#fff;}}

  7、IE8以及IE8以上的版本

  Selector{property:value�;}

  这种写法只有IE8以及IE8以上版本支持,如

  .demo{color:#ff0�;}

  8、IE7浏览器

  *+htmlSelector{property:value;}或*:first-child+htmlSelector{property:value;}

  上面两种是IE7浏览器下才能识别,如:

  *+html.demo{background:green;}或者:*:first-child+html.demo{background:green;}

  9、IE7及IE7以下版本浏览器

  Selector{*property:value;}

  上面的写法在IE7以及其以下版本都可以识别,如:

  .demo{*background:red;}

  10、IE6浏览器

  Selector{_property/**/:/**/value;}或者:Selector{_property:value;}或者:*htmlSelector{property:value;}

  具体应用如下:

  .demo{_width/**/:/**/100px;}或者:.demo{_width:100px;}或者:*html.demo{width:100px;}

  上面具体介绍了各种版本浏览器下如何识别各种的Hack写法,包括了IE6-9以及现代版本的浏览器写法。综合上面的所述,我们针对不同浏览器的Hack写法主要分为两种从CSS选择器和CSS属性上来区别不同的Hack写法。下面我们分别来看这两种的不同写法:

  CSS选择器的Hack写法

  下面我们主要来看CSS选择器和CSS属性选择器在不同浏览器的支持情况。下面先来看CSS选择器支持情况。

  CSS选择器的Hack写法

  1、IE6以及IE6以下版本浏览器

  *html.demo{color:green;}

  2、仅仅IE7浏览器

  *:first-child+html.demo{color:green;}

  3、除IE6之外的所有浏览器(IE7-9,Firefox,Safari,Opera)

  html>body.demo{color:green;}

  4、IE8-9,Firefox,Safari,Opear

  html>/**/body.demo{color:green;}

  5、IE9+

  :root.demo{color:red;}

  6、Firefox浏览器

  @-moz-documenturl-prefix(){.demo{color:red;}}

  6、Webkit内核浏览器(Safari和GoogleChrome)

  @mediascreenand(-webkit-min-device-pixel-ratio:0){.demo{color:red;}}

  7、Opera浏览器

  @mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{color:red;}}

  8、iPhone/mobilewebkit

  @mediascreenand(max-device-width:480px){.demo{color:red}}

  CSS属性Hack写法

  1、IE6浏览器

  .demo{_color:red;}

  2、IE6-7浏览器识别

  .demo{*color:red;}

  3、所有浏览器除IE6浏览外

  .demo{color/**/:red;}

  4、IE6-9浏览器

  .demo{color:red9;}

  5、IE7-8浏览器

  .demo{color/***/:red9;}

  上面罗列的都是各种浏览器下的有关于CSS的Hack的写法,基中有针对于现代浏览器Safari,GoogleChrome和Firefox的写法,而且也有针对于我们前端人员最讨厌的IE6-9的各版本浏览器的Hack的写法,而且这些Hack我们又分为CSS选择器的Hack写法和CSS属性的Hack写法。然而具体何种适用,大家可以要据自己的需求来定,下面列出我个人的两种写法:

  一、经济实惠型定法:

  这种写法注重单独的CSS的Hack写法。不同的浏览器使用不同的Hack写法,其实也只是以IE的Hack写法比较多(因为我们写Hack也主要是针对IE的浏览器)特别是IE6下的浏览器。单独为各种浏览器写Hack的好处是:针对各种浏览顺的Hack写法省力易记。因为其他的浏览器主要是针对现代浏览器,相对来说是比较少的。针对于这种Hack的使用,我推荐使用下面的方法:

  .demo{color:red;/*所有现代浏览器*/color:green9;/*所有IE浏览器*/color:lime�;/*IE8-9浏览器*/*color:red;/*IE6-7浏览器*/+color:blue;/*IE7浏览器*/_color:orange;/*IE6浏览器*/}@mediaalland(min-width:0px){color:#000;/*Webkit和Opera浏览器*/}@mediascreenand(-webkit-min-device-pixel-ratio:0){color:#f36;/*Webkit内核浏览器*/}@mediaalland(-wekit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{color:#369;}/*Opera*/}@-moz-documenturl-prefix(){.demo{color:#ccc;}/*allfirefox*/}

  二、完美主义写法

  这种方法是追求完美主义的写法,主要是配合我们上一节所说的IE条件注释,全部采用选择器Hack的写法。这种写法分两步:

  1、创建条件样式表,并在HTML中body里添加相应的class类名:

  <

  2、接着创建对应的样式

  .demo{color:blue;}/*现代浏览器*/.non-ie.demo{color:red;}/*除IE外浏览器*/.ie9.demo{color:yellow;}/*IE9浏览器*/.ie8.demo{color:green;}/*IE8浏览器*/.ie7.demo{color:orange;}/*IE7浏览器*/.ie6.demo{color:lime;}/*IE6浏览器*/@mediaalland(min-width:0px){.demo{color:black;}/*webkitandopera*/}@mediascreenand(-webkit-min-device-pixel-ratio:0){.demo{color:#369;}/*webkit*/}@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{color:#cf6;}/*opera*/}@-moz-documenturl-prefix(){.demo{color:#963;}/*firefox*/}

  上面就是目前各种浏览器下,相关CSS的Hack的写法,下面我们具体来看一个实例:

  HTMLMarkup

  testcolor

  CSSCode

  .demo{color:red;/*所有现代浏览器*/color:green9;/*所有IE浏览器*/color:lime�;/*IE8-9浏览器*/*color:red;/*IE6-7浏览器*/+color:blue;/*IE7浏览器*/_color:orange;/*IE6浏览器*/}:root.demo{color:#9639;}@-moz-documenturl-prefix(){.demo{color:#897;}/*allfirefox*/}@mediascreenand(-webkit-min-device-pixel-ratio:0){.demo{color:#000;}/*webkit*/}@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{color:red;}/*opera*/}


  推荐阅读

  CSS网站布局技巧几则总结

  1.若有疑问立即检测  在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错误,可能因为不当的结构等因素造>>>详细阅读


本文标题:关于各浏览器下Hack的写法

地址:http://www.17bianji.com/kaifa2/CSS/34322.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)