浅谈各种各样访问器下的CSS Hack适配性写法

2021-01-20 06:40 jianzhan

因为不一样访问器所遵照的规范也是有所不一样,再再加不能防止的程序流程bug、经济发展权益等要素的影响。一样的网页页面编码(HTML + CSS),在不一样访问器上的显示信息实际效果却略有不一样,乃至大有不一样。即便是同1个访问器,其不一样版本号的显示信息实际效果也是有所不一样,特别是IE。这就给网页页面前端开发设计方案人员带来了很大的困扰。开发设计人员务必兼具考虑到到全部流行的访问器,才可以在不一样的访问器上显示信息出同样或考虑必须的实际效果。因而CSS Hack技术性就诞生了。

CSS Hack技术性,便是运用不一样访问器不一样版本号之间的CSS完成的特点差别,来考虑大家必须的实际效果:在全部流行访问器上显示信息统1的实际效果,或为特殊访问器显示信息特殊的实际效果。

大家都知道,假如在1个css款式挑选器中存在两个名字同样的特性,访问器1般会以最终面的特性为准。

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2. .css-hack {   
  3.     background-colorred;   
  4.     background-colorblue/* 最后情况色显示信息为蓝色 */  
  5. }   
  6. </style>   
  7. <div class="css-hack">CodePlayer</div>  

自然,这里有个前提条件,那便是访问器最先得可以鉴别并适用该css特性,针对访问器不适用的css特性或值,访问器将1律将其忽视。

这便是CSS Hack技术性的完成基本原理。比如:即便大家在特性名字前面再加1个下划线_,IE 6 照样能够鉴别该特性,并且仅有IE 6能够鉴别。因而,大家便可以运用这个特点,让IE 6完成一些特殊的实际效果。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     background-colorred/* 在别的访问器上显示信息为鲜红色 */  
  3.     _background-colorblue/* 在IE 6上显示信息为蓝色 */  
  4. }  

再者如,因为IE 6不适用max-width特性,可是IE6的css特性值适用expression表述式。因而,大家能够为IE 6 折衷完成max-width的特性实际效果。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     background-colorred;   
  3.     max-width200px;   
  4.     _width: expression( function(me){ var maxWidth = 200; me.style.width = (me.offsetWidth <= maxWidth ? me.offsetWidth : maxWidth) + "px"; }(this) ); /* _开始仅有IE6能够鉴别,出于特性考虑到,此处的表述式只会实行1次 */  
  5. }  

下面,大家就来讨论IE 6⑴1、FireFox、Chrome、Safari、Opera等访问器的CSS Hack技术性,以供特殊访问器开展特殊特性的鉴别(国产访问器1般都应用IE或Chromium核心,因而不予考虑到)。

备注:下列內容多收集于互联网(在互联网上收集的情况下发现,在网上胡说八道8道的真多……),并开展了亲身检测,以尽可能保证精确无误,但因为各种各样系统软件服务平台、語言自然环境、大版本号、小版本号等难题,笔者其实不能确保沒有任何忽略或不正确。假如有读者发现,敬请留言告之。
IE访问器的CSS Hack

全部的IE访问器的CSS Hack

因为全部的IE访问器都可以鉴别特殊的css特性值后缀\9,因而大家能够给css的特性值加上\9后缀(在末尾的分号以前),从而保证仅有IE访问器可以鉴别该特性,别的访问器没法鉴别从而将其忽视掉。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     background-colorred/* 别的访问器上显示信息为鲜红色 */  
  3.     background-colorblue \9; /* 全部IE访问器上显示信息为蓝色 */  
  4. }  

IE 6的CSS Hack

没什么疑惑,如上所述,为css的特性前面加下划线_,这是给IE6专用的。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     background-colorred/* 别的访问器上显示信息为鲜红色 */  
  3.     _background-colorblue/* 仅有IE 6访问器上显示信息为蓝色 */  
  4. }  

IE 7的CSS Hack

IE6、IE7都可以鉴别加了+、*或#前缀的css特性名字,可是IE 7不适用_前缀,而IE6适用。因而,大家能够先写1个*特性、+特性或#特性让IE6、IE7都能鉴别,再写1个_特性,只让IE6鉴别,将特性值还原回去,从而让前者只对IE 7起效。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器上显示信息为鲜红色 */  
  3.     +colorblue/* 仅有 IE 6、IE 7 访问器上显示信息为蓝色 */  
  4.     _color: red/* 让 IE 6 还原为以前设定的色调 */  
  5. }  

留意:一些网页页面上说,只用+、*或#号的特性前缀便可以只让IE 7开展独立鉴别。但是历经自己亲测,无论是用IE Tester,還是专业免费下载1个XP系统软件,用原版IE 6检测,都说明:IE6、IE7都可以以鉴别+、*或#号的特性前缀。
此外,也有人说,IE 7适用!important,IE 6不适用!important,因而能够根据*特性: 值!important;的方式来完成IE 7的CSS Hack。

