一旦你花時間了解一下 Web
瀏覽器的歷史并了解它們的工作原理,構(gòu)建和測試跨瀏覽器兼容網(wǎng)站的必要性就顯而易見了。想要盡快掌握跨瀏覽器兼容網(wǎng)站技術(shù),參加Web前端培訓也是個不錯的方法,幾個月的學習就能掌握全面系統(tǒng)的知識和技能,快速上崗。
但是,了解跨瀏覽器工作的 Web 應(yīng)用程序的重要性是一回事,而為其開發(fā)又是另一回事。
雖然幾乎不可能讓每個瀏覽器的設(shè)計看起來都完全相同,但有幾種方法可以確保你提供一致的用戶體驗。有一些技巧可以讓你的網(wǎng)站交叉兼容。
1. 保持代碼簡單。在編碼時考慮質(zhì)量而不是數(shù)量。不要將十行代碼專門用于只需要三行代碼的功能。簡單的代碼不僅對跨瀏覽器更友好,而且在需要調(diào)試或調(diào)整兼容性時也更易于維護。
2. 使用框架。Foundation 和 Bootstrap 等 CSS
框架將為你提供樣式代碼,讓你更輕松地進行交叉兼容性。如果你花時間熟悉某些功能,構(gòu)建響應(yīng)式 Web
應(yīng)用程序?qū)⒆兊酶?、更容易。這些還將幫助你使應(yīng)用程序在移動瀏覽器中的外觀和行為正確無誤。
3. 定義有效的 Doctype。Doctype 是你代碼中的第一行,它描述了將在你的應(yīng)用程序中使用的
HTML。因為不同的瀏覽器有不同的標準和規(guī)則,所以你需要定義Doctype,否則渲染引擎基本上會為你猜測。當然,這可能會導致你想要避免的錯誤和不一致。在Web前端培訓中,有理論課程+實踐項目一起學習,深化所學知識,積累項目經(jīng)驗,獲得快速提升。
4. CSS 重置。每個瀏覽器都遵循不同的默認 CSS 規(guī)則。這就是為什么你使用 CSS
重置樣式表來確保你的瀏覽器遵循相同的基本規(guī)則并保持一致。你希望將其中一個添加為第一個樣式表以進行重置,除非你使用已經(jīng)擁有的框架。
5. 驗證。驗證你的 HTML 和 CSS 以防止出現(xiàn)問題是個好主意。使用 W3C HTML Validator 和 CSS
Validator 來確保你的代碼沒有錯誤,如果沒有則修復(fù)它。
6. 條件注釋。條件注釋允許你鏈接不同瀏覽器的樣式表,這在涉及 Internet Explorer
常見的設(shè)計挑戰(zhàn)時特別有用。
7. 為差異做好準備。同樣,幾乎不可能有一個在每個瀏覽器上看起來都相同的設(shè)計,除非它非?;?。無論你遵循什么規(guī)則,形式和排版等細節(jié)都可能會有所不同。你的主要關(guān)注點不應(yīng)該是讓設(shè)計在每個瀏覽器上看起來都相同。相反,你應(yīng)該確保它看起來可以接受并且可以使用,而不會包含不合適的元素或阻止某人訪問某些功能的元素。
8. 不要跳過跨瀏覽器測試。在開發(fā)時記住這些技巧是不夠的。
盡管你試圖避免它,但很容易意外地編寫在一個瀏覽器中不起作用的東西。 這就是為什么你需要在交付前檢查該站點是否在不同瀏覽器上實際運行的原因。 使用
CrossBrowserTesting 之類的工具,你可以在 1,500
多個瀏覽器中執(zhí)行此操作,因此你永遠不必想知道用戶從不同的機器訪問你的頁面時看到的內(nèi)容。初學者想入門前端,最好的辦法是參加Web前端培訓,有經(jīng)驗豐富的專業(yè)講師面授指導教學,實時解決疑難雜癥問題,學習起來又快又有效。