跨瀏覽器相容性背後的想法很簡單:確保您的網站在所有瀏覽器上看起來都相同。似乎常識是個理想的結果,對嗎?不過,在調試時不要亂扔這個短語,重要的是要理解它背後的完整含義。
為什麼它們不同?這些差異意味著什麼?
更重要的是:您如何測試相容性?
並非所有瀏覽器都是一樣的
當新的標準或功能出現時,並不是每個瀏覽器都會立即或同時支援它。由於瀏覽器編碼方式的差異,它們可能會以不同的方式解釋(甚至忽略)CSS 或 javascript 的某些行的顯示方式。
這也不僅僅限於網頁。電子郵件用戶端(例如 Gmail 或 Outlook)也選擇以不同方式解釋 CSS。在這種情況下,他們會更有選擇性地選擇允許或忽略哪些內容,以確保與其軟體的兼容性,並防止潛在的安全問題。
然而,在建立電子郵件通訊時了解它們很重要;使用錯誤的 CSS 屬性可能會導致電子郵件看起來非常不同。
不同的結果,不同的經歷
那麼這意味著什麼呢?讓我們再次考慮電子郵件通訊。假 英國電話號碼庫 設您尚未在不同的用戶端上進行測試,並且無意中依賴了 Outlook 不支援的 CSS 屬性。該電子郵件被發送給數百人,所有人都使用不同的電子郵件提供者和客戶端。很快您就會收到一則訊息,令人驚嘆的時事通訊設計看起來並不那麼令人驚嘆。
在許多情況下,這似乎是一個小小的不便,而且事情只是略有不同——不足以被大多數人注意到。然而,在某些情況下,時事通訊可能會出現災難性的錯誤。
例如,如果您放入帶有文字的背景圖像,則必須做更多額外的工作才能使其適用於所有用戶端。在 Outlook 中,不鼓勵背景圖像,它很可能根本不顯示,從而留下尷尬的空白空間,並且不會為您的客戶提供任何資訊。
石蕊-電子郵件-預覽這封電子郵件對大多數人
來說看起來都不錯。但是等等——注意雅虎!郵件?正文背景顏色未載入為白色,因此正文文字不可讀。這是一個大問題!(圖片來源:5 個有用的跨瀏覽器測試工具和服務)
充其量,它沒有吸引力。最壞的情況下,它是沒有用的。
無論哪種方式,您都向大眾發送了一封不專業的電子郵件。雖然大多數人不會花時間抱怨,但他們會不假思索地刪除它,甚至完全取消訂閱。
聽起來很嚇人嗎?抓住機會閱讀這兩篇文章“設計和構建電子郵件通訊而不失去理智(和靈魂)”和“電子郵件通訊設計:指南和示例”。他們會幫忙;相信我。
繼續:網頁呢?
跨瀏覽器測試測試瀏覽器時,您需要考慮不同的作業系統、螢幕解析度和瀏覽器版本。
不要忘記改變組合!(資料來源:CrossBrowserTesting)
一般來說,這裡的潛在差異 構服務我們的工作公司接觸年 通常沒有那麼大。 (這不是一種解脫嗎?特別是對於所有因 Internet Explorer 6 的停用而鬆了一口氣的開發人員來說。)也就是說,您仍然需要檢查您的網站…以防萬一。
也覆蓋您的所有基礎並在不同的場景中測試您的網站
例如,如果使用者的 JavaScript 被阻止,您網站上的功能是否會變得無法使用?網站在所有解析度下都能正確縮放嗎?
如果您使用較新的 CSS 或 Javascript 程式碼,舊版本是否有安全的後備方案?確保在使用新的東西或使用者或裝置可能會阻止的東西時始終有安全(且美觀)的後備方案。
差異的影響
那麼我們可能創造的這些不同體驗的結果是什麼?我相信你現在已經 巴西數據 開始明白了。這些差異將改變他們的看法,無論好壞。您最不想做的就是讓客戶很容易對您的品牌產生不良體驗。
這就是為什麼跨瀏覽器相容性的目標是創建一致性。它們不一定在任何地方看起來都一樣——例如,行動裝置上的網頁應該針對該裝置進行最佳化,並且為此目的而與桌面版本不同——但體驗需要相同。它應該是實用的、有幫助的,而且是經過精心設計的。
良好設計的目標是以盡可能最簡單、最流暢的方式引導客戶找到他們需要的東西。即使是一些看起來很小的錯誤,例如稍微錯置的選單,也可能會導致問題。你會想,“嘿,在桌面上看起來仍然不錯。