微软发布Web标准更新 增加VS 2010中的HTML5支持

开发 前端
许多人在问“VS2010 何时才支持 HTML5?”我曾玩笑式地说,答案是“昨天”,因为今天没有什么能阻止您在 Visual Studio 或 ASP.NET 中创建 HTML5。

许多人在问“VS2010 何时才支持 HTML5?”我曾玩笑式地说,答案是“昨天”,因为今天没有什么能阻止您在 Visual Studio 或 ASP.NET 中创建 HTML5。然而,智能感知的缺乏和大量复杂代码的存在使人们很不舒服。除此之外,还存在这样一个事实,HTML5 是一个不断变化且不明确的目标。我们之前说过,下一个 Visual Studio 版本将更好地支持 HTML5,但如今又如何呢?

[[33720]]

 今天,Web 平台和工具团队中以 Mads Kristensen 为首的一群特立独行的成员,很高兴地发布了Visual Studio Web 标准更新

此更新向所有 Visual Studio 版本增加了对 HTML5、CSS3 和新 JavaScript 功能的更好支持。

下载第一个 Visual Studio Web 标准更新

HTML5 正在迅速发展,此更新的目的将与之保持步调一致。它向 Visual Studio 和及其编辑器添加了对 HTML5、CSS3 和新 JavaScript 功能的支持。随着新功能或元素的不断诞生,大约每个季度更新一次目标。我们希望 ASP.NET web 开发人员始终能够使用最新的标准,还能够选择现有标准。请记住,您如今可以结合使用 HTML5 和 Modernizr 等 JavaScript 库,创建可在几乎所有浏览器(包括过时的旧浏览器)上运行的页面。

Visual Studio Web 标准更新为您提供了对以下内容的智能感知和验证:

HTML 5 功能

视频和相关标记

音频和相关标记

新输入类型,比如电子邮件、url、日期等

拖放支持

可访问性标准 WAI-ARIA

微观数据

Schema.org 和 SEO 更加友好的

浏览器 API

地理位置 – 位置感知网站是一种明确的发展趋势,而且现在您能够在 Visual Studio 中获得全面的智能感知和验证功能。关于优秀的示例,请查看 IE9 测试演示上的源代码。

本地存储 – IE从 IE8 开始就支持本地存储,所以现在 Visual Studio 将为您提供逼真的智能感知,来创建可在浏览器内保存状态的网站。相关示例请查看 HTML5 演示网站上的源文件。

CSS3

2D 变换

3D 变换

动画

背景和边框

基本框模型

基本 UI

行为

颜色

弹性框布局

字体

为分页媒体生成的内容

超链接表示

线

列表

字幕

媒体查询

多列

命名空间

页式媒体

表示级别

Ruby

选择器

语音

语法

模板布局

文本

过渡

此外,如果您尝试创建适合各种平台和浏览器的网站,您将喜欢 Web 标准更新,因为它不仅支持 IE 特定的前缀(比如 –ms),还支持其他供应商前缀(比如 –webkit 和 –moz)。

Visual Studio 中的 HTML5

启动 Visual Studio 2010 时,您可以逐个文件选择想要的 HTML 版本,或者设置默认值。

旁注:看到显眼的 IE6 了吗?它很久以前就在这里了。希望它很快就会消失。忽略它。

 

HTML5 in the HTML Toolbar dropdown

 

您也可以在 Tools | Options | Text Editor | HTML | Validation 中将它设为默认值。请留意错误选项。

 

Options (87)

 

所有新的 HTML5 语义标记都在那里,比如 section、svg、video 等。这只是第一个版本,尽管它确实很完善,但我敢肯定一定存在一些 bug。但是,它将定期更新,所以请确保您报告了发现的任何错误并期待它在下一个版本中得到修复。

 

Adding an Audio Tag

 

甚至还支持一些重要(但利用不足或未得到足够重视的)属性,比如 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)

 

Adding a main role to a nav tag

 

