Visual Studio 中新CSS编辑器的改进（ASP.NET 4.5 系列）

[原文发表时间] 2011-12-02 13:06

这是我的ASP.NET 4.5系列博文中的第七篇。

下一个.NET和Visual Studio版本将包含很多新特性和功能。在ASP.NET 4.5中，你将会看到很多非常好的运行和工具的改进。Web 窗体，MVC，以及ASP.NET核心基础都建好了。

今天的博文涵盖了我们在下一个Visual Studio的版本中所做的改进，以更好地在ASP.NET项目中使用CSS 和CSS3。

CSS 颜色选择器

在Visual Studio之前的版本中，在 CSS 编辑器中的intellisense引擎为命名的颜色值提供了hard-coded的下拉列表。Visual Studio新的版本用颜色选择器替换了列表，这将更容易从样式表中选取已经使用过的颜色，以及创建自定义的颜色样式。

当你在CSS编辑器中为CSS属性编辑颜色值时，一个新的颜色选择器将会自动出现。它在默认情况下显示一系列样式表中使用过的颜色，以及一个可用的默认颜色样本调色板。你可以使用鼠标或键盘从列表中选取一种颜色：

你可以选择“+”按钮来将列表展开为更丰富的颜色选择器以选取更确切的颜色。当移动不透明滑块时，它可以让你通过自动将任意颜色转换为CSS3 RGBA值来控制alpha通道。它还包括一个“颜色选择”功能，允许你使用取色器从浏览器中已加载的任意网站或系统中正在运行的应用程序中选取颜色：

很棒的视频：观看这个60秒的视频来看颜色选择器如何实际操作的。它展示了以下内容：在相同的样式表中使用其他颜色，创建新的颜色，使用 CSS3 不透明度功能，使用取色器从另一个应用程序/网站上捕获颜色。

跨浏览器和 CSS3 的代码段

当工作于相同CSS3 属性的所有供应商的特定版本时，编写样式表有时感觉是件重复性的事情。你经常不得不为每个浏览器编写相同的属性值——这在有些情况下需要编写5个相同的值。为了支持所有浏览器版本，它是乏味的却必须的工作。

Visual Studio 的下一个版本包括支持自动生成的所有供应商特定属性的 CSS 代码段。那就意味着在跨浏览器时，不需乏味的搜索和键入来获取CSS3的属性。

CSS代码段的工作原理如同现今Visual Studio中其它编辑器的代码段。例如，要为CSS3 transition 属性调用代码段，只需键入“transition”或从CSS样式表中的intellisense中选取：

然后按TAB键，Visual Studio将执行CSS过渡代码段，生成代码来支持所有浏览器的前缀。它也可以允许你改变一次值，接着自动将它传到所有其它属性值中：

很棒的视频：观看这个60秒的视频来看如何执行CSS代码段。它演示了代码段如何帮助解决供应商的前缀，以及支持像多媒体查询的方案来支持多个屏幕大小，跨浏览器-字体嵌入的情境。

分层 CSS 缩进

当我们观看现实世界的样式表时，一个趋势就是web 开发人员通常使用缩进来创建和维护在单独的CSS规则中的父类/子类关系。这样在文档中就创建了一个树形层次结构，它能更容易查看规则之间的关系以及它们逻辑上属于哪部分：

在 Visual Studio 的之前版本中，手动维护这些层次结构是件麻烦的事情。如果你修改了，CSS格式化程序将删除额外的缩进。这意味着你不得不手动格式化整个样式表。

在 Visual Studio 的下一个版本中，当一个部分或者整个文档被格式化的时候,我们将为创建CSS并维护它们添加内置的支持。这样就很容易查看样式表的结构和规则的层叠顺序之间的复杂关系。

Visual Studio 中全新的 CSS 编辑器也理解而且支持常见的 CSS hack，我们将这一知识引入到了缩进等级机制来维护规则的层叠顺序。即使它以hack文件名为前缀，如下截屏所示。

很棒的视频：观看这个60秒的视频来看CSS如何分层缩进。它展示了创建有层次结构的CSS 规则，以及即使在使用CSShack时它们是如何运行的。

总结

ASP .NET 和 Visual Studio的新发布将会在ASP.NET应用程序中更容易充分使用CSS的优点。

这篇博文涵盖了一些我们正在Visual Studio中添加的CSS编辑器改进。我的上一篇博文涵盖了JavaScript 和 CSS 的捆绑以及减少运行时。在以后的博文中，我将也会谈到一些ASP.NET web 窗体控件和ASP.NET MVC辅助器的改进，来让我们更好地使用CSS。

希望这会对你有所帮助

Scott

说明：除了博客之外，我使用Twitter来快速发表博文以及分享链接。我的Twitter是 @scottgu

Additional resources