首页 > 代码库 > Modern.IE，创建现代网站的给力开发工具！
Modern.IE，创建现代网站的给力开发工具！
Modern.IE是微软推出的用来帮助开发者创建现代网站的基本开发工具。作为Web攻城师，最头疼的问题莫过于浏览器兼容性测试，各种类型浏览器，各种版本的浏览器，还有各种头疼的前缀等等。Modern.IE希望做到可以帮助咱们攻城师们把更多的时间能花在工程上，而不是在解决兼容性问题上。Modern.IE是一个非常有用的工具，貌似你已经迫不及待了，打开它吧：https://www.modern.ie。
网站分为几大部分：
1. 网站扫描工具Scanner
Scanner用来扫描发现常见的兼容性问题。 只要你在输入框中输入一个网页的URL，Scanner就会帮你生成一个报告。分为四类16项，包括：
A. 兼容旧版IE；
这个主要是为了解决兼容旧版IE的一些常见问题。
? 兼容模式。我们建议网站在标准模式下渲染，而不是在兼容下渲染。
? 网页的框架和库。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="http://www.mamicode.com/next"/>
<link rel="prev" href="http://www.mamicode.com/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。
Modern.IE，创建现代网站的给力开发工具！