Zen Coding 1.2

Очередная порция исправлений ошибок, новых возможностей и прочих приятных изменений пакетов Zen CSS и Zen HTML, а также новый способ их распространения.

Главное изменение связано с открытием филиала проекта на Google Code — Zen Coding. Теперь следить за появлением новых версий станет проще, а получить их можно будет двумя способами: по старинке — скачав и распаковав архив, либо при помощи svn, что позволит удобно следить за внесёнными изменениями.

С первым способом всё понятно — архиватором умеют пользоваться все, поэтому вы знаете, что делать с последними версиями пакетов на странице загрузки. Второй способ чуть сложнее: если вы работаете под Mac OS X, то всё необходимое для работы с svn в вашей системе уже есть, однако можно пойти дальше и установить замечательное приложение Versions или воспользоваться встроенной поддержкой svn в редакторе Coda. Я же опишу простейший способ — при помощи Терминала, стандартной программы Mac OS X.

Для начала откройте Терминал, набрав его название в Spotlight — по-русски или по-английски, в зависимости от языка системы. Дальше всё удивительно просто: при помощи первой команды вы переходите на рабочий стол, при помощи второй — скачиваете на него свежую версию пакета:

cd ~/Desktop/
svn co http://zen-coding.googlecode.com/svn/trunk/ .

Если же вы работаете под Windows, то могу предложить вам воспользоваться утилитой TortoiseSVN — тоже не менее простой в обращении. Так, с контролем версий разобрались, переходим к списку изменений:

Zen HTML

Система комбинаций E+n, которая разворачивала селекторы с необходимым количеством детей (от одного до пяти) была полностью заменена техникой, которая позволит быстрее набирать любые последовательности списков для элементов <li>, <th>, <td> и <option>. Суть техники заключается в том, что нажатие клавиши Tab после каждого закрывающего элемента будет создавать новую строку и следующую пару элементов. Таким образом, кобинация li Tab Значение Tab Tab Значение создаст нам такую конструкцию:

<li>Значение</li>
<li>Значение</li>

Поясню: первый Tab создаст нам первый <li>, второй выведет курсор за его пределы, а нажатый тут же третий, создаст новую строку со вторым <li>. Так можно продолжать довольно долго, процесс завораживает своей простотой. Далее — небольшие изменения:

• Элемент <br> теперь можно вставить не только комбинацией br+Tab, но и более удобной и понятной Shift+Enter.
• Для оборачивания выделенного фрагмента в нужный элемент, появились сочетания Ctrl+W — для однострочного заворачивания и Ctrl+Shift+W — для многострочного. По умолчанию, оборачивающим элементом становится <div>, но вы тут же можете изменить его, причём сразу в открывающем и закрывающем тегах.

Zen CSS

Новая версия этого пакета также обзавелась механизмом быстрого набора длинного списка свойств, без необходимости вручную создавать новую строку. Теперь по сочетанию ;+Tab, т.е. после каждого закрытого правила, автоматически вставляется перевод строки. Например, комбинация fl:l Tab Tab b:n Tab Tab c Tab создаст нам следующий код:

float:left;
border:none;
color:#FFF;

То есть: первый Tab создаёт свойство, а следующий новую строку и всё по новой. Если же свойство разворачивается с предустановленными значениями, то вам сначала придётся пройтись по ним, а потом уже выйти за пределы правила и создать новую строку.

Также, по многочисленным заявкам, была введена специальная переменная, которая регламентирует появление пробела в правиле после двоеточия и до значения. Таким образом, вы можете продолжать использовать все удобства этого пакета, не меняя коренным образом свои правила форматирования кода. Устанавливается эта переменная настройках TextMate: Preferences → Advanced → Shell Variables → Variable: TM_CSS_SPACE, Value: [пробел]. Далее — небольшие изменения:

• Для свойств top, right, bottom и left всё-таки были введены сокращения: t, r, bo и l, соответственно. Символ b остался за свойством border по причине многочисленных сочетаний с ним связанных, а так же более частой употребимости.
• Регулярное выражение, подсвечивающее HTML-селекторы в CSS-коде, стало регистронезависимым, поэтому теперь подсвечивается как строчное, так и прописное их написание. Что опять же добавляет пакету гибкости.
• Для более точной и логичной работы всех предусмотренных подстановок, было удалено автоматическое дополнение двоеточия точкой с запятой — :;. В ситуации, когда пакет предлагает все необходимые своства и значения, данная потеря не кажется мне столь ощутимой.

Итак, напоминаю — пакеты теперь можно скачать на странице проекта в Google Code или через svn-репозитарий, а я с интересом жду ваших отзывов, замечаний и, самое главное, — предложений.

<ul>
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a></li>
</ul>

<ul>
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
</ul>