[[435587]]

【51CTO.com快譯】由于各種瀏覽器的工作機(jī)制不同，跨瀏覽器兼容性是開發(fā)人員需要特別關(guān)注和處理的一個(gè)關(guān)鍵方面。

隨著軟件市場規(guī)模在不斷增長，瀏覽器和IT設(shè)備的數(shù)量也在不斷增長?？蛻粝Ｍx擇更好的網(wǎng)站來滿足他們的需求。因此，企業(yè)有必要為他們提供貼心的用戶體驗(yàn)和服務(wù)。由于很多瀏覽器不時(shí)推出新版本，這使得開發(fā)人員很難處理跨瀏覽器兼容性問題。

跨瀏覽器兼容性是開發(fā)人員需要特別關(guān)注和處理的關(guān)鍵的一方面，并且由于可用的各種瀏覽器的工作機(jī)制不同，因此處理起來一直具有挑戰(zhàn)性。當(dāng)采用不同的設(shè)備操作系統(tǒng)組合時(shí)，它變得更加復(fù)雜。因此，發(fā)現(xiàn)如何解決跨瀏覽器兼容性問題是開發(fā)人員的一項(xiàng)高度優(yōu)先的工作，這對(duì)業(yè)務(wù)運(yùn)營至關(guān)重要。

什么是跨瀏覽器兼容性?

簡而言之，跨瀏覽器兼容性是Web應(yīng)用程序能夠在采用各種類型的瀏覽器、操作系統(tǒng)、設(shè)備的多個(gè)平臺(tái)上在外觀和行為方面一致運(yùn)行的能力。隨著生態(tài)系統(tǒng)中引入越來越多的設(shè)備、操作系統(tǒng)和瀏覽器，為它們提供支持對(duì)于前端開發(fā)人員來說是一個(gè)相當(dāng)大的挑戰(zhàn)。不同的用戶有不同的瀏覽器偏好，企業(yè)不能強(qiáng)迫他們切換到其他瀏覽器類型。

因此，檢查網(wǎng)站是否兼容舊的傳統(tǒng)瀏覽器也很重要。但如何才能實(shí)現(xiàn)這一切?它的重點(diǎn)是糾正開發(fā)人員面臨的主要跨瀏覽器兼容性問題。本文將回答關(guān)于什么是跨瀏覽器兼容性問題和解決方案。

以下深入探討一些導(dǎo)致開發(fā)人員瀏覽器兼容性問題的關(guān)鍵挑戰(zhàn)。

1.層疊樣式表(CSS)的問題

導(dǎo)致跨瀏覽器兼容性問題并使開發(fā)人員難以處理的最重要方面之一是層疊樣式表(CSS)。管理CSS非常復(fù)雜且無組織性。處理CSS不僅給Web開發(fā)人員帶來了挑戰(zhàn)，也給開發(fā)瀏覽器的人帶來了挑戰(zhàn)。借助新興的跨瀏覽器策略和測試工具，可以輕松解決兼容性問題。開發(fā)人員之間有一個(gè)共同的觀念，即開發(fā)人員希望更多地關(guān)注Web開發(fā)的邏輯方面而不是產(chǎn)品。Google瀏覽器在其最流行的子分支中研究了最常見的跨瀏覽器兼容性問題，例如CSS Flexbox、CSS Position Sticky、Grid、縱橫比和CSS轉(zhuǎn)換。

谷歌公司與微軟、Igalia和Mozilla合作，一直在努力解決兼容性2021項(xiàng)目(也稱為COMPAT 2021)的這些兼容性問題。微軟公司負(fù)責(zé)改進(jìn)Chromium瀏覽器中的CSS網(wǎng)格和子網(wǎng)格，并計(jì)劃讓所有網(wǎng)格測試都合格。

2.老舊瀏覽器的問題

Internet Explorer等傳統(tǒng)瀏覽器已經(jīng)過時(shí)，不再支持最新技術(shù)。即使是Mozilla Firefox、Google Chrome等其他瀏覽器的舊版本，也包含在老舊瀏覽器類別中。技術(shù)在不斷發(fā)展，所以CSS的功能必須隨著這種發(fā)展而改變。但說起來容易做起來難。完全實(shí)現(xiàn)CSS更新是不可能的，因?yàn)榧词乖诮裉?，許多用戶仍使用Internet Explorer作為他們的首選瀏覽器。

瀏覽器不斷發(fā)布更新的新功能，但并非所有用戶都使用其首選瀏覽器的更新版本。因此，需要測試這些問題，以避免所有瀏覽器和更新版本之間的瀏覽器兼容性問題，以獲得更好的用戶體驗(yàn)。

