Explore Videos MSDN eNews Social
Windows
Web
Phone
Cloud
Visual Studio
Security
ALM
Breakpoint
Canada Does Windows Azure
More
The latest on developer tools and technologies you care about.

Sign Up
Latest Editions
Previous Editions  
Stay connected through on your favourite social network.

Twitter
Facebook
LinkedIn

CSS Validation with Visual Studio Web Essentials

CSS Validation with Visual Studio Web Essentials

  • Comments 2

I like when my IDE tells me I’m doing something wrong. I find it mush less embarrassing than when a co-worker or customer tells me I’m doing something wrong. That’s why I love Visual Studio and the Web Essentials extension. Web Essentials has some great CSS Validation features that can help to point out common mistakes. These features also apply to LESS.

There are a number of useful validation rules and best practices that Web Essentials will check. In this post, we will explore those that I found particularly useful and taught me a little more about CSS.

Vendor Prefixes

Vendor prefixes are used by browser vendors to add new CSS features that may not yet been finalized in the official CSS specs. Each browser has it’s own prefix for CSS properties. Chrome and Safari use –webkit, Firefox uses –moz and Internet Explorer uses  -ms.

For example, if you want to use CSS Column layouts, you will need to specify vendor prefixes as follows:

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

Unless you follow the CSS specs and individual browser implementations closely, it can be very difficult to know when you need to use vendor prefixes. This is where Web Essentials can help.  If I specify the a column-count property without the required browser prefixes, it will be flagged as a warning. Web Essentials shows warnings by underlining items in the CSS editor and by listing them in the Error List (View –> Error List).

image

When I select the Add missing vendor specifics smart tag, Web Essentials will add the required prefixes for me.

image

Now, the CSS specs and browser implementations are always changing. While the –moz and –webkit prefixes are required today, they may not be required tomorrow. A good example of this is border-radius. In the past, vendor prefixes were required to support border-radius. Today, border-radius is officially part of the CSS specs and is supported by all major browsers. Web Essentials will point out that these vendor specifics are not longer necessary.

image

For Web Essentials to warn you of deprecated vendor specifics, you may need to set the Disallow unrecognized vendor-specifics setting to True in the Web Essentials settings. You can find Web Essentials settings under Tools –> Options. In the options dialog, select Web Essentials –> CSS.

image

Choosing your Browsers

Maybe your website is deployed internally and you have no need to support a particular browser. You can tell Web Essentials what browsers you are targeting by right clicking in any CSS or LESS file and selecting Web Essentials –> Select Browsers.

image

In this case, I un-checked FireFox. When I click Ok, Web Essentials adds a file ‘WE-browsers.xml’ to my solution. If you include this file in source control, the settings will be shared across all developers on your team.

image

Now, when I ask Web Essentials to add missing vendor specifics, the –moz prefix is not included.

image

Duplicate Properties and Selectors

As a CSS file grows over time, it can be common for a developer to accidently define the same selector more than once in a CSS file. Web Essentials will scan a the file and warn you if this happens. It will also check to make sure that you have not accidently defined the same property more than once within a selector.

Summary

We only scratched the surface of the validation rules that are available in Web Essentials. If you are interested in a complete list, you can read more on the Web Essentials site.

If you are interested in the implementation details, you can view the source code on GitHub. Remember, Microsoft released Web Essentials as an open source project, so you can contribute too.

Leave a Comment
  • Please add 5 and 6 and type the answer here:
  • Post
  • I don't see the option to Select Browsers when selecting a CSS or LESS file.

  • Hi Craig,

    To find the Select Browsers option, try opening a CSS or LESS file, then right clicking anywhere inside that file. You should see Select Browsers under the Web Essentials menu option.

Page 1 of 1 (2 items)