前端兼容性探討

這裏和朋友們簡單探討一下我的對於前端兼容性的一些理解：

在項目中，前端主要處理html，css,javaScript代碼，固然還有可能接觸到razor等渲染引擎方面的知識，不過主要處理的仍是HTML、CSS、JavaScript。我的認爲兼容性的問題也是對這三個方面進行處理。

首先，是html方面兼容性的處理，你們都知道，雖然有一個W3c標準的存在去規範html、xml/xhtml/css/javaScript/dom的標準，可是這只是個標準，真正體現出效果的是瀏覽器，而瀏覽器卻有不少種，firefox/chrome/ie等等，每一個瀏覽器又有不一樣的版本，不一樣瀏覽器不一樣版本由於瀏覽器自己渲染引擎的不一樣，在對於w3c標準的支持版本不一樣造就了一大堆的兼用性問題。對於html的兼容性問題，這裏只講兩個處理方案：

一、使用樣式重置css文件解決相同html標籤在不一樣瀏覽器或者相同瀏覽器不一樣版本上渲染不一樣的兼容性問題。（我的推薦normalize.css）,固然這隻供參考，樣式重置要適應所在的項目風格，公司的開發規範要求等進行定製，因此要看具體要求，不過大體的重置樣式都差很少，無非就是對padding,margin、字體屬性等一些進行重置，具體你們能夠去normalize.css查看裏面的css樣式。

二、在網頁的頂部加上 doctype （文檔類型）標籤聲明。這裏涉及一個盒子模型的問題，你們知道，ie是特立獨行的，在盒子模型上，ie的處理也不一樣，在ie中標籤的width,height屬性是包括padding和border的。當沒有加上doctype時，每一個瀏覽器都按照它本身的方式來渲染標籤，這就會形成兼用性問題，而加上以後，瀏覽器會按照w3c標準盒子模型渲染標籤。

再者是css兼用性問題，reset重置樣式只解決了一些比較簡單的樣式問題，而相似於雙邊距、最小高度等問題，還須要開發者在各自的項目中進行對應的處理，這裏仍是總結的比較全面的，有興趣朋友能夠看一下（https://zhuanlan.zhihu.com/p/...）。

最後，就是JavaScript的兼容性問題，因爲瀏覽器的發展及引擎不一樣，瀏覽器所自帶的api也會不一樣，這就引發了JavaScript的兼用性問題，在引用對象屬性或者方法時須要進行客戶端檢測，就是檢測當前瀏覽器所處系統、所支持的語法、所具備的特殊性能。包括能力檢測、怪癖檢測和用戶代理檢測三種，我的比較推崇能力檢測：

能力檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何，只需肯定瀏覽器是否支持特定的能力，就能夠給出相關的方案。能力檢測須要注意兩點：

一、先檢測達成目的的最經常使用的特性，能夠保證代碼最優化，並避免檢測多個條件；
二、必須測試實際要是用到的特性；

這些就是小可對兼容性的理解，有不對的但願各位朋友指正探討，嘻嘻~