具体上,这样也是不好的,由于IE 6并不是不适用!important,只是有个bug罢了,详细信息请参照IE6到底支不适用!important和IE6 IE7(Q) IE8(Q) 不彻底适用!important标准。

应用!important来完成IE 7的CSS Hack,务必是在同1个款式挑选器中,并且一样必须在后边加_特性来还原IE 6的设定(这类方法还不便点,上面的方式还少写个!important)。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器上显示信息为鲜红色 */  
  3.     *colorblue !important/* 仅有 IE 6、IE 7 访问器上显示信息为蓝色 */  
  4.     _color: red/* 让 IE 6 还原为以前设定的色调 */  
  5. }  

另外,IE 7也适用在挑选器前加上*+html ,让当今挑选器变成*+html的晚辈挑选器,仅有IE 7能够鉴别此类款式挑选器(听说一些旧版本号的Opera访问器也能鉴别,但是这些版本号早就作古了,不用考虑到)。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器显示信息鲜红色 */  
  3. }   
  4. *+html .css-hack {   
  5.     colorblue/* 仅有IE 7显示信息蓝色  */  
  6. }  

IE 7还适用在挑选器前加上*:first-child+html,让当今挑选器变成*:first-child+html的晚辈挑选器。

IE 8的CSS Hack

仅有IE8适用嵌套循环以下@media种类查寻句子:@media \0screen。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器显示信息鲜红色 */  
  3. }   
  4.   
  5. @media \0screen {   
  6.     .css-hack { colorblue; } /* 仅有IE 8显示信息蓝色 */  
  7. }  

IE 9的CSS Hack

没寻找1个可靠的。

IE 10的CSS Hack

没寻找1个可靠的。

IE 11的CSS Hack

没寻找1个可靠的。

IE 6 + IE 7 的CSS Hack

如上所述,仅有IE 6、IE 7能够鉴别加了+或*号的特性前缀。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器显示信息鲜红色 */  
  3.     *colorblue/* IE 6、IE 7显示信息为蓝色 */  
  4. }  

FireFox、Chrome、Safari、Opera的CSS Hack

FireFox的CSS Hack

FireFox适用嵌套循环其专用的css句子:@-moz-document url-prefix()。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器显示信息鲜红色 */  
  3. }   
  4.   
  5. @-moz-document url-prefix() {   
  6.     .css-hack {   
  7.         colorblue/* 仅有FireFox显示信息为蓝色 */  
  8.     }   
  9. }  

Chrome、Safari等Webkit核心的访问器的CSS Hack

Chrome、Safari等选用webkit核心的访问器适用新闻媒体种类查寻句子:@media screen and (-webkit-min-device-pixel-ratio:0)。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器显示信息鲜红色 */  
  3. }   
  4.   
  5. @media screen and (-webkit-min-device-pixel-ratio:0) {    
  6.     .css-hack {   
  7.         colorblue/* Webkit核心访问器显示信息蓝色 */  
  8.     }   
  9. }  


慎用\0的CSS Hack

在网上很多与CSS Hack有关的文章内容中说,在css的特性值和分号之间加上标识符\0,能够完成对IE 8或 IE 9的CSS hack(有的说,仅适用IE8)。

在网上的示例是这样的:

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器显示信息鲜红色 */  
  3.     colorblue\0; /* IE8、IE9 显示信息蓝色 */  
  4.     +colorgreen/* IE7 显示信息翠绿色 */  
  5.     _color: brown; /* IE6 显示信息棕色 */  
  6. }  

根据具体检测发现,有关应用标识符\0完成的上述CSS Hack有3点必须留意。

1、IE10也可以鉴别加上了标识符\0的css特性值(笔者这里沒有IE 11,不知道道IE 11是不是也能鉴别)。

2、特性值和\0之间不可以有时间格,有1个空格的话(比如:blue \0),在IE 8中就无效了,仅对IE 9/IE 10合理。

3、假如大家只想对IE 8/IE 9开展CSS Hack呢?这个情况下,大家去掉后边两行与IE6、IE7相关的编码。

CSS Code拷贝內容到剪贴板
  1. .css-hack {   
  2.     colorred/* 别的访问器显示信息鲜红色 */  
  3.     colorblue\0; /* IE8、IE9 显示信息蓝色 */  
  4. }  

这个情况下,在IE 6、IE 7访问器中,你会发现你看到的并不是鲜红色,而是黑色(也便是默认设置的字体样式色调)!

这是由于1般访问器的思路是,先过虑掉失效的css特性值,随后再从正确的特性设定中依据优先选择级获得最终面的css特性值。而IE 6/7访问器并不是先过虑掉失效的特性值,而是先依据优先选择级,获得最终面的css特性值,随后再来分辨该特性值是不是,失效就忽视掉。因而,假如依照在网上所说,仅仅应用\0来完成IE 8+的CSS Hack,则会对IE6/7中的显示信息实际效果导致破坏。你务必根据附加的css特性设定来还原IE6/7的款式。

由于,大家不可以够简易地下结果说,应用\0能够完成对IE 8、IE 9乃至IE 10 +的CSS Hack。