Web Essentials之样式表StyleSheets

简介:

本篇目录

Web Essentials中大多数的CSS功能也适用于LESS。

智能感知

生成供应商特定的属性

如果添加了供应商特定的属性,许多CSS 3的新属性都会跨浏览器工作。这些供应商特定的(vendor-specific)属性包括-moz,-webkit,-ms和-o。想要了解关于供应商的前缀,请查看这篇文章

577014-20160110215354293-1611993401.png

结果是以正确的顺序插入丢失的供应商特定的属性。

577014-20160110215619809-784846993.png

如果一个或更多的供应商特定的属性已经存在了,那么只会添加丢失的属性。

自定义字体

577014-20160110220247200-446283041.png

添加丢失的标准属性

点击只能的提示就可以自动插入丢失的标准属性:

577014-20160110220650496-1284919860.png

IOS 滚动条

对于自定义IOS滚动条,VS2012支持不同的伪元素。如果你不知道如何正确地链接这些伪元素,那么它是有点困难的。现在这不再是个问题了。

577014-20160110221121700-1544845324.png

供应商特定属性值同步变化

不多说,直接看效果:

577014-20160110221930934-2110659303.gif

动画名字

577014-20160110222042090-538274058.png

HTML元素,类和Id

577014-20160110222138950-1984239344.png

内联URL检出器

开始输入时,文件系统就会智能提示。

577014-20160110223429621-2038328879.png

Hacks

查看这篇文章了解更多。

577014-20160110224349153-1726174843.png

!important

现在已经提供了!important的智能提示。

577014-20160110224648606-1178829760.png

Modernizr

Modernizr类名现在在CSS编辑器中是加粗的。

577014-20160110224930653-1481678081.png

添加regions

CSS编辑器可以更容易地添加region了。

输入region,然后按下TAB键,就会插入下面的代码段
577014-20160110225100512-1369711372.png

media查询表达式

在media查询中可以获得所有智能提示。

577014-20160110230346950-1818927570.png

media查询代码段

577014-20160110230441434-487832162.png

视觉提示

浏览器提示

577014-20160111212450538-1128865918.png

字体和图片预览

577014-20160111213419428-1392993601.png

577014-20160111213647772-287307722.png

颜色样式

支持所有的颜色类型,包括新的CSS 3格式。

577014-20160111213940897-34122235.png

验证

浏览器选择器

要想控制验证和智能感知如何表现,取决于你想要支持的浏览器。

在CSS文档中右键,在Web Essentials的上下文菜单中点击“select browser...”。

577014-20160111214613663-38393181.png

577014-20160111214648725-1592430969.png

未知的供应商特定属性

因为要验证和识别所有的供应商特定属性是非常困难的,所以,就很容易犯错误。别担心,验证器会自动地调出任何位置的或者过时的供应商特定属性。

IE10 前缀

IE10公开预览版引进了新的前缀属性,比如-ms-animation。最终版的IE10也实现了那些属性的无前缀版本,用于过时的有前缀版的渲染。

最佳实践和浏览器兼容

在VS的错误列表中会提示这方面的信息:

577014-20160111215627928-429794467.png

有用的错误信息

一些错误是很普遍的。Web Essentials现在会检查那些错误,并提供更精确有用的错误信息来帮你修复它们。

移除\9的警告

CSS编辑器不支持\9 hack,这就会产生错误。Web Essentials会移除这些错误。

在选择器中未知的HTML标签

如果没有提醒的话,很容易犯HTML拼写错误。现在,无论是旧的HTML标签还是新的HTML 5标签名都会检查到。

颜色值

颜色函数(比如rgb(1,2,553))会被验证以确保该参数在允许的范围内。

577014-20160111221024350-1804365201.png

Web标准

自动更新标准

Web Essentials会检查驱动验证和智能感知的模式文件的更新。如果有更新,就会后台下载然后立即使用。

供应商特定的更新

当新的浏览器发布时,供应商经常会引进新的供应商特定的属性。Web Essentials会自动更新和新浏览器特定兼容的模式文件。

变量模块

Web Essentials具有新的CSS变量语法,可以获得智能感知和相同变量的颜色块。

转换器

加深/变浅颜色

把光标放在一个十六进制的颜色值上,然后按住SHIFT+CTRL+ARROW UP/DOWN来加深或变浅该颜色。看下面的演示:

577014-20160111222350507-642621340.gif

转换颜色格式

如下图,点击倒三角提示,就可以实现不同格式的颜色转换:

577014-20160111222544913-1659871141.png

DataURI和背景图片

这个会把引用的图片直接以base64编码到样式文件中,这样,你就减少了一个HTTP请求。

577014-20160111223210819-1619572458.png

如果base64字符串太长,你可以轻易地折叠起来。不过,在VS 2013 Update5中,所有的base64字符串都在一行显示。
577014-20160111224040694-2023080773.png

记住:在将这些图片转成base64字符串前,先要优化该图片文件。使用Image Optimizer插件可以轻易地对图片进行优化。

给属性排序

在每个选择器上的倒三角提示都可以让我们轻松地按照规则给所有的属性排序。

577014-20160111224320319-465602382.png

CSS的排序是开源的,你可以在Github上找到代码。

最小化

你可以直接在编辑器中将CSS最小化。下面演示一下操作过程:

577014-20160111225034241-870009653.gif

你可以最小化和bundle整个CSS文件。这已经在通用功能一节讲说了,就不再啰嗦了。






本文转自tkbSimplest博客园博客,原文链接:http://www.cnblogs.com/farb/p/WebEssentialsStyleSheets.html,如需转载请自行联系原作者


目录
相关文章
|
7月前
|
SQL 编解码 前端开发
开门入门篇之Web 品质 - 样式表
开门入门篇之Web 品质 - 样式表
23 0
|
7月前
|
SQL 编解码 前端开发
开门入门篇之Web 品质 - 样式表
开门入门篇之Web 品质 - 样式表
|
10月前
|
SQL 编解码 前端开发
开门入门篇之Web 品质 - 样式表
样式表是一种用于控制网站或 Web 应用程序外观和布局的技术。在正确使用样式表的情况下,它可以显着提高 Web 应用程序的性能、可维护性和可访问性。
|
前端开发
Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表
Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表
Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表
|
前端开发 Python 数据安全/隐私保护
|
JavaScript 编译器 数据格式
|
Web App开发 前端开发 JavaScript
|
XML 前端开发 JavaScript