JetBrains IntelliJ IDEA Blog

With IntelliJ IDEA 9.0.2 you can edit HTML and CSS code really fast using Zen Coding features.

To use it, you have to install Zen Coding plugin for Web IDE/IntelliJ IDEA: go to Zen Coding Project Download Page, download an archive that contains a set of live templates, and extract it to “<Your Home Directory>\.IntelliJIdea90\config\templates” folder (”~/Library/Preferences/IntelliJIDEA90/templates” for Mac OS X).

• Zen Coding plugin involves more than 200 different HTML and CSS live templates. To see all of them, just open Settings (Ctrl+Alt+S), Live Templates, Zen Coding group.

• Native Zen Coding support allows you to generate HTML structures using complex templates. For example, try to type “form.form-comment#comment>fieldset” in an HTML file and then press TAB. In this case, “form” and “fieldset“ are live templates but you can use simple tag names instead.

• You can generate not only HTML but also XML structures. Basic features perfectly work for XML.

• “TAG.CLASS” and “TAG#ID” templates allow you to specify class and id of HTML elements, but you can specify a value of any XML/HTML attribute, i.e. you can write “person[name=Jack]“.

• You can use your own live templates as parts of complex templates. For example, suppose you have a template “entry” with the following template text: To generate a list of entries, you just need to type “entry-list>entry[number=$]*5″ and press TAB. By default, the “number” attribute will be generated before “type”. If you want to customize the position where it’s generated, add ATTRS variable to your template – for example: ATTRS variable must have empty string as a default value and should be skipped:

• Of course, you can disable Zen Coding support if you don’t need it (see Settings (Ctrl+Alt+S), XML Zen Coding).

To learn more about Zen Coding features, you can watch screencasts on Zen Coding project home page.

Note that Zen Coding native support is a part of IDEA Community Edition, and its source code is freely available.

It often happens that we need to edit HTML code inside JavaScript literals. With Maia this is at last possible, and even with pleasure!

Completion, quick documentation, and navigation for HTML, CSS and even JavaScript inside JavaScript literals is at your service

Editing CSS files in Flex applications becomes easier with the help of some new Maia features.

First, completion for CSS selectors, properties, and property values. For example, if you press Ctrl+Space in this context, you get all class names from
a default namespace http://www.adobe.com/2006/mxml + global selector:

If a CSS property has a color format, IntelliJ IDEA helps you to select a color:

You can look up documentation for default Flex CSS selectors and properties. Just press Ctrl+Q in editor or completion pop-up window:

You may easily navigate from CSS properties and selectors to their declarations in ActionScript. All you need is to press Ctrl+B. Note that if there are several declarations to navigate, you will see a pop-up list.

Also, IntelliJ IDEA provides validation of CSS selectors and properties:

Note that these features are available only in CSS and MXML files under a Flex module, or module with a Flex facet.

As you may already know, Internet Explorer supports a technique of inserting JavaScript snippets into css expressions. In case you need to edit such code, IntelliJ IDEA 9 will be happy to assist you with completion and highlighting!