3.Internet Explorer過時(shí)的問題

Internet Explorer(IE)曾經(jīng)在很長一段時(shí)間主導(dǎo)了瀏覽器市場。但是，隨著技術(shù)的快速發(fā)展，Internet Explorer已經(jīng)過時(shí)并且不支持其他瀏覽器支持的功能。而兼容IE瀏覽器如今已經(jīng)成為開發(fā)者面臨的一個(gè)主要問題，也是導(dǎo)致跨瀏覽器兼容性問題的首要原因，因?yàn)椴糠钟脩羧匀徊捎肐E瀏覽互聯(lián)網(wǎng)。

它不能提供多類支持，表單布局設(shè)計(jì)不是很好，而且它也沒有使用其他地方可用的大多數(shù)新屬性進(jìn)行更新。盡管Internet Explorer支持CSS Flexbox，但仍不能完全解決問題。據(jù)悉，從2022年起，部分Windows10版本將不再提供對(duì)IE 11桌面的支持。MS Edge上的IE模式將用于訪問和測試IE。

很多人不會(huì)輕易放棄Internet Explorer，因?yàn)樗杏凭玫氖褂脷v史，而所有的瀏覽器都始于IE。Internet Explorer取得了巨大的成功，它在過去的貢獻(xiàn)也是如此。許多關(guān)于醫(yī)療健康、會(huì)計(jì)、庫存等的應(yīng)用程序都是建立在Internet Explorer之上的。即使在今天，許多企業(yè)仍在使用IE，因?yàn)榍袚Q到其他瀏覽器的代價(jià)很高?？紤]到上述所有原因，開發(fā)人員應(yīng)該理解IE不能被忽視的原因，至少目前是這樣，他們需要確保在Internet Explorer上也優(yōu)先測試跨瀏覽器兼容性問題。

4.JavaScript的兼容性問題

在解決跨瀏覽器兼容性問題時(shí)，開發(fā)人員也面臨JavaScript的兼容性問題。盡管HTML和CSS有了很多進(jìn)步，但構(gòu)建Web應(yīng)用程序依賴于JavaScript。開發(fā)者在使用JavaScript解決瀏覽器兼容性問題時(shí)面臨很多挑戰(zhàn)，主要是在網(wǎng)頁中使用了舊瀏覽器不支持的功能，或者使用了不合適的DOCTYPE和錯(cuò)誤的瀏覽器嗅探代碼等。

應(yīng)該有一個(gè)適當(dāng)?shù)臋C(jī)制來處理JavaScript等腳本語言，以消除JavaScript的跨瀏覽器兼容性問題。JavaScript相關(guān)的跨瀏覽器兼容性問題的一些示例是：

• 針對(duì)不同瀏覽器調(diào)整ECMAScript版本。
• 支持ECMAScript 6版本，但只能使用Polyfills。
• 沒有可用的JavaScript原生支持。
• 使用編譯器導(dǎo)致的代碼膨脹。
• JavaScript包含多個(gè)降低應(yīng)用程序速度的模塊和軟件包。

使用JavaScript解決跨瀏覽器兼容性問題對(duì)開發(fā)人員來說是一個(gè)很大的問題。因此，運(yùn)行跨瀏覽器兼容性測試以找出跨瀏覽器兼容性問題和解決方案至關(guān)重要。

5.布局和樣式兼容性的問題

大多數(shù)開發(fā)人員都在努力解決樣式和布局問題。任何企業(yè)都需要一個(gè)設(shè)計(jì)良好、反應(yīng)迅速的網(wǎng)站。但考慮到不同的瀏覽器、平臺(tái)和設(shè)備，這是不可能實(shí)現(xiàn)的。使用CSS Flexbox和CSS網(wǎng)格在各種瀏覽器之間實(shí)現(xiàn)持久的布局兼容性并不容易。具有響應(yīng)性設(shè)計(jì)和布局的動(dòng)態(tài)網(wǎng)站總是存在滾動(dòng)和視口大小支持等問題，這會(huì)給開發(fā)人員帶來嚴(yán)重的跨瀏覽器兼容性問題。

6.漸進(jìn)式Web應(yīng)用程序兼容性問題

