每個Web開發人員的主要目標是使用現代直觀的設計構建網站，從而提供流暢，無縫的用戶體驗，無論他們使用哪種瀏覽器上網。
近幾十年來，互聯網見證了前所未有的大規模繁榮。截至2018年12月，全球互聯網用戶超過41億，網絡上的網站接近19.4億。
因此，這意味著全球觀眾可以通過多種方式擴展網站。這就產生了跨瀏覽器兼容性的難題，這給開發人員帶來了巨大的挑戰。隨著瀏覽器及其版本的數量每年以如此快的速度增長，嘗試使網站在所有瀏覽器中顯示和執行一致的任務是每個開發人員的噩夢。
然而，由於跨瀏覽器測試可能是繁瑣且耗時的，因此它是每個測試周期的必要階段。雖然幾乎不可能在每個瀏覽器上顯示和使用相同的網站，但仍有許多方法可以提供一致的用戶體驗並覆蓋更廣泛的目標受眾。
在本文中，我們將探討一下跨瀏覽器兼容性問題及其發生的原因，具有特徵檢測功能的CSS如何更有利於瀏覽器檢測，以及在設計網站時實現近乎完美的瀏覽器兼容性的提示。
為什麼瀏覽器會不一致地渲染內容
在深入研究跨瀏覽器兼容性和CSS與特徵檢測之前，必須基本瞭解互聯網瀏覽器的工作原理以及發生兼容性問題的原因。
在瀏覽網頁時，無論何時單擊鏈接或在瀏覽器中鍵入URL，都會引導Web瀏覽器發出服務器請求，要求加載您要搜索的內容並在瀏覽器中顯示。這是通過使用渲染引擎來完成的，該引擎負責解析HTML和CSS代碼並在屏幕上顯示解析的內容。
由於每個瀏覽器都有自己的渲染引擎，因此所有瀏覽器都不會以相同的方式顯示內容。因此，網站的佈局和外觀可能會有明顯的差異。
Safari使用'Webkit'渲染引擎，谷歌Chrome使用'Blink'（早期的webkit）以及所有基於鉻的瀏覽器，如Microsoft Edge和Opera，Firefox使用'Gecko'，最後，Internet Explorer使用'Trident'。較早版本的Opera使用'Presto'。
每個前端開發人員最可怕的敵人是瀏覽器之間不一致的功能支持。這意味著網站在開發人員選擇的瀏覽器的開發階段出現並完美地工作，但最終可能會在最終測試階段完全看不到其他瀏覽器。
瀏覽器偏好偏差
無論拒絕多麼強烈，每個開發人員都有一個秘密的“瀏覽器偏好偏見”。開發人員在網站開發過程中依賴的瀏覽器是評估網站性能的標準。大多數開發人員自然偏向於谷歌Chrome，谷歌Chrome在全球擁有領先的市場份額，並且擁有最強大的開發人員工具套件。這可能會導致開發人員忽視和忽略Mozilla Firefox，Safari，Opera和臭名昭著的Internet Explorer等瀏覽器。
在任何情況下，開發人員都不應忽視對任何可能被一小部分目標受眾使用的瀏覽器的支持。即使谷歌Chrome和Mozilla Firefox以及Safari的市場份額接近90-95％，這個統計數據，根據網站的性質和其他因素，可能被證明是欺騙性的。瀏覽器偏好因地理位置和年齡人口統計而異。例如，Safari在美國以外使用的次數要少得多，IE仍然是老一代的首選瀏覽器。
瀏覽器市場份額
谷歌Chrome是明顯的市場領導者，市場份額至少達到67％，其次是Firefox落後11％。值得注意的是，臭名昭著的Internet Explorer（經常被開發人員忽視）在2018年仍保持著近7-10％的市場份額。這一事實進一步擴大了開發人員注意跨瀏覽器兼容性的必要需求。您可以進一步使用Google分析或任何其他網絡分析工具來確定大多數網站訪問者首選的瀏覽器。如果瀏覽器或瀏覽器版本的份額低於1％，則開發人員應將其視為主要負責為您的網站帶來流量的優先級。
需要跨瀏覽器兼容的CSS
近年來，我們目睹了CSS中新的強大功能的出現，這催生了新的現代設計趨勢。但是，由於跨瀏覽器兼容性問題，大多數新引入的強大CSS3屬性並非所有主流瀏覽器普遍支持。在沒有回退的情況下，這些屬性不會被瀏覽器解釋並完全被忽略，這會對您的網站在較舊的，不受支持的瀏覽器上的設計造成嚴重破壞，尤其是可怕的IE。CSS Grid，Flexbox，CSS Blend Modes和3D變換等新的令人興奮的功能將網頁設計的範圍推向了新的高度。但是，由於對跨瀏覽器支持的懷疑，許多開發人員採用這些新推出的速度很慢。
這是一個簡短的部分，可幫助您瞭解不同Web瀏覽器不支持的CSS屬性。您可以使用“ 我可以使用” 平臺查找各種瀏覽器和瀏覽器版本的受支持和不受支持的元素。
最新版本的Internet Explorer不支持的CSS屬性（v.11）：
最新版本的Firefox不支持CSS屬性：
最新版本的Google Chrome不支持CSS屬性：
最新版本的Opera不支持CSS屬性：
最重要的是，某些瀏覽器也不支持某些HTML元素和屬性。例如，任何版本的IE或Edge都不支持表單屬性“佔位符”。
下一次我們繼續講解如何檢測不同的瀏覽器