另外,aria-* 属性不仅显示为启用了智能感知的属性,还显示为它们的枚举值:

 

Adding aria-autocomplete to an IMG tag

 

标记当然非常有趣,那么微观数据又如何呢?Bing、Google 和 Yahoo 都支持微观数据,以及更具体的 schema.org 词汇。因此,此更新将向大部分流行的词汇(包括 schema.org 和 data-vocabulary.org)添加智能感知。

 

Adding http://schema.org/ attributes to an article

 

请告诉我这并不是热心过度。伟大的 SEO!

Visual Studio 中的 CSS3

前面仅仅介绍了 HTML5。还支持 CSS3。是的,它比 CSS2 更优秀。

 

CSS3 in the dropdown

 

它包含所有出色的新 CSS3 功能,比如 column-full,当然还有圆角边框以及动画和变换。还有许多关于 –webkit、-moz 和 –ms 等供应商特定前缀的详细信息。

请注意在我们挑选 -webkit-transform 快捷属性时,下拉框中的参考工具提示。

 

Some -webkit attributes

 

Visual Studio 中的 JavaScript 和 HTML5

此更新中增加了众多 JavaScript 智能感知功能。比如通过 navigator.geolocation 实现的地理位置和通过 window.localStorage 实现的 DOM 存储。

 

Geolocation in JavaScript in VS

 

以下是使用一些新的本地存储功能并显示智能感知的一些 HTML5 和 JavaScript 代码片段。

 

LocalStorage in the editor

 

您或许喜欢将智能感知视为一种概念或精神寄托,但我喜欢将它视为一种即时对象浏览器,它可帮助我探索新技术,以及发现我可能未注意到的角落和缝隙。

我们不知道下一个版本的 Visual Studio 或下一个版本的 HTML5 中会出现什么,但是对于有兴趣了解这些内容的人员,我们希望 Visual Studio 的这个 Web 标准支持“实时更新”将对您有所帮助!

亲爱的读者,请尽情体验。

备注:此更新适用于希望使用 HTML5、新 JavaScript 功能和 CSS3 的 ASP.NET 和 HTML5 编辑人员。我没有提及 Silverlight,因为它与 Silverlight 没有关系。我曾经说过“只是因为您最喜欢的技术没有在主题演讲中提及,就认为它销声匿迹了,这是不对的。”假设相同的规则也适用于博客文章。

补充备注:右侧的徽标并不是官方徽标,只是觉得有趣就放在这里了。

原文链接:http://www.cnblogs.com/msdnchina/archive/2011/06/20/visualstudio2010html5update.html

【编辑推荐】

  1. 最新HTML 5与Flash性能比较报告出炉:大跌你的眼球
  2. 有关HTML 5的流言与真相
  3. HTML 5来袭:Web前端开发面临十字路口
  4. HTML 5规范即将正式公布 正进行最后聆讯
  5. HTML 5可以做五件事情 超出你的想象
责任编辑:陈贻新 来源: MSDN
相关推荐

2011-07-19 13:39:20

iOS HTML5

2012-05-01 22:15:18

HTML5

2011-12-05 14:49:55

HTML5傲游

2010-01-27 09:17:43

Office 2010GUP加速

2011-09-27 17:37:22

2009-11-23 09:50:54

HTML5IE9

2009-12-24 13:30:51

Fedora Core

2009-11-27 13:43:21

MyEclipse 8Struts 2

2011-10-13 15:11:47

2011-03-07 12:31:54

Filezilla

2013-07-31 10:53:53

LISServer 2012

2011-12-31 11:11:01

2014-10-30 11:25:24

2012-05-16 09:27:53

Chrome浏览器

2013-01-30 15:35:47

AdobeHTML5

2012-05-22 08:52:09

HTML5

2011-08-11 14:33:13

加密RSA虚拟化

2012-01-10 09:36:24

Windows 8ARM

2013-08-23 14:56:24

Windows 8.1

2010-04-14 16:29:26

Exchange Se
点赞
收藏

51CTO技术栈公众号