百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Web Essentials之样式表StyleSheets

zhezhongyun 2025-03-04 15:55 51 浏览

本篇目录

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

智能感知

生成供应商特定的属性

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

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

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

自定义字体

添加丢失的标准属性

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

IOS 滚动条

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

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

不多说,直接看效果:

动画名字

HTML元素,类和Id

内联URL检出器

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

Hacks

查看这篇文章了解更多。

!important

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

Modernizr

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

添加regions

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

输入region,然后按下TAB键,就会插入下面的代码段

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

视觉提示

浏览器提示

字体和图片预览

颜色样式

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

验证

浏览器选择器

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

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

未知的供应商特定属性

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

IE10 前缀

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

最佳实践和浏览器兼容

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

有用的错误信息

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

移除\9的警告

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

在选择器中未知的HTML标签

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

颜色值

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

Web标准

自动更新标准

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

供应商特定的更新

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

变量模块

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

转换器

加深/变浅颜色

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

转换颜色格式

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

DataURI和背景图片

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

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

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

给属性排序

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

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

最小化

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

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

相关推荐

Win10全新版本速览 全新图标设计焕然一新

来源:太平洋电脑网[PConline资讯]原定于今年下半年发布的Win1021H2(SunValley),再有几个月就要与我们见面了。之前我们已经陆续介绍过新版在开始菜单、窗口动效、通知中心等方...

第四周B组最佳选手Icon:陨落天团的小将,还是重生星球的偶像?

B组本来被认为是死亡之组,但在上周的异组对抗赛中,实力较强的几只队伍却先后被A组击沉,反而是之前一分难求的OMG2:1战胜了IG,其中Icon功不可没,两次秀翻全场的妖姬和与Juejue中野联动的实力...

系统小技巧:不花一分钱 让声音再大些

有时,笔记本扬声器的音量可能无法满足我们对声音播放的需求。点击系统托盘的小喇叭图标,音量调节滑动条调整到最大也无效,而添置大功率扬声器又不是我们所愿。这时,可通过调整系统本身的设置或利用第三方软件来解...

DNF手游:70级毕业搭配曝光!需集齐四类装备,别指望无形升级了

随着dnf手游7.16版本的临近,各种70级装备的消息满天飞,真真假假难以辨别,但只要以“发布会爆料”为核心,主播十四的爆料为辅,就能确定70版本的毕业标准搭配,查理策划是打算“集百家之长”于一身,完...

学会这5个电脑设置 可解决99%的故障

现阶段复工大家都是宅家办公吧,所以电脑可谓是大救星,因为无论是“停课不停学”的网课,还是在家办公的穷社畜,都离不开电脑。所以今天小编就来教大家几招电脑的自救方法,让你可以在电脑出问题时从容面对,足不出...

LOL:上单腕豪的取胜之道——掌控自身优势,融合装备特效

01前言腕豪这个英雄,在11.9版本之前都没有太多的出场机会,即使出现也大多是在辅助位置上,充当开团、先手控制的角色。但是在11.9版本以后,这个英雄突然之间仿佛飞升了一般,直接冲上T1级别上单,之前...

英雄联盟手游:一篇文章读懂所有龙buff属性效果,还不赶紧收藏

英雄联盟手游采用也是经典峡谷地图,看起来和端游并没有太大差异,但实际上为了适应手游节奏,官方也是进行了适当调整,所以包括红蓝buff,大龙小龙buff效果会有一定的差异,现在就来看看小龙和大龙具体属性...

双击打不开怎么办?双击文件夹显示属性的解决办法

今天小编在双击文件夹的时候,就是打不开,还弹出“属性”对话框,不知道大家有没有出现过,为避免出现这种情况时大家束手无策,今天小编就来为大家分享一下解决方法。1.检查键盘,看看“Alt”键是否卡住。由于...

柜子布局好超省空间,1㎡当10㎡用,收纳涨5倍!户型图直接抄

柜子不嫌多,就怕你家放不下!▼每个空间几乎都需要柜子客厅要有电视柜,卧室要能放下全家四季的衣柜,厨房还需要大容量的橱柜空间就这么小,想要榨出放柜子的地方,还要活得不拥挤简直太难了!其实全是你找错地方打...

制作幻灯片的另类方法(然后制作幻灯片)

如果提到制作幻灯片,很多人都会想到PowerPoint。PowerPoint提供了很多模板,但这些模板实用性并不太高;PowerPoint的交互还算比较方便,但不可否认,交互显得有些呆板,而且要想修改...

《心灵杀手重制版》画面晃动怎么办?画面晃动解决办法

针对《心灵杀手重制版》画面晃动的问题,以下是一些解决办法:修改游戏启动路径:打开游戏所在的文件夹,找到游戏图标的属性并打开。在属性中修改启动路径,加入“-noblur”参数。例如,如果游戏安装在“X:...

win10网络图标是小地球怎么办(excel表格怎样选定区域打印)

win10系统右下角的网络图标突然变成地球图标,而且无法上网,提示无法连接到Internet。出现这个问题多数是因为win10正式版更新了或者是网络中断后遗症。那么win10网络图标变成地球怎么办呢?...

重看电脑任务栏的使用方法:windows 10小贴士

【环球科技综合报道】据日本Livedoor新闻网2月18日报道,windows电脑的屏幕下方配置的任务栏由于总是在电脑桌面上显示,可以说是一个映入眼帘的机会格外多的区域。像是把经常使用的软件图标设置在...

《地狱之门》攻略:四大元素属性介绍

《地狱之门》是近期比较看好的一款卡牌手游,绚丽的3D游戏画面以及创新的即时战斗系统给人耳目一新的感觉,非常值得一试。玩家不仅可以体验到卡牌收集的乐趣,更主要的是能体验到酣畅淋漓的战斗体验。下面小编就来...

一脸懵?DNF希洛克词条赋予属性触发条件解析

DNF希洛克已经开放两天,但是还是看到不少小伙伴对于希洛克词条赋予系统充满疑惑。今天就来简单易懂的给大家科普一下希洛克词条赋予系统里的弯弯绕绕。◎希洛克装备融合在希洛克获取了专属史诗之后,即可通过歌兰...