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。