Modern.IE，建立現代網站的給力開發工具！

時間 2019-11-21

標籤 modern.ie modern 建立現代網站給力開發工具欄目網站開發简体版

原文原文鏈接

Modern.IE是微軟推出的用來幫助開發者建立現代網站的基本開發工具。做爲Web攻城師，最頭疼的問題莫過於瀏覽器兼容性測試，各類類型瀏覽器，各類版本的瀏覽器，還有各類頭疼的前綴等等。Modern.IE但願作到能夠幫助我們攻城師們把更多的時間能花在工程上，而不是在解決兼容性問題上。Modern.IE是一個很是有用的工具，貌似你已經火燒眉毛了，打開它吧：https://www.modern.ie。html

網站分爲幾大部分：android

1. 網站掃描工具Scannerweb

Scanner用來掃描發現常見的兼容性問題。只要你在輸入框中輸入一個網頁的URL，Scanner就會幫你生成一個報告。分爲四類16項，包括：windows

A. 兼容舊版IE；瀏覽器

這個主要是爲了解決兼容舊版IE的一些常見問題。網絡

Ø 兼容模式。咱們建議網站在標準模式下渲染，而不是在兼容下渲染。app

Ø 網頁的框架和庫。Scanner會掃描網站是否使用了過期的框架或者是庫，使用過期的框架和庫可能會致使比較多的兼容性問題。框架

Ø Web標準Docmode。咱們建議使用一個標準的HTML5 DocType（<!DOCTYPE html>）來告訴瀏覽器用標準模式渲染網頁，這能使網站可以在Modern IE或者其餘Modern瀏覽器中裏大大提升頁面的性能體驗。工具

B. 瀏覽器兼容性問題；佈局

這個主要是幫助開發者作兼容性測試，讓網頁能夠在五花八門的設備和瀏覽器中更好地展示。

Ø CSS前綴。咱們有不少屬性僅在加了前綴才能在特定的瀏覽器中支持，只有標準的屬性才無需添加瀏覽器前綴。Scanner會掃描查看是否是有未添加瀏覽器前綴的屬性。

Ø 瀏覽插件。咱們建議不帶任何插件，以免在其餘瀏覽器中不支持。

Ø 響應式網頁設計。咱們如今設備愈來愈多，分辨率也愈來愈多，咱們須要適配各類設備，在各類設備上網站都能有很好的體驗，咱們建議採用響應式的網頁設計。咱們是經過掃描媒體查詢的最大和最小屬性來識別的，媒體查詢是當今響應式網頁設計的指標之一，咱們知道這樣作掃描並非特別完善，咱們會繼續改進。

Ø 瀏覽器檢測。咱們推薦使用功能檢測而不是採用UA檢測。這種作法首先是要判斷瀏覽器或者設備是否支持某一特定特徵，而後根據這個來選擇最佳的體驗去渲染。你可能要經過框架執行特徵檢測來替代瀏覽器檢測，例如經過： Modernizr 或者經過特徵檢測代碼。詳情參見：瀏覽器功能檢測。

Ø 優化網頁上的圖片。愈來愈多的用戶使用手機或者其餘移動設備瀏覽網頁，因此未優化或者未壓縮的圖片將大幅度地影響用戶下載你網頁的速度，極大影響用戶體驗和提升了跳出率。若是須要優化圖片，可使用https://kraken.io/ 來進行。

Ø HTML5輸入類型。支持新HTML5輸入類型的瀏覽器能夠提供一個鍵盤佈局，使之更好地配合那一區域（好比一封email）或者顯示一個專用的控制（好比日期），這能夠改善用戶的體驗。這能夠幫助你的用戶在填充時避免錯誤，以至加快進度。

Ø 預渲染+預提取。經過使用這些技術可使你的用戶可以體驗更快的網站瀏覽，不然的話將會影響用戶體驗，提升網站的跳出率。

Ø 壓縮內容。須要啓用壓縮機制來傳輸，這對於減小加載時間很重要，能讓用戶更快地加載你的網站，一樣是基於用戶體驗的考慮。能夠考慮使用gzip壓縮或其餘相似功能。

C. 利用Windows 8中的新特性。

這主要是建議攻城師童鞋們能夠利用最新的Windows 8的新特性，好比觸控瀏覽和「開始」屏幕網站磁貼。開發者可利用Windows的這些新功能，爲用戶提供更加個性化的瀏覽體驗。

Ø 啓用觸控模式。如今已經不是PC的時代了，如今是移動的時代，是觸控的時代。若是你的網站不能在觸控模式下有着很好的體驗，那麼你將在將來的時間裏流失大量的用戶。對於一些網站，一個好的觸摸體驗僅僅須要注意一些最基本的東西，好比使用適當大小的按鈕，避免鼠標懸停菜單。你能夠閱讀咱們如何確保觸控用戶有效地使用你網站的小技巧。若是爲了更加豐富的觸摸體驗、給觸控用戶更加優秀的體驗的話，能夠啓動筆勢和專用的平移／縮放行爲。更加能夠考慮使用指針事件來支持更先進的互動，好比觸摸、鼠標和筆。最近，微軟已經向W3C提交了指針事件規格，這將使得網站的互動模式向互操做交互式觸控的將來發展。

