Web Essentials中大多数的CSS功能也适用于LESS。
如果添加了供应商特定的属性,许多CSS 3的新属性都会跨浏览器工作。这些供应商特定的(vendor-specific)属性包括-moz,-webkit,-ms和-o。想要了解关于供应商的前缀,请查看 这篇文章 。
结果是以正确的顺序插入丢失的供应商特定的属性。
如果一个或更多的供应商特定的属性已经存在了,那么只会添加丢失的属性。
点击只能的提示就可以自动插入丢失的标准属性:
对于自定义IOS滚动条,VS2012支持不同的伪元素。如果你不知道如何正确地链接这些伪元素,那么它是有点困难的。现在这不再是个问题了。
不多说,直接看效果:
开始输入时,文件系统就会智能提示。
查看 这篇文章 了解更多。
现在已经提供了!important的智能提示。
Modernizr类名现在在CSS编辑器中是加粗的。
CSS编辑器可以更容易地添加region了。
输入region,然后按下TAB键,就会插入下面的代码段
在media查询中可以获得所有智能提示。
支持所有的颜色类型,包括新的CSS 3格式。
要想控制验证和智能感知如何表现,取决于你想要支持的浏览器。
在CSS文档中右键,在Web Essentials的上下文菜单中点击“select browser...”。
因为要验证和识别所有的供应商特定属性是非常困难的,所以,就很容易犯错误。别担心,验证器会自动地调出任何位置的或者过时的供应商特定属性。
IE10公开预览版引进了新的前缀属性,比如-ms-animation。最终版的IE10也实现了那些属性的无前缀版本,用于过时的有前缀版的渲染。
在VS的错误列表中会提示这方面的信息:
一些错误是很普遍的。Web Essentials现在会检查那些错误,并提供更精确有用的错误信息来帮你修复它们。
CSS编辑器不支持\9 hack,这就会产生错误。Web Essentials会移除这些错误。
如果没有提醒的话,很容易犯HTML拼写错误。现在,无论是旧的HTML标签还是新的HTML 5标签名都会检查到。
颜色函数(比如rgb(1,2,553))会被验证以确保该参数在允许的范围内。
Web Essentials会检查驱动验证和智能感知的模式文件的更新。如果有更新,就会后台下载然后立即使用。
当新的浏览器发布时,供应商经常会引进新的供应商特定的属性。Web Essentials会自动更新和新浏览器特定兼容的模式文件。
Web Essentials具有新的CSS变量语法,可以获得智能感知和相同变量的颜色块。
把光标放在一个十六进制的颜色值上,然后按住SHIFT+CTRL+ARROW UP/DOWN来加深或变浅该颜色。看下面的演示:
如下图,点击倒三角提示,就可以实现不同格式的颜色转换:
这个会把引用的图片直接以base64编码到样式文件中,这样,你就减少了一个HTTP请求。
如果base64字符串太长,你可以轻易地折叠起来。不过,在VS 2013 Update5中,所有的base64字符串都在一行显示。
记住:在将这些图片转成base64字符串前,先要优化该图片文件。使用Image Optimizer插件可以轻易地对图片进行优化。
在每个选择器上的倒三角提示都可以让我们轻松地按照规则给所有的属性排序。
CSS的排序是开源的,你可以在 Github 上找到代码。
你可以直接在编辑器中将CSS最小化。下面演示一下操作过程:
你可以最小化和bundle整个CSS文件。这已经在 通用功能 一节讲说了,就不再啰嗦了。