ASP.NET Hosting - Click Here!

Most of the CSS features in Web Essentials also applies to LESS.


Generate vendor specifics

A lot of the new CSS 3 properties only work cross-browser if vendor specific properties are added. These include -moz, -webkit, -ms and -o.

Add missing vendor specifics

The result is the insertion of the missing vendor specific properties in the right order.

Missing vendor specific result

If one or more of the vendor specific properties are already present, then only the missing ones are added.

Add missing standard property

Invoke the Smart Tag to automatically insert any missing standard properties.

Add missing standard

Keep vendor specifics in sync

HTML elements, classes and IDs

HTML element IntellisenseClass name IntellisenseID Intellisense


Specific hacks can be used to target specific versions of IE on a selector level. These are all valid according to the W3C

Selector hacks


Intellisense is now provided for !important.



Modernizr class names will now be bolded in the CSS editor, but more importantly, they will also be respected by the automatic hierarchical indentation feature of VS2012.


Add regions

Regions are supported in the VS2012 CSS editor, but now it's even easier to add them.

Add region

Choosing Add region... result in this snippet being inserted.

Add region result

Custom fonts

Font face embedding

iOS scrollbars

VS2012 supports the different pseudo elements for customizing the iOS scrollbars. It can, however, be a little difficult to work with unless you know how to chain the pseudos correctly. That's no longer a problem.

Webkit scrollbar

Animation names

Animation name Intellisense

Inline URL picker

Just start typing and the file system shows up in Intellisense.

Url picker Intellisense


Gradients are really difficult to write, so now examples are automatically inserted for all the different types of gradients, including the various vendor specific ones.

Hide unsupported properties

Some of the CSS properties, such as the CSS 3 FlexBox Module are not supported by any browser yet. Now you can turn all unsupported properties and pseudos off.

Hide inherit/initial

Sometimes it can feel like these two properties are too noisy in Intellisense. Though they are completely valid, you might just want to hide them.

Custom color palettes

Coming soon...

Media Query expressions

Get Intellisense for everything in a Media Query.

Media Type

Media Query snippets

Snippets for making Media Queries easier to work with.

Media Query Snippets

Visual cues

Browser matrix tooltip

Browser matrix tooltip

Color swatches

All color types are supported, including the new CSS 3 formats.

Color swatches

Selector specificity tooltip

In case you've been wondering why certain styles are never applied in the browser, you can now see the specificity for each individual selector by hovering the mouse over them.

Font and image preview

Font previewImage preview


Browser selector

Control how validation and Intellisense behaves, based on the browsers you want to support.

Browser selector

Just right-click a CSS document and click "Select browsers...". Note: The CSS document must be part of the open solution.

Best practices & Browser compatibility

Message window

Helpful error messages

Some errors are very common to make. Web Essentials will now check for those errors and provide more precise and helpful error messages to help you fix them.

Removes warnings for \9

The \9 hack isn't supported by the CSS editor and will produce error messages. Web Essentials removes the errors.

Color values

Color functions such as rgb(1, 2, 3) is validated to make sure the parameters are within the allowed ranges.

Display inline

Using display:inline nulls other properties such as with, height and padding-left. Web Essentials checks for this so you can remove redundant code.

Duplicate properties

Duplicate properties are common, but should be avoided unless they are used for browser compatibility reasons. If not, Web Essentials will check for them.

Duplicate selectors

Selectors should never be duplicated in the same stylesheet

Pseudo class/element ordering

Psuedo classes goes before pseudo elements. It is, however, very difficult to figure out what pseudos are classes and what are elements. Web Essentials makes sure your psuedos are correctly sorted.

Unknown vendor specifics

Since it's very difficult to validate and verify all vendor specific properties, it becomes easy to make mistakes. The validator will automatically call out any unknown or deprecated vendor specifics.

IE10 prefixes

The IE10 Public Preview introduced new prefixed properties such as -ms-animation. The final version of IE10 did implement the unprefixed versions of those properties, rendering the use for the prefixed versions obsolete.

Missing vendor specifics

Forgot any vendor specific properties? Don't worry, Web Essentials will let you know.

Vendor specific ordering

Make sure to specify the prefixed properties before the unprefixed standard property.

Unknown HTML tag in selectors

It's easy to make a spelling error for an HTML element without noticing. This is now checked for using both old and new HTML 5 tag names.

Disallow universal selector

Optional. The universal selector (*) is expensive for browsers to apply. Now you can make sure that it is validated.

Zero-length units

Optional. Don't like 0px and 0em? Flag them to make sure your team member removes the unit type.

Media Query syntax

Additional validation on logical Media Query separators.

Web standards

Auto-update standards

Web Essentials checks for updates to the schema files that drives both validation and Intellinsense. If an update exist, it is being downloaded in the background and immediately applied.

Variables module

Get Intellisense and colorization of the new CSS Variable syntaxes.

Vendor specific updates

When new browsers are released, they often introduce new vendor specific properties. Web Essentials automatically updates the schema files with new browser specific capabilities.


Darken/lighten colors

Place the cursor in a hex color value and hit SHIFT+CTRL+ARROW UP/DOWN to darken or lighten the color.

Convert color formats

Use Smart Tags to easily convert colors between the different formats

Color converter

Sort properties

A Smart Tag on every selector enables you to easily sort all the properties within the rule.

Sort properties

CSS sorting is open source. Find the code on GitHub

DataURIs and background images

This will take the referenced image and base64 encode it directly into your stylesheet. You have then eliminated an HTTP requst.

base64 encode DataURI

If the base64 string becomes to long, you can easily collapse it.

Base64 encoding complete

Remember to optimize your image files before embeding them. Use the Image Optimizer extension to make it effortless.


You can minify CSS directly in the editor. Just select a valid range of CSS and right-click the selection. Now click the option "Minify selection".

You can also minify and bundle entire CSS files. That is described in the General section.