css hack hack

hack

 

 CSS hack的原理

因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同，以及CSS優先級對瀏覽器展示效果的影響，咱們能夠據此針對不一樣的瀏覽器情景來應用不一樣的CSS。

 

 CSS hack分類

CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。

 

屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。

 

選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。

 

IE條件註釋法(即HTML條件註釋Hack)：針對全部IE(注：IE10+已經再也不支持條件註釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及如下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

 

CSS hack書寫順序，通常是將適用範圍廣、被識別能力強的CSS定義在前面。

 

CSS hack方式一：條件註釋法

這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式。舉例以下

 

只在IE下生效

 

<!--[if IE]>

 

這段文字只在IE瀏覽器顯示

 

<![endif]-->

 

只在IE6下生效

 

<!--[if IE 6]>

 

這段文字只在IE6瀏覽器顯示

 

<![endif]-->

 

只在IE6以上版本生效

 

<!--[if gte IE 6]>

 

這段文字只在IE6以上(包括)版本IE瀏覽器顯示

 

<![endif]-->

 

只在IE8上不生效

 

<!--[if ! IE 8]>

 

這段文字在非IE8瀏覽器顯示

 

<![endif]-->

 

非IE瀏覽器生效

 

<!--[if !IE]>

 

這段文字只在非IE瀏覽器顯示

 

<![endif]-->

CSS hack方式一：符號前綴

在標準模式中

 

「-″減號是IE6專有的hack

 

「\9″ IE6/IE7/IE8/IE9/IE10都生效

 

「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

 

「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

 

CSS hack方式三：選擇器前綴法

 

選擇器前綴法是針對一些頁面表現不一致或者須要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

 

目前最多見的是

 

*html *前綴只對IE6生效

 

*+html *+前綴只對IE7生效

 

@media screen\9{...}只對IE6/7生效

 

@media \0screen {body { background: red; }}只對IE8有效

 

@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效

 

@media screen\0 {body { background: green; }} 只對IE8/9/10有效

 

@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效

 

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

CSS3選擇器結合JavaScript的Hack

咱們用IE10進行舉例：

 

因爲IE10用戶代理字符串（UserAgent）爲：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)，因此咱們可使用javascript將此屬性添加到文檔標籤中，再運用CSS3基本選擇器匹配。

 

JavaScript代碼:

 

var htmlObj = document.documentElement;

 

htmlObj.setAttribute('data-useragent',navigator.userAgent);

 

htmlObj.setAttribute('data-platform', navigator.platform );

 

CSS3匹配代碼：

 

html[data-useragent*='MSIE 10.0'] #id {color: #F00;}

 

Firefox 瀏覽器、Webkit 內核瀏覽器、Opera 瀏覽器css hack

Firefox 瀏覽器css hack

 

@-moz-document url-prefix() { 

 

  .selector { property: value; } 

 

} 

 

支持全部Gecko內核的瀏覽器 (包括Firefox)

 

*>.selector { property: value; } 

 

Webkit 內核瀏覽器 css hack

 

@media screen and (-webkit-min-device-pixel-ratio: 0) { 

 

  Selector { property: value;  } 

 

} 

 

Opera 瀏覽器css hack

 

html:first-child>b\ody Selector {property:value;} 

 

@media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }

 

Webkit 內核瀏覽器 css hack和Opera 瀏覽器css hack

 

@media all and (min-width:0px){ .font1 {color:red;} } 

 

 移動端開發專用css hack

在android2+的版本中，按鈕邊框會產生bug，須要清除掉，解決方案以下：

 

a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}/* 1.去除android a/button/input標籤被點擊時產生的邊框 2.去除ios a標籤被點擊時產生的半透明灰色背景 */

 

利用-webkit-transform-3d屬性，由於Android4.0下不識別該選擇器，瀏覽器解析代碼時，會直接跳過此步驟

 

在CSS3的兼容中，相信你們對使用media的兼容並不陌生，我以前也提到過不少次，那麼今天使用的hack也是跟它離不開的，代碼以下：

 

@media all and (-webkit-transform-3d){/* Android4.0下不識別該-webkit-transform-3d，使用它可作Android4.0下版本兼容 */

 

.css{...}

 

}

-轉載