30 Comments

This release has some cool features, some tweaks to existing ones and some bug fixes. Let’s take a tour and then go download it.

Automatic update to CSS schema files

The W3C continues to evolve the CSS specification and so do all the browser vendors. It’s therefore important to always keep up-to-date with the changes to take full advantage of the web platform. Web Essentials now automatically downloads new schema files whenever there is a change.

This is really cool, because Visual Studio will now always have the latest W3C specifications AND the latest vendor specific properties in Intellisense and validation. Latest schema files include support for Firefox 16, Opera 12.1 and all the rest.

This feature is very close to my heart.

Modernizr support

When writing any kind of modern web application, you can use Modernizr to fill in the gabs between old and new browsers. Modernizr is a JavaScript library that, among other things, places a lot of class names in the <html> element of web pages. These class names are very useful to utilize from CSS to provide graceful degradation for older browsers and now they are fully supported in the CSS editor.

image

As you might be able to tell, two things are happing in the above screenshot.

  1. Modernizr specific class names are bolded
  2. Hierarchical indentation supports the class names and indent correctly

I like this feature because it makes it very clear and transparent what is going on when using Modernizr.

Minification

Through a right-click menu in Solution Explorer, it is now possible to create .min files from both CSS and JavaScript files.

image

The .min file will be nested under it’s parent source file.

image

Every time a change is saved in the parent styles.css file, the styles.min.css file is automatically updated with the minified version of its parent.  The right-click gesture works on both individual CSS and JavaScript files, but also on folders, which will then create min files for all CSS or JavaScript files in that folder.

It only handles minification, not multi-file bundling. That’s coming in the next update.

CSS/LESS document outline

Get a sneak-peek inside any CSS or LESS file directly from Solution Explorer.

image

For CSS it will display @-directives, IDs and class names used in the file. For LESS it will also show the Mixins and variables used. You can navigate this outline using only the keyboard and have each item open up automatically in the Preview Tab.

W3C only

Tired of Intellisense for non-W3C properties, @-directives, pseudo elements and property values? You can now chose to only see the W3C standards. Using any vendor specifics will result in a validation error. Is this strange? Perhaps. Let me know!

Shorthand validation

This is a work in progress, but I wanted to include the early bits in this version. The CSS validator will now throw an error if you use properties that should be rolled into a shorthand expression. For instance, if you use margin-top, margin-right, margin-bottom and margin-left in the same rule, it will tell you to combine the properties into margin. Full parsing and validation is coming in a future version.

Nested LESS selector Intellisense

When writing nested selectors in LESS you will run into a very annoying problem with pseudo selectors. The Intellisense list will force you to write a pseudo selector when you in fact just wanted a colon. This is now fixed.

Source Control

The LESS, CoffeeScript and TypeScript compilers doesn’t know how to check files out of source control before they try to compile and override the output file. Web Essentials will now check out the right files to avoid write permission issues.

New options structure

The Tools –> Options dialog has been updated with even more options and with a more granular structure.

image

This makes it easier to search for specific items using Quick Launch (CTRL + Q) and also makes it less cluttered.

Minor improvements

Beyond the features mentioned, a lot of small tweaks and fixes also made it in to this release. Here are some of them:

  • Cleaned up right-click menu
  • Added minification inside the CSS and JavaScript editors
  • Disallow zero values in CSS (0px, 0%, 0em etc. should not have the unit)
  • TypeScript now supports ES5 correctly
  • TypeScript compiler switches now featured in the options dialog
  • General bug fixes

As always, let me know if you run into issues or have some ideas for new features or tweaks.

You should download Web Essentials 1.4 right now!

Comments

Comment by Roy Jacobs

This is an awesome extension. One feature request: It would be nice if the Javascript that is generated from Typescript is also ran though JSHint on save. This would allow me to detect issues like "if (x == null)" and so on, just like in JS.

Comment by Andy Thompson

I may have found a problem with version 1.4. When automatically converting to CSS then minifying a .less file it removes the vendor specific rules.

For example (sorry for pasting code btw)

[quote]
@start: #fff;
@stop: #f00;

div#login {
background-image: -ms-linear-gradient(top, @start 0, @stop 100%); /* IE 10 */
background-image: linear-gradient(top, @start 0, @stop 100%);
}
[/quote]

is minified to

[quote]
div#login{background-image:linear-gradient(top,#ffffff 0,#ff0000 100%)}
[/quote]

Andy Thompson

Comment by Thomas

After installing 1.4, Visual Studio 2012 Pro now crashes when a .css file is opened.

Last record in VS ActivityLog:

<type>Information</type>
<source>Extension Manager</source>
<description>Searching folder for extension.vsixmanifest files...</description>
<path>C:\Program Files\Common Files\Microsoft\ExtensionManager\Extensions</path>

Any more with this problem?

I have Windows 7 Pro, 32-bit. I also have VS 2010 installed, if that could in some strange way conflict.

Regards
Thomas

Thomas

Comment by Josh Einstein

Are you insane? This is like a $100 product and you're giving it to us for free. You are a great American.

Awesome update. Does Web Essentials allow me to get the "widows" css property out of intellisense? I constantly activate it instead of width.

Josh Einstein

Comment by Murray Nuttall

There is a nested pseudo selector bug when using sort.

before using sort:
.ie7 {

a:link, a:visited,
a:active, a:hover {
color: #333;
}

a:hover {
background-color: #c7d1d6;
}
}

After using sort:
.ie7 {
a:link, a:visited,
a:active, a:hoverr {
color: #333;
}

a:hover {
background-color: #c7d1d6;
}
}

Note the double rr on hover.

Murray Nuttall

Comment by Andre Loker

Hi Mads,

First of all - thanks for this awesome extension!

I've got a question: is it possible to make .bundle files compile automatically when any included file has changed? That is, without compiling the actual project?

Thanks a lot!

Regards,
Andre

Andre Loker

Comment by Miroslav

Hi, Mads.
I'm not sure if this is a right place for suggestions and am not sure that your extension can handle what I want to suggest but the idea is this:

in Source View of an ASPX page when we type "class=" intellisense pops a list of available classes and that would be nice if it also would show a content of the currently highlighted class similarly to what we have when we hover a mouse cursor over a collapsed css class in a stylesheet file.

And thanks for the great (and free) extension.

Miroslav

Comment by Joseph Finkelberg

I just installed BE and realized that I had a problem with the ugly urls resulting from my cyrillic titles. I googled for BE+cyrillic and found your post. Thanks a lot for this extension, it's very useful and works fine. Good work!

Comment by Josh Einstein

I have also run into this. I had to manually save a couple times (maybe just twice?) before it checked out the css files and re-generated them.

Josh Einstein

Comment by Bianca

Zithromax is to assist you be brought orally and you <a href="safehealthnews.com/.../">buy zithromax online</a> no prescriptions. Zithromax is really a macrolide antibiotic and it can quite possibly be associated with regard to erythromycin and as well , can continually be used up to struggle personally bacteria. Tablets as suspension may possibly be extracted with quite possibly without meal while tablets should be a little more taken on an unload stomach couple of hours preceding or after a feed. It carries an an extensive range from Antibiotics available online, 24x7.

Bianca