Most of the CSS features in Web Essentials also applies to LESS.
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.
The result is the insertion of the missing vendor specific properties in the right order.
If one or more of the vendor specific properties are already present, then only the missing ones are added.
Invoke the Smart Tag to automatically insert any missing standard properties.
Specific hacks can be used to target specific versions of IE on a selector level. These are all valid according to the W3C
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.
Regions are supported in the VS2012 CSS editor, but now it's even easier to add them.
Choosing Add region... result in this snippet being inserted.
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.
Just start typing and the file system shows up in 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.
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.
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.
Coming soon...
Get Intellisense for everything in a Media Query.
Snippets for making Media Queries easier to work with.
Control how validation and Intellisense behaves, based on the browsers you want to support.
Just right-click a CSS document and click "Select browsers...". Note: The CSS document must be part of the open solution.
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.
The \9 hack isn't supported by the CSS editor and will produce error messages. Web Essentials removes the errors.
Color functions such as rgb(1, 2, 3) is validated to make sure the parameters are within the allowed ranges.
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 are common, but should be avoided unless they are used for browser compatibility reasons. If not, Web Essentials will check for them.
Selectors should never be duplicated in the same stylesheet
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.
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.
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.
Forgot any vendor specific properties? Don't worry, Web Essentials will let you know.
Make sure to specify the prefixed properties before the unprefixed standard property.
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.
Optional. The universal selector (*) is expensive for browsers to apply. Now you can make sure that it is validated.
Optional. Don't like 0px and 0em? Flag them to make sure your team member removes the unit type.
Additional validation on logical Media Query separators.
Place the cursor in a hex color value and hit SHIFT+CTRL+ARROW UP/DOWN to darken or lighten the color.
Use Smart Tags to easily convert colors between the different formats
A Smart Tag on every selector enables you to easily sort all the properties within the rule.
CSS sorting is open source. Find the code on GitHub
This will take the referenced image and base64 encode it directly into your stylesheet. You have then eliminated an HTTP requst.
If the base64 string becomes to long, you can easily collapse it.
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.
