關于CSS HACK 解決兼容的寫法

2020-03-24 18:17:44

字體：大中小

來源：轉載

供稿：網友

人一旦習慣了某些東西就很難去改，以及各種各樣的原因，新的瀏覽器越來越多，而老的總淘汰不了。增長總是快于消亡導致了瀏覽器兼容是成了談不完的話題。說到瀏覽器兼容，CSS HACK自然而然地被我們想起。今天，我們通常都有一個團隊或者將有一個團隊的人在一個公司里面做相同的事，需要我們有統一的規范來進行Coding，以方便維護。而解決兼容的方法就是（必須是，因為這才最容易有問題的）其中一個最重要的、要解決的規范之一。在解決兼容方法上，想定出一個統一的規范，個人認為應該以下面3點為基本原則：權衡成本：在瀏覽器被淘汰后，如何快速清理掉無用代碼可維護：在資源成本和完美間平衡的向后兼容可讀：省力、易記
這里把成本放在了第一位，并不是說我們不愿意追求完美，而只是，太刻意追求完美有時候可能會阻礙我們前進；在成本后，應該是可維護和可讀，這點對于團隊的合作來說至關重要，而最終結果也是為了減少成本。先把這三個原則存起來，來看看我們平時解決兼容的寫法（后面會附詳細的Hack方法列表）：一、CSS 選擇器 Hack/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}} 這種寫法的優缺點是：優點：全面，各種HACK都有；清理無用代碼里易認缺點：選擇器名稱不易記；代碼量多（要重復寫選擇器）
二、CSS 屬性 Hack .sofish{
padding:10px;
padding:9px/9; /* all ie */
padding:8px/0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
} 這種寫法的優缺點是：優點：易記，代碼少缺點：不全面
三、IE 注釋IE only
這種寫法的優缺點是：優點：安全；向后兼容好；易維護
缺點：用不好會增加HTTP請求；用得好代碼又多
四、瀏覽器探測：JS/后端程序判斷// 以jQuery為例，檢測是否是IE6，是則加上
if ($.browser.msie $.browser.version = 6 ){
$('div').addClass('ie6');
} 這種寫法的優缺點是：優點：全面；易維護；可讀性高
缺點：占資源；代碼量大（要重寫選擇器）
上面4種是我們最常用的方法。現在，讓我們抽出心里存著的那3個原則，看看如何選擇。要時間思考一下么？這里簡單地說一下我的選擇：1、盡量使用單獨HACK 這樣維護起來成本比較低，改動不會影響其他的瀏覽器，而一旦有瀏覽器淘汰，只要搜索關鍵字，就可以批量去掉這些代碼。比如，ie6的單獨hack：_padding:6px;； 2、向后兼容的目標：1年你想現在的網站兼容IE10么，誰不想，但這可預見性太低了，也可以說，成本太高了。暫時沒必要。不過，IE9可能要發布了，所以，選擇像padding:8px/0; 這樣的IE8+的hack，在刪掉其他代碼不影響向后兼容上，會更好；并且，如果IE10出來，一旦支持這個hack，而又沒有這個bug，可能刪掉只影響2個瀏覽器，也會更方便；3、盡可能省資源你要是不考慮頁面加載速度，不考慮服務器承受能力的話，那在向后兼容和淘汰的處理上可以做得很完美（從代碼上），但這從某種程度上，不如不做。

五、個人推薦寫法其實可以糾結的還真多，這里結合A-Grade瀏覽器的種類和HACK的種類，寫兩種個人認為比較合理的HACK和向后兼容相兼顧的寫法，僅供大家參考的。經濟實惠型寫法：注重單獨的HACK。 IE的HACK比較多，選擇省力易記的屬性HACK；其他瀏覽器HACK少，選擇塊狀的選擇器HACK(推薦)
.sofish{
padding:10px;
padding:9px/9; /* all ie */
padding:8px/0; /* ie8-9 目前應用于IE8的單獨hack，情況比較少 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
} /* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} } /* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } /* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } /* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html /**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */
準完美主義寫法：配合IE注釋，一律采用選擇器HACK（選擇性推薦）
HTML: 添加body class: !--[if IE6]-- ![endif]--
!--[if IE7]-- ![endif]--
!--[if IE8]-- ![endif]--
!--[if IE9]-- ![endif]--
!--[if !IE]-- ![endif]-- .sofish{padding:10px;}
.non-ie .sofish{padding:12px;}
.ie9 .sofish{padding:9px;}
.ie8 .sofish{padding:8px;}
.ie7 .sofish{padding:7px;}

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS3中transition功能怎么使用？

下一篇：CSS3-了解文字陰影