Web Essentials 1.4 released
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.
As you might be able to tell, two things are happing in the above screenshot.
- Modernizr specific class names are bolded
- 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.
The .min file will be nested under it’s parent source file.
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.
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.
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
What about VS 2010?
DanielExcellent job :-)
Søren ReinkeThis 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.
Roy JacobsPingback from blogs.msmvps.com Joel Cochran » Weekly roundup 10/12/12
blogs.msmvps.comOnly VS2012 unfortunately. The API's are not the same
Mads KristensenYeah, that would be awesome. I've created a UserVoice ticket for it: http://webessentials.uservoice.com/forums/140520-general/suggestions/3253956-jshint-for-typescript
Mads KristensenCooooool. I will try it.
VietJust keeps getting better and better. Thanks team!
Brandon WittwerI 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 ThompsonThe most important tool for web designers ! Thanks for your great work !
Sam LinAfter 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
ThomasHi i have the sime problem tomas's after installing visual studio 2012
StellissimoI've installed VS2012 web express and Web Essentials fails to install, can anyone help me?
RexhaAre 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 EinsteinJosh, you shouldn't inculcate crazy ideas in Mads's mind. :-)
MiroslavThere 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 NuttallPingback from blog.namics.com .Net News – Oktober Summary – Namics Weblog
blog.namics.comme++;
ismailCool, Best tips (:
EmjysoftHi 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 LokerAll the best.keep it up!!
bangalore flatsHi, 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.
MiroslavThank you. Very insightful and helpful info about the 1.4 release
Travis MullinsIs LESS support giving problems with this version? I'm having problems, i save the less file but the css doesn't get generated.
vehicle graphics calgaryIts 2 months since the release any feedback on the performance level?
Online StoreI 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!
Joseph FinkelbergI 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 EinsteinZithromax is to assist you be brought orally and you <a href="http://safehealthnews.com/purchase-generic-drugs-from-india/">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.
BiancaThis is the wrong place for spam, you bi...anca.
MiroslavThanks a lot for this, it really is fantastic to encounter a internet site which really provides very good info rather than posting rubbish.
orthodontiste invisalignComments are closed