五招讓您的網站更適應微軟Edge 及其他流行瀏覽器
Edge 是微軟件最新的網站瀏覽器,帶有最新的頁面渲染引擎 – EdgeHTML :該引擎潛伏在操作系統的底層,隨著Windows 10操作系統一起啟動。由于大部分的 Windows 7, 8 以及 8.1 的用戶都可以免費升級到 Windows 10, 所以您可以預期到在接下來的一或數 個月中,您的網站將會迎接大批的Edge 用戶了。
Edge是微軟件公司對以瀏覽器的一個告別,基本上相當于把以前版本的 IE 代碼完全推到重新來過了,但我確信大部分的開發人員都會喜歡微軟件這個做法的。把我分享的這五點記在心里,會幫助您的網站更適應當前流行的網絡瀏覽器,同時您也可以借機測試下網站同微軟的 Edge 的兼容性。
1. 更新您的 JavaScript 庫文件。
通常來說, 象 Jquery 這樣的腳本庫都會在新版本的瀏覽器發布之時,為修復相應的兼容性的問題時出一版更新。只需要簡單的更新下您的 JS 框架代碼,就可以避免很多和 Edge兼容性的問題了。
在我們內部調查發現:在排名前兩萬位的網站里面約有 57%因為沒有更新JS 框架代碼,從而產生了很多和瀏覽器兼容性的問題。您可以借用工具 (site scanner) 檢查一下您的網站是否也正在用已經過時了的JS 腳本庫文件。
2. 避免 CSS 前綴
CSS前綴一般都是瀏覽器的供應商想執行或整合新的 CSS 特性到瀏覽器之時,而這些特性還沒有 W3C的組織正式批準下來。 如果這些瀏覽器的供應商使用了一些 CSS的前綴時,其 CSS 的文件格式里面就會有一些代碼象下面的這些例子一樣(這個例字是 IE 規格說明書里面運行的關于連接線的功能,以連接那些跨越多行的文字)。
-ms-hyphens: auto;
對于網站來說有一個很普通存在的問題,就是漏掉了開發商指定的前綴,或是特別加了開發商們指定的前綴,而這些前綴在通用的 CSS 規范中已經不需要了。于是您的網站在微軟的 Edge 瀏覽器或是其它一些流行的瀏覽器里就不能被正常的渲染了。
現在瀏覽器的開發商們已經很少用各種前綴了,因為處理這些前綴的后期管理和維護問題太多了。對于有些瀏覽器,包括微軟的 Edge 就根本從來沒有用過帶前綴的這種標簽。
如果有可能的話,盡可能的不要在您的網站里面使用這種開發商們指定的前綴標簽。如果迫不得已一定要用的話,記得使用相關的工具,如 Grunt PostCSS 加入到您的 CSS 文件里面一起管理您的前綴標簽。
3. 避免偵測瀏覽器版本
有些網站利用瀏覽器偵測技術,根據偵測到的瀏覽器的版本來決定應該使用哪種頁面渲染方式。我們所推薦的是根據瀏覽器的特征來做判斷,實踐才是起首要的決定性作用,如果一個瀏覽器或者設備是支持某個指定的特征的時候,我們就根據這個信息調用相應的代碼去潤色網頁。
特征偵測技術相對于瀏覽器偵測來說絕對是個偉大的轉變,當前我們主要是通過 JavaScript 的腳本庫,比方說: Modernizer 來實現的,您也可以自己編寫相對應的代碼來實現這個功能。
特征偵測技術在當前流行的瀏覽器上基本都已經配置好了,對于那些比較舊并不是原生支持這技術的瀏覽器,我們可以通過加填充代碼來實現這個功能。
我們會在后面的文章里面詳細介紹,如果更好的使用 Modernizer, 幫助舊瀏覽器實現特征偵測技術的填充代碼以及其它的一些兼容性技術,敬請期待。
4. 成為無插件網站
Edge 并不支持插件,所以對我們來說現在是一個好時候來考慮要怎么移除那些私有的插件了,象Flash或者是Silverlight. Edge 其實是支持 Flash 的,但他并不是通過插件的架構來使用的。 Flash是隨網頁一起發布的,并且 Flash 組件的更新和維護是由 Edge 團隊和 Adobe 一起合作完成的。
對于有些網站,移掉這些插件是相當的容易。然而對于大多數網站來說,這并非易事,特別是那些發布了很多多媒體內容的網站。Edge 團隊已經在他們的博客上面發布了指導文件,告訴您如何將您這些寶貴的內容移到 HTML的頁面上。
5. 確保 Edge 的渲染模式
假如您網頁中漏掉了 <!DOCTYPE>指令,或者是沒有按標準正確的指出文件的類型, Edge有可能無法正常顯示您的網頁。 有掃描工具可以做一個簡單的測試看看您的網頁是否都做了正確的設置。在該工具里輸入您的網站域名快速查一下是否您的網站可以通過測試。如果您想了解下這個測試的基本原理,您也可以在 Github找到這個程序的原代碼。
結語
這文章是微軟件關于網站開發傳播系列之一,主要是包括在了 JS實踐操作,開源項目以及兼容性的測試項目:包括了微軟的 Edge 以及新的 EdgeHTML 頁面渲染機制了,我們會在后續的文章里面繼續關注相關的工具介紹。
不深思則不能造于道。不深思而得者,其得易失。
名人名言- 曾國藩
- By 優聯實達(譯)
- 2015-10-05
- 1644
- 公司新聞,網站開發,網站設計,UI