TextMate Zen Coding 1.3

Логичным этапом после всех мечтаний про Zen Coding 2.0 стало написание документации по элементам, селекторам, свойствам и сокращениям.

На основе этой документации, пакеты Zen HTML и Zen CSS для редактора TextMate были обновлены до версии 1.3. Это обновление стало не столько исправлением ошибок в версиях 1.2, сколько подготовкой для перехода к версии 2.0. Тут вам и HTML 5, и CSS 3 и много других исправлений. А именно:

Zen HTML

Набор элементов новой версии пакета создан на основе черновика HTML 5, плюс элемент <acronym>, который был исключён из HTML 5. Немного был изменён принцип именования шаблонов — сначала идёт версия языка, а потом уже тип:

html:4t  = HTML 4.01 Transitional
html:4s  = HTML 4.01 Strict
html:5   = HTML 5
html:xt  = XHTML 1.0 Transitional
html:xs  = XHTML 1.0 Strict
html:xxs = XHTML 1.1 Strict

Также добавлен новый шаблон страницы html:5:

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    
</body>
</html>

Ещё один шаг к большей доступности пакета состоит в том, что теперь все элементы можно набирать как по псевдонимам, так и по полному имени:

bq → <blockquote></blockquote>
blockquote → <blockquote></blockquote>

То есть, не зная псевдонима, можно всё равно получить то, что нужно. Помимо этого, в пакет было добавлено много приятных мелочей:

Все элементы, которые имеют особенность много раз повторяться строка за строкой, теперь имеют механизм, который позволяет после написания первой строки сразу же приступать к написанию второй — достаточно нажать Tab после одного из следующих закрывающих тегов: </p>, </li>, </tr>, </th>, </td> или </option>.

Элемент <div> теперь разворачивается с атрибутами class и id более логично, раньше вместо точки использовалась собачка:

div. → <div class=""></div>
div# → <div id=""></div>

В список автоматических парных подстановок были добавлены русские кавычки: «„“». Теперь при наборе первой из них, автоматически будет подставляться и вторая.

HTML-элементы теперь сгруппированы на основе спецификации, поэтому навигация через меню «Bundles» теперь организована не по алфавиту, а по группам.

Zen CSS

Набор свойств в этом пакете основан на черновике спецификации CSS 3 и в дальнейшем будет обновляться, в зависимости от реализации в браузерах и решений, что принимает CSS WG. Этот пакет оптимизация коснулась в большей степени.

Основной файл настроек языка был взят из самой последней версии оригинального пакета CSS и модифицирован для полного соответствия CSS 3:

Это значит, что все новые свойства и значения из черновика CSS 3 будут правильно подсвечиваться. Исключением станут вендорные свойства и значения, в частности, с префиксами. Их полезно отличать от остального массива кода. Также было модифицировано регулярное выражение, которое отвечает за HTML-селекторы, теперь подсвечиваться будут как строчные, так и прописные имена.

Всем свойствам, отвечающим за позиционирование (top, right, bottom, left) были присвоены однобуквенные сокращения: t, r, b, l. Соответственно, для свойства border теперь используется сочетание bd, по аналогии с bg для background. Да, стало длиннее, да, придётся привыкать, но общая логичность решения повысилась.

Короткое сочетание z вернулось и свойству z-index, которое близко к тем обнобуквенным, что отвечают за позиционирование. Поэтому свойство zoom, о котором мы когда-нибудь забудем, отправлено в zoo и открывается сразу со значением, равным единице.

Помимо этого в пакет была внесена некоторая вендорная специфика: вроде -ms-filter, display:-moz-inline-box, -webkit-box-shadow и некоторых других. Эти свойства также будут обновляться, в зависимости от поддержки новых экспериментальных свойств в различных браузерах.

Ну, и немного приятных мелочей. Свойство quotes теперь может быть развёрнуто с уже готовыми значениями для двух уровней русских или английских кавычек:

q:ru → quotes:'\00AB' '\00BB' '\201E' '\201C';
q:en → quotes:'\201C' '\201D' '\2018' '\2019';

…а нажатая после символа ; клавиша Tab создаст строку для нового правила.

Кто здесь?

Сейчас пакеты проекта Zen Coding существуют в двух основных ветках:

Обе ветки используют документацию, упомянутую в начале заметки, поэтому совместимы между собой. Особенностью второй ветки является то, что в XML-подобных языках поддерживается разворачивание шаблонов на основе CSS-синтаксиса, о чём мечталось в одной заметке.

Несмотря на некоторую запутанность с ветками, пакеты продолжают развиваться, более того — планируется написание Zen HTML для UltraEdit и Zen CSS для возрождённого TopStyle 4.

Установка пакетов

Последние версии всех пакетов по-прежему можно скачать со страницы проекта на Google Code. Речь же пойдёт о специфике установки пакетов для редактора TextMate.