漸進(jìn)式Web應(yīng)用程序是不具有原生Web應(yīng)用程序功能的一種非原生應(yīng)用程序。它無法利用設(shè)備的原生功能，如訪問相機(jī)或文件等。管理PWA已經(jīng)成為開發(fā)人員的痛點(diǎn)。但是，谷歌公司始終支持PWA的未來，并提供了用于PWA開發(fā)的API列表。PWA由蒙版圖標(biāo)支持，但需要向?yàn)g覽器攜帶固定圖標(biāo)和個(gè)人Web應(yīng)用程序清單。因此，瀏覽器兼容性至關(guān)重要，即使是漸進(jìn)式Web應(yīng)用程序也是如此。雖然頻繁更換圖標(biāo)無疑是人們最不喜歡的任務(wù)，但也不容忽視。

7.瀏覽器渲染期間的問題

有時(shí)，某些元素在一個(gè)瀏覽器上有效，但在另一個(gè)瀏覽器上無效。這些渲染問題會(huì)導(dǎo)致跨瀏覽器兼容性問題。每個(gè)瀏覽器引擎在呈現(xiàn)網(wǎng)頁時(shí)都以獨(dú)特的方式工作，而這些瀏覽器引擎提供人們?cè)跒g覽器上看到和使用的所有內(nèi)容。因此，字體大小和圖像比例可能變得不協(xié)調(diào)，導(dǎo)致頁面渲染不一致。除非您采用云計(jì)算測試平臺(tái)來簡化跨瀏覽器測試，否則在多種瀏覽器及其版本上測試網(wǎng)站的兼容似乎是不可能的。

8.延遲采用新更新的問題

開發(fā)人員不斷發(fā)布新功能，但瀏覽器并沒有立即接受這些功能。這種延遲會(huì)在實(shí)現(xiàn)中造成其他問題，導(dǎo)致嚴(yán)重的跨瀏覽器兼容性問題。每當(dāng)采用新功能出現(xiàn)延遲時(shí)，就會(huì)影響網(wǎng)站的質(zhì)量。Mozilla Firefox支持的CSS子網(wǎng)格有助于解決開發(fā)人員的前端和設(shè)計(jì)問題。CSS子網(wǎng)格是用于構(gòu)建嵌套網(wǎng)格的新CSS功能。另一個(gè)網(wǎng)格中有一個(gè)網(wǎng)格，可以幫助前端開發(fā)人員解決許多可預(yù)測的兼容性問題。

9.CSS Flexbox的問題

導(dǎo)致跨瀏覽器兼容性問題的另一個(gè)主要原因是CSS Flexbox。正如以上所提到的，CSS Flexbox包含在Compat21項(xiàng)目中，顯示了影響瀏覽器兼容性的問題。Flexbox產(chǎn)生的設(shè)計(jì)和布局問題被認(rèn)為是開發(fā)人員面臨的關(guān)鍵的瀏覽器兼容性挑戰(zhàn)。Flexbox提供了網(wǎng)頁內(nèi)容的結(jié)構(gòu)。70%以上的頁面的源代碼中包含CSS Flexbox。CSS Flexbox包含所有瀏覽器當(dāng)前不支持的屬性列表。

10.采用Polyfill引起的問題

Polyfill是一段JS代碼，用于為本身不支持它們的舊瀏覽器提供現(xiàn)代的瀏覽器功能。Polyfill對(duì)開發(fā)人員很重要，因?yàn)橛袝r(shí)許多功能會(huì)在瀏覽器中失敗。因此，為了應(yīng)對(duì)這種情況而使用了Polyfill。那么，為什么開發(fā)人員不愿意處理這種混亂的兼容性業(yè)務(wù)?這是因?yàn)槿绾谓鉀Q跨瀏覽器兼容性問題是開發(fā)人員的職責(zé)。

他們無法擺脫清理混亂和保持網(wǎng)站在不同平臺(tái)上的一致性。Polyfill被認(rèn)為是開發(fā)人員的額外負(fù)擔(dān)，因此開發(fā)人員不愿意采用，尤其是在舊瀏覽器的情況下。Polyfill是2021年最新出現(xiàn)的兼容性難題。

結(jié)論

跨瀏覽器兼容性是網(wǎng)站提供用戶體驗(yàn)所依賴的一個(gè)關(guān)鍵方面。對(duì)于開發(fā)人員來說，處理這些問題在大多數(shù)時(shí)候都是一場噩夢(mèng)。無論如何努力避免，它們都會(huì)占上風(fēng)，因?yàn)槌霈F(xiàn)錯(cuò)誤和開發(fā)工作是齊頭并進(jìn)的。而開發(fā)人員如今別無選擇，只能想方設(shè)法解決這些問題。

原文標(biāo)題：Major Cross-browser Compatibility Issues Faced by the Developers，作者：Priyanka Charak

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】