Ø Flip Ahead瀏覽。咱們建議"prev"和 "next"連接關係。這兩個屬性能夠幫助搜索引擎和瀏覽器更好地理解你網站內容的層次結構，並且能夠啓用一些新功能來改善你訪問者的瀏覽體驗。

<link rel="next" href="/next"/>

<link rel="prev" href="/prev"/>

Ø IE11 Tiles+通知。咱們建議攻城師們在作web開發的時候建立一個Windows 8的開始屏幕上的Tile。一個開始屏幕Tile可讓你的網站標誌與您的用戶更加接近，用戶能夠將你的網站"釘"在Windows Store apps旁邊，並能夠直接打開。添加只須要下面兩行代碼而已：

<meta name="msapplication-TileColor" content="#123456"/>

<meta name="msapplication-square150x150logo" content="square.png"/>

若是須要建立更多的Tile的樣式，參見這裏。

D. 輔助功能的改進。

這一項主要是讓網站可供具備各類不一樣的瀏覽習慣和身體缺陷的用戶訪問。

Ø 圖片Alt屬性。咱們建議給img標記添加ALT屬性（就是給圖片加上簡短的一個描述），僅須要幾秒鐘而已。不只僅是由於這樣能讓搜索引擎能經過更多的方式搜索到你的網站，並且由於網絡是開放給任何人的，任何人都應該可以享受它。好比有些殘障人士須要使用屏幕閱讀軟件來閱讀你的網站，那麼只有你添加了ALT屬性，他才能閱讀你的圖片。

Ø Aria屬性。若是但願使網站可供具備各類不一樣的瀏覽習慣和身體缺陷的用戶訪問，咱們建議添加aria-*屬性。WAI-ARIA (Accessible Rich Internet Applications)這種方法提供了一些方式來定義你的動態Web內容和應用程序，以使具備殘障人士可以識別而且成功與之交互。這是經過定義文檔或應用程序結構的role，或經過定義部件角色、關係、狀態或屬性的aria-*屬性來完成的。大量aria-*屬性可以使您的內容更容易導航和理解。 aria-labelledby, aria-level, aria-describedby, 和 aria-orientation等屬性都使您的內容更容易理解。您可在ARIA聲明和屬性頁上查閱更多相關信息。

2. RemoteIE

RemoteIE使用的是微軟Azure的RemoteApp服務，使得攻城師童鞋們能夠在任何設備任何地方測試你的網站是否在Windows 10最新版本的IE上是否能正常工做包括Windows、Mac OSX、iOS以及 Android。

很是簡單的四個步驟：

A. 註冊RemoteApp服務。https://remote.modern.ie/login

正常狀況下，你很快就會收到微軟的一封郵件，說你可使用Remote IE了！

B. 下載安裝RemoteApp

在你準備測試的設備上安裝RemoteApp客戶端，目前支持Windows、Mac OSX、iOS以及 Android。

Ø Microsoft Remote Desktop for Mac

Ø Microsoft Remote Desktop for iPhone and iPad

Ø Microsoft Remote Desktop for Android

Ø Microsoft Remote Desktop for Windows Phone 8.1

Ø Azure RemoteApp for Windows x86

Ø Azure RemoteApp for Windows x64

Ø Azure RemoteApp for Windows RT

C. 打開RemoteApp客戶端並登陸

打開RemoteApp，須要登錄微軟的live id（啊，什麼是live id），若是沒有，到這裏申請哈。記得這裏登陸的帳號和你註冊RemoteIE的帳號須要同樣的。

D. 從RemoteApp打開IE

若是你在應用列表裏頭沒有看到IE Technical Preview，不要着急，再等一段時間嘗試點擊「App invitations」的按鈕哈。當你看到下面的這個圖的時候，你就大功告成了！

E. 輸入網址測試網站

輸入你的網址開始測試吧！

3. IE虛擬測試機

能夠在你的開發環境上的運行IE的虛擬機來測試各版本的IE，不管你的機器是OS X，Linux仍是Windows！

到這裏下載吧：https://www.modern.ie/zh-cn/virtualization-tools

除此之外微軟還和BrowserStack合做，經過BrowserStack，攻城師們無需下載任何的東西，直接就在BrowserStack的成百上千臺虛擬機上測試你的網站，只要你有瀏覽器，能上網！

4. 兼容性檢查工具

這是用來是一個基於JavaScript的測試工具，運行它會分析你的網站，掃描modern IE再也不支持的代碼。兼容性檢查工具監視會引發問題的交互模式並自動報告這些問題。這容許你迅速識別問題，不用去熟記一大批文檔。咱們是使用Sauce Labs的服務來作這個測試的，Sauce Labs會幫助咱們建立一臺虛擬機來運行兼容性檢查，該虛擬機實例會被刪除，沒有人將能夠訪問它。若是想繼續瀏覽，請註冊一個免費帳號 http://saucelabs.com/signup 便可訪問100+的瀏覽器/設備/操做系統平臺。

5. 瀏覽器截屏

BrowserStac的自動化截屏可以確保你的網站在各類設備和瀏覽器上正常瀏覽。利用BrowserStack自動化截屏，你將會獲得即時視覺反饋。在modern.IE這，咱們將向您展現你的網站在常見的9個瀏覽器和各設備上的截屏。你甚至能夠下載這些截屏圖片。想要更多的選擇,請訪問 http://browserstack.com/screenshots。

Modern.IE是一個很是好用的工具，快點試試吧https://www.modern.ie。