Если вы устанавливаете пакеты в первый раз, то достаточно просто кликнуть два раза по разархивированному файлу. Но если вы не уверены, то лучше читайте дальше.

Если вы уже использовали предыдущие версии пакетов для TextMate, включая бета-версии пакетов 1.3 с Google Code, то пакеты нужно будет обновить прямой заменой файлов. Иначе, попытки смёржить две разные версии приведут к непредсказуемым последствиям. Итак, нужно сделать следующее:

  1. Закрыть TextMate
  2. Зайти в папку: ~/Library/Application Support/TextMate/Bundles/
  3. Удалить старые пакеты Zen-CSS и Zen-HTML
  4. Скопировать в эту папку новые пакеты

Такая тактика уменьшит вероятность возникновения проблем.

Комментарии

35

Кстати, по поводу CSS и текстмейта: а не подскажешь, как поправить фолдинг для правил CSS, которые записываются с закрывающей скобкой на уровне с правилами? Я что-то пытался покопать и поправить стандартные бандлы на этот счёт, но у меня так и не получилось )

Ну, очевидно, нужно разобраться с этой регуляркой:

foldingStopMarker = '(?&lt;!\*)\*\*/|^\s*\}';

Я не готов к этому ) Благо, что сворачиванием пользуюсь только в HTML, да и то очень редко.

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

Я тоже когда правил вчера языковой файл пару раз впадал в уныние, мол, там же захардкожено всё, но потом разбирался и понимал как оно работает ;) Так что стоит попытаться ещё раз, может быть при помощи супер-программиста.

В текстмейте есть бандл, который создаёт открытый и закрытый теги из написанного слова. Ну это так... к слову о 

blockquote → <blockquote></blockquote>

p.s. почему у ты в комментариях используешь разметку source а не code?

В текстмейте есть бандл, который создаёт открытый и закрытый теги из написанного слова

Ну, это дело понятное и знакомое. Полные имена элементов добавлены исключительно для обратной совместимости. Основа этого HTML-бандла система элемент:параметр.

Насчёт source vs. code: по сути, source это маркер для плагина, который оборачивает код в список. Посмотри исходник.

А почему в документауии выбран по умолчанию синтаксис HTML, а не xHTML?
Например: http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsRu.
P.S.: попробую по этой документации сделать свой файл abbrev.properties для SciTE, а то руки не доходили именно по причине того, что в голове не устоялся метод сокращений

Немного оффтоп: для linux вышел аналог TexMate'а — Redcar. Кажется обещают совместимость, в том числе с бандлами.

P.S. Сам не пробовал (и пока не собираюсь :))

Синтаксис HTML потому, что в TetxMate за вывод слеша отвечает статическая переменная, поэтому во всех одиночных элементах просто стоит проверка на наличие этой переменной — он либо добавляется, либо нет. Если коротко: для большей универсальности документации.

И еще:
почему table+ раскрывается без thead, th и tbody?
Мне кажется стоит сделать два варианта, один такоей, как есть, другой со всеми элементами таблицы.

Второе: у меня помимо аналогов ul+ и ol+ были еще ul a и ol a, раскрывающиеся в список ссылок, удобно

Я сознательно не делаю шаблонов, которые сочетают много элементов потому, что не хочу, чтобы эта система из стремительной лани превратилась в медлительного бегемота. Т.е. если делать «на все случаи жизни», то этим никто не будет пользоваться, кроме того, кто выдумал тот самый случай.

А то ведь и форму можно развернуть с fieldset'ами, label'ами и кнопкой reset. Хотя кто-то наверняка пользуется div'ами и вообще не знает про label. В общем, мне кажется, что дописать то, чего не хватает, проще, чем вычистить развернувшееся от лишнего.

Ближе к атомарности. М?

Я думал, что багу с input:r я уже правил. Значит только в самих пакетах, а про докуменацию забыл. Спасибо ) Думаю, на каком-нибудь этапе, скажем, после первых полевых стрельбищ, стоит добавить эту штуку на Google Code. Ок?

Zen coding для TopStyle 4 был бы очень актуален.
Хоть TopStyle уже и не тот :(

Небольшие комментарии:
1. Zen Coding 2.0 есть еще и для редактора Espresso под Mac, входит в состав сахара TEA for Espresso: http://wiki.macrabbit.com/forums/viewthread/160/
2. В следующей версии ZC2 будут доступны настраиваемые профили вывода кода. Среди настроек будет регистр названий тэгов и атрибутов, способ написания самозакрывающихся тэгов, настройка переносов тэгов. Также будет автоопределение типа документа: HTML/XHTML/XML, в зависимости от этого будет выбран соответствующий профиль.

Также хотелось бы узнать, кто каким редактором пользуется, чтобы по возможности подготовить версии для самых популярных.

Вадим, спасибо. Буду пользоваться.
Сергей - я пользуюсь E-texteditor и был бы очень счастлив, если бы по возможности были версии и для него.

Хм, спасибо за доктайпы ;)
Это действительно самая логичная идея, много лучше чем какие-то сокращения, забываемые через несколько минут.
И таб в конце строки тоже приятен.

Надо будет это добавить в мой набор для фаровского TrueTemplate.

Вот подождем новую версию InType (в ней изменится синтаксис снипетов) и займемся :-)
Кстати, а почему у вас судя по шаблону html:5 сначала идет тайтл, а только потом - мета? Не было бы логичнее сначала передать всю метаинформацию, а только потом - текстовый контент документа (тайтл ведь уже непосредственно относится к содежримому)? Тем более что так будет сначала передаваться кодировка, и к моменту получения заголовка страницы браузер будет знать, как его интерпретировать. Я понимаю, что все работает и так, но считаю, что передавать метаинформацию в первую очередь более логично.

считаю, что передавать метаинформацию в первую очередь более логично

Что забавно, единственный адекватный HTML 5 валидатор тоже считает, что мета с кодировкой должна быть «first child of head element», хотя точных указаний в спецификации я не нашёл.

Думаю, что ближе к концу этой недели выйдет обновление 1.3.1 для Zen CSS (уже много ошибок и улучшений) и может чуть позже 1.3.1 для Zen HTML.

Ну, я только за то, чтобы мета с кодировкой была в документе. Но расположение её после title кажется мне несколько более логичным. Не с точки зрения определения кодировки этого самого title, а с точки зрения структуры документа.

Круто. Отличная идея и отличная реализация. Жаль что только под TextMate.

Что на счет Adobe Dreamweaver?

Насколько я знаю, браузер сначала определяет кодировку, как ему вздумается. Затем он добирается до тега meta с кодировкой, и если указанная не совпадает с дефолтной, то страница начинает грузиться заново. Поэтому лучше указать кодировку раньше всего. В общем, что-то такое я читал...

А по поводу добавления abbrev.properties SciTE на гугл-код - можно. Но стоит учесть, что в Скайте нет сниппетов, поэтому там все сильно отличается. На почту вышлю

Небольшая проблема с bdl+
Поправьте пожалуйста.

Вадим, у меня есть пакет сниппетов первой ветки под intype. Который к тому же поддерживает некоторые фишки второй ветки.

Можно зарелизить, отпишите пожалуйста на почту.

jazz, а разве интайп сейчас позволяет реализовать разворачивание произвольных конструкций?
Если могу чем-нибудь помочь в работе над снипетами для интайпа - дайте знать, мне небезразлична судьба этого редактора -)

Я тут подумал...

w:100 → width:100px; или r:30% → right:30%; и т.д.

То есть тут две идеи. Одна про то, что можно сразу указывать цифру, а вторая про то, что если величина не задана изначально, то по дефолту указывается в пикселях.
м?

tefery, вам всё равно набирать нужную величину, а сделаете вы это до или после — разницы большой нет. Мне кажется, что схема, при которой вы сначала разворачиваете свойство, а потом уже полноценно с ним работаете меньше всего ломает привычное написание кода, напоминая скорее более удобную подстановку, чем какой-то новый мета-язык.

pepelsbey, Я вам это на основе личного опыта говорю. Так реально удобней. Особенно, когда нужно корректировать что либо в вёрстке, чем меньше телодвижений, тем быстрее я увижу результат.

Насчёт мета языка... Вы везде пишете, про то что не хотите превращать Zen Coding во что то большее, чем он является сейчас. Собственно, почему нет? По моему это отличная идея. Любая великая вещь сначала была просто хорошей штукой для себя. Взять к примеру Стива Возняка. Сначала он был просто парнем любящим электронику, а теперь мы можем говорить с вами общаться о зен кодинге на огромном расстоянии.

Zen Coding уже сам по себе революционен и если добавить в него всяких хороших штук, то будет вообще супер. А если вам дорога идея простоты, точнее «не усложнения», то можно в итоге сделать разные версии, что то вроде Zen Coding Core и Zen Coding Extended.
Новый мета язык разметки, разве это плохо?

Господа, это всё просто супер!
Я работаю под Виндой, использую редактор Notepad++ (Scintilla-based). Сделайте, пожалуйста, поддержку этого редактора, или посоветуйте хороший редактор под винду с уже реализованной поддержкой. Но я надеюсь, поскольку SciTE вы уже поддержали, N++ поддержать будет не так сложно...

Скажите, это чудо доступно в программе Bluefish??? Или это не реально?

Знаю что есть фильтр |c, который обрамляет комментариями тег. Но это слишком перенасыщает код ненужной информацией, ведь открытый тег итак с классом, а над ним еще и комментарий ставится, нет ли возможности добавлять комментарий только после закрывающего тега? К примеру, чтобы было не так:

<!-- #page -->
<div id="page"></div>
<!-- /#page -->

А вот так:

<div id="page"></div><!-- /#page -->