Why not just call it a “CSS selector”? Well, the first reason is semantic: “selector” means to select something, but here we’re actually generating something, writing a shorter representation of longer code. The term “abbreviation” might be a little confusing. The Expand Abbreviation function transforms CSS-like selectors into XHTML code. TextMate (Mac, and can be used with E-text editor for Windows).Demo (use Ctrl +, to expand an abbreviation, requires JavaScript)ĭownloads (Partial Support, “Expand Abbreviation” Only).
#COLOR ZEN MAGAZINE DOWNLOAD#
If you’d like to skip the detailed instructions and usage guide, please take a look at the demo and download your plugin right away: Demo Watch this demo video to see what they can do for you. Zen Coding consists of two core components: an abbreviation expander (abbreviations are CSS-like selectors) and context-independent HTML-pair tag matcher. me) for the last few months and has finally reached a mature state. Originally proposed by Vadim Makeev (article in Russian) back in April 2009, it has been developed by yours truly (i.e. Today, we’ll introduce you to Zen Coding, a set of tools for high-speed HTML and CSS coding. Now, you can use simple CSS expressions to access DOM elements, which is pretty cool.īut what if you could use CSS selectors not just to style and access elements, but to generate code? For example, what if you could write this… div#content>h1+p And then JavaScript frameworks came along, which introduced CSS selector engines. We had to write a lot of code, which became really hard to support and reuse.
We had the same problem in JavaScript world when we wanted to access a specific element on a Web page.
#COLOR ZEN MAGAZINE CODE#
In this post we present a new speedy way of writing HTML code using CSS-like selector syntax - a handy set of tools for high-speed HTML and CSS coding.