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="/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。

Modern.IE，创建现代网站的给力开发工具！的更多相关文章

  1. 10个最佳的网站和App开发工具

    这个世界充满了创新,开发的激情和决心是实现更高目标的关键因素.在网站开发中,毫无疑问,工具和可用的在线网页和 app 设计资源,发挥了重要的作用. 下面我们将带来一些网站和 app 的最佳工具.   ...

  2. 2015第45周五IE11实用开发工具摘录及设置IE缓存

    UI响应工具的作用 UI响应工具顾名思义就是查看UI响应时间的工具,通过这个工具可以帮助我们确定应用中的哪些组件占用了多少CPU时间,让我们之后可以更有针对性的进行优化,从而最大限度地改善应用性能,同 ...

  3. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  4. 35款加速网站开发的 CSS 开发工具

    网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松.快速地学习 CSS 技术.这些工具中在高效开发 Web 应用程序中发挥重要作用. 在这篇文章中,我们收集了35个最好的 CSS ...

  5. SharePoint Online 创建门户网站系列之准备篇

    前 言 门户是SharePoint自推出以来,就非常适合的一种站点类型,在Server版本中,发布站点的应用非常广泛.这里,我们以一个个简单的例子,然后以一个固定的项目Demo,为大家演示如何一步步在 ...

  6. 使用 Cocos2d-x 3.1.1 创建 Windows Phone 8 游戏开发环境

    cocos2d-x 是目前流行的游戏游戏开发框架,目前最新的版本是 3.1.1, 网上有些教程已经比较老了,本文将会介绍如何使用最新的 3.1.1 创建 Windows Phone 8 开发环境. 本 ...

  7. 利用GitHub Pages和Bootstrap创建个人网站

    作为一名想要想找前端实习的即将毕业的学生,我最近意识到拥有个人网页会使自己的简历更容易被注意到.本文主要是我创建过程及个人心得,有些操作我也是第一次,所以难免在解释中会有错误.另外说明一下,我的电脑是 ...

  8. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  9. python创建简单网站

    前言 本方法基于web2py框架,使用web2py的完整网站数据包创建简单网站. web2py 是一个为Python语言提供的全功能Web应用框架,旨在敏捷快速的开发Web应用,具有快速.安全以及可移 ...

随机推荐

  1. CentOS 6.9安装类型选择（Basic Server/Web Server）

    Desktop :基本的桌面系统,包括常用的桌面软件,如文档查看工具. Minimal Desktop:基本的桌面系统,包含的软件更少. Minimal:基本的系统,不含有任何可选的软件包. Basi ...

  2. java中/与%的区别

    System.out.println(3/5) = 0: System.out.println(2/5) = 0: System.out.println(4/5) = 0: System.out.pr ...

  3. SQL 存储过程入门（事务）

    本篇我们来讲一下事务处理技术. 为什么要使用事务呢,事务有什么用呢,举个例子. 假设我们现在有个业务,当做成功某件事情的时候要向2张表中插入数据,A表,B表,我们插入的顺序是先插入A,再插入B表,如果 ...

  4. html 基础二

    HTMLCSS基础2 一.HTML中的标签 1.1标签的特点 给文本加上含有语义的标签 应该学习更多具体语义标签 标签:用“<>”包起来的内容 2.1 更多的标签 2.1.1 h系列的标签 ...

  5. NSPredicate谓词查询

    Cocoa提供了一个类NSPredicate类,该类主要用于指定过滤器的条件,该对象可以准确的描述所需条件,对每个对象通过谓词进行筛选,判断是否与条件相匹配.谓词表示计算真值或假值的函数. NSPre ...

  6. [置顶] kubernetes资源类型--持久化存储Persistent Volume和Persistent Volume Claim

    概念 存储管理跟计算管理是两个不同的问题.理解每个存储系统是一件复杂的事情,特别是对于普通用户来说,有时并不需要关心各种存储实现,只希望能够安全可靠地存储数据. 为了简化对存储调度,K8S对存储的供应 ...

  7. 容器窗口 <QTabWidget>

    ////////////////////////////////////////// #include "test9_2a.h" #include "M_win.h&qu ...

  8. EffectiveJava（10）覆盖equals是视情况覆盖toString

    覆盖equals是视情况覆盖toString 1.toString返回字符串 className@163b91 -calssName 类的名称 @ @ 163b91 散列码的无符号十六进制表示法 2. ...

  9. git学习——查看提交历史

    git log可以查看提交历史: 用-p选项展开显示每次提交的内容差异,用-2则仅显示最近两次的更新:git log -p -2 在-p选项后面使用--word-diff选项进行单词层面的对比.这其中 ...

  10. PS如何制作超酷3D字效果

    效果图.jpg (24.94 KB) 2008-4-4 21:46 1.打开PS 执行文件-新建-新建550X400像素空白文档 1.jpg (36.69 KB) 2008-4-4 21:46 2.输 ...