瀏覽器兼容

什么是 CSS hack

  • 由于不同廠商的瀏覽器或同一廠家某些不同版本的瀏覽器對css的解析認識不一致,導致同一頁面有不同的顯示結果,為了能夠統(tǒng)一或盡量顯示同樣的結果,我們需針對不同瀏覽器寫不同的css,這樣的過程就叫做css hack

談一談瀏覽器兼容的思路

  • 1、要不要做
    首先看看有沒有必要實現(xiàn)瀏覽器兼容的,要根據(jù)你的產(chǎn)品的受眾,還有成本和收益考慮,是否有必要做瀏覽器兼容。然后要考慮是否有其他方案可以代替瀏覽器兼容,用其他的方法來模擬同樣的效果。
  • 2、做到什么程度
    做到兼容到哪一個程度。
  • 3、怎么做
    根據(jù)兼容需求選擇技術庫和框架比如
    bootstrap(>=ie8)
    jquery 1.~(>=ie6),jquery 2.~(>=ie9)
    vue(>=ie9)
    根據(jù)兼容需求選擇兼容工具包括:比如html5shiv.js、respond.js、等。
  • 逐漸增強:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
  • 優(yōu)雅降級:一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容。
    區(qū)別:優(yōu)雅降級是從復雜的現(xiàn)狀開始,并試圖減少用戶體驗的供給,而漸進增強則是從一個非?;A的,能夠起作用的版本開始,并不斷擴充,以適應未來環(huán)境的需要。降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處于安全地帶。

列舉5種以上瀏覽器兼容的寫法

  • *,ie6,ie7可以識別;
  • _和- , ie6可以識別;
  • !important ,表示高優(yōu)先級,ie7及以上,firefox都支持,ie6認識帶!important的樣式屬性,但不認識!important的優(yōu)先級;
  • -webkit- ,針對safari,chrome瀏覽器的內(nèi)核CSS寫法
  • -moz-,針對firefox瀏覽器的內(nèi)核CSS寫法
  • -ms-,針對ie內(nèi)核的CSS寫法
  • -o-,針對Opera內(nèi)核的CSS寫法

以下工具/名詞是做什么的

  • 條件注釋
<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->
  • IE Hack
    針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
  • js 能力檢測
    瀏覽器的能力檢測目標不是檢測特定的瀏覽器,而是檢測瀏覽器的能力。這樣,只需要檢測瀏覽器是否支持特定的能力,就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測。
  • html5shiv.js
    用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別,并導致CSS不起作用的問題。所以我們在使用過程中,想要讓低版本的瀏覽器,即IE9以下的瀏覽器支持,那么這款html5shiv.js是一個非常好的選擇!
  • respond.js
    Respond.js 是一個小腳本,用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性,實現(xiàn)響應式網(wǎng)頁設計。
  • css reset
    將瀏覽器的默認樣式全部去掉,更準確說就是通過重新定義標簽樣式?!案采w”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉!這就是CSS reset。
  • normalize.css
    Normalize.css 是一個可以定制的CSS文件,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。
    它可以:
    保留有用的默認值,不同于許多 CSS reset 的簡單粗暴。
    標準化的樣式,適用范圍廣的元素。
    糾正錯誤和常見的瀏覽器的不一致性。
    一些細微的改進,提高了易用性。
    使用詳細的注釋來解釋代碼。
  • Modernizr
    Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS,無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。
    Modernizr 會在頁面加載后立即檢測特性;然后創(chuàng)建一個包含檢測結果的 JavaScript 對象,同時在 html 元素加入方便你調整 CSS 的 class 名。
  • postCSS
    它可以被理解為一個平臺,可以讓一些插件在上面跑,它提供了一個解析器,可以將CSS解析成抽象語法樹,通過PostCSS這個平臺,我們能夠開發(fā)一些插件,來處理CSS。

一般在哪個網(wǎng)站查詢屬性兼容性?

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozill...
    阿魯提爾閱讀 317評論 0 2
  • 本文版權歸饑人谷和本人所有 1.什么是 CSS hackCSS hack由于不同廠商的瀏覽器,比如Internet...
    饑人谷_xxxxx閱讀 361評論 0 0
  • 1、什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozi...
    kumabearplus閱讀 277評論 0 1
  • 1.瀏覽器兼容問題 瀏覽器與前端技術的發(fā)展不匹配 不同瀏覽器參考的標準、實現(xiàn)的方式不同 2.相關參考資料 瀏覽器市...
    IT男的成長記錄閱讀 553評論 0 6
  • 李雷是一家成熟企業(yè)的骨干員工。有一天老板去找他商量公司重大轉型項目,并有意讓李雷擔任這個轉型項目的負責人。李雷受寵...
    淡泊人生的智慧閱讀 986評論 0 0

友情鏈接更多精彩內(nèi)容