Оригинал
В статье описывается новый способ написания HTML кода с использованием CSS селекторов, применяя удобный комплект инструментов, разработанный Сергеем Чикунком.
Сколько времени вы тратите для написания HTML? Теги, атрибуты, кавычки, скобки? Конечно, задача упрощается при использовании редактора с использованием автодополнения слов, но все же приходится вручную набирать довольно таки много кода.
Та же проблема и с Javascript, когда мы хотим получить конкретный элемент на странице. Приходилось писать много громоздкого кода, который становился все сложнее и сложнее в поддержке. Задачу решили Javascript фрэймворки, введя методики использования CSS селекторов. И вот теперь, вы можете использовать простые CSS выражения для получения любого DOM элемента. Удобно не правда ли?
А если бы вы могли использовать селекторы не только для выбора и доступа к элементам, но и еще и для генерации кода? Например, если бы вы могли написать так…
… и получить такой текст
Итак, сегодня мы представим вам Zen Coding, набор инструментов для высокоскоростной верстки. Изначально способ был предложен Вадимом Макеевым в апреле 2009, реализовывался автором этой статьи на протяжении нескольких месяцев, и наконец готов к использованию. Zen Coding состоит из 2 компонентов: заменитель аббревиатур(аббревиатура — селекторы, схожие с CSS-селекторами) и контекстно-независимые пары HTML тэгов. Взгляните на демонстрационное видео и убедитесь как все просто.
Если у вас нет желания читать подробные инструкции и примеры использования, взгляните на демо и скачайте плагин
Замена аббревиатуры
Функция замены аббревиатуры на лету трансформирует похожие на CSS селекторы в готовый XHTML кода. Возможно, термин «аббревиатура» может быть немного непонятным. Почему нельзя просто использовать выражение «CSS селектор»? На это есть 2 причины: первая, семантическая, селектор означает выбор чего-либо, здесь же мы генерируем, с помощью написания короткой конструкции, отображающей большой код. Вторая причина, поддержка лишь небольшой части CSS синтаксиса, плюс введение новых операторов.
Ниже приведен список, поддерживаем свойств и операторов:
Название элемента (div, p);
Элемент с идентификатором (div#content, p#intro, span#error)
Элемент с классом (div.header, p.error.critial). Можно комбинировать с идентификатором, например: div#content.column.width;
Дочерний элемент (div>p, div#footer>p>span);
Вложенный элемент (h1+p, div#header+div#content+div#footer);
Определенное количество элементов (ul#nav>li*5>a);
Нумерация элементов (ul#nav>li.item-$*5);
Итак, вы уже имеете представление как применять Zen Coding, просто напишите подобные CSS селекторы(«аббревиатуры)…
div#header>img.logo+ul#nav>li*4>a
и вызовите функцию Замены Аббревиатуры (Expand Abbreviation).
Как вы уже поняли, используется два оригинальных оператора: нумерация и генерация необходимого количества элементов. Например, если вам требуется получить 5 тэгов, необходимо написать li*5. Также подобная конструкция позволяет повторять и вложенные элементы. Если вам необходимо 4 элемента с вложенными тегами, пишем li*4>a и получаем код:
<li><a href=»"></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
Нумерация используется если необходимо выделить повторяющейся элемент с присвоением уникального индекса. Предположим требуется конструкция из трех тэгов c классами item1,item2,item3. Все что вам нужно это написать аббревиатуру div.item$*3
<div class=«item1»></div>
<div class=«item2»></div>
<div class=«item3»></div>
Просто добавьте знак $ для свойства класса или идентификатора, которое вы хотите сделать уникальным. Как здесь…
div#i$-test.class$$$*5
и получаем:
<div id=«i1-test» class=«class111»></div>
<div id=«i2-test» class=«class222»></div>
<div id=«i3-test» class=«class333»></div>
<div id=«i4-test» class=«class444»></div>
<div id=«i5-test» class=«class555»></div>
Как вы уже догадались, аббревиатура «a» генерирует <a href=""></a>. Или «img»=<img src="" alt="" />
Каким образом Zen Coding узнает о необходимости аттрибутов по умолчания для генерации тэга или о том, что закрывающий тэг не нужен? Все просто, в файле zen_settings.js описаны элементы, которые должны получиться в результате, файл представляем собой простой JSON файл, описывающий аббревиатуры для каждого конкретного языка (да, у вас есть возможность определять свои аббревиатуры для синтаксиса различных языков (HTML, XSL, CSS и т.д.). В общем случае определение собственной аббревиатуры выглядит так:
'img': '<img src="" alt="" />',
…
}
}
Zen Coding поддерживает два главных типа элементов: «сниппеты» и «аббревиатуры». Сниппеты-произвольные фрагменты кода, а аббревиатуры-определения тэгов. С помощью сниппетов можно написать абсолютно любой код, и он будет выведен как есть. Но потребуется форматирование текста вручную(например используя \n и \t для генерации переноса строки и табуляции) и использовать ${child} переменную, там где вы желаете получить дочерние элементы, например, cc:ie6>style. Если вы не включите ${child} переменную, дочерний элемент будет сгенерирован после сниппета.
Благодаря аббревиатурам, вы можете описать определения тэгов, при этом очень важен правильный синтаксис. Обычно, мы пишем простой тэг с необходимым аттрибутами, вроде этого:. При использовании Zen Coding, определение тэга помещается в специальный объект, описывающий тэг, аттрибуты и при необходимости пустой тэг. Если вы наберете , Zen Coding применит особые правила перед тем как вывести законченную конструкцию.
И для сниппетов, и для аббревиатур можно добавить символ "|", определяющий положение курсора, после обработки конструкции. По умолчанию, Zen Coding, ставит курсор между кавычек в пустых атрибутах и между открывающим и закрывающим тэгом.
Пример
Приведу пример, что происходит если набрать аббревиатуру и вызвать функцию обработки. Для начала, аббревиатура разбивается на отдельные элементы: так div>a будет разделено на «div» и «a» тэги с сохранением необходимой вложенности. Далее для каждого элемента парсер ищет определение в сниппетах и потом внутри аббревиатуры. Если же определение конструкции не найдено используется название элемента как название нового тэга, применяя ID и class аттрибуты. Например, если написать mytag#example, парсер не найдет определение mytag и сгенерирует Была проделана большая работа по написанию стандартных CSS и HTML аббревиатур и снипетов. Изучив их, вы повысите свою продуктивность при использовании Zen Coding.
Еще одно часто используемое задание для HTML верстальщика — поиск пары тэгов для элемента. Например, вы хотите выделить содержимое переместить его в другое место или просто напросто удалить. Или вы ищете закрывающий тэг или хотите знать какой открывающий тэг соответствует закрытому.
К сожалению множество современных инструментов для разработчиков не включают поддержу этого свойства. И, я решил написать свой собственный поиск соответствий тэгов как часть Zen Coding. На данном этапе это все лишь бета версия и имеет некоторые недостатки, но работает довольно хорошо и быстро. Вместо просмотра полного документа ищется релевантный тэг исходя из позиции курсора. Таким образом достигается сокрость и контексто-независимость. И работает даже с сниппетом в виде JavaScript кода
<li class=«item3»>News
<li class=«item4»>Blog
<li class=«item5»>Contact Up
</ul>
</div>
Как вы уже убедились, Zen Coding довольно мощный инструмент для обработки текста
Обработать аббревиатуру
Найти пару для тэга(открывающий или закрывающий тэг)
Обернуть с аббревиатурой
Объединить строки
Последнее место редактирования
Следующее место редактирования
Перейти к подходящей паре тэгов
Итак, вы узнали о принципах работы Zen Coding и как можно облегчить вашу работу. Почему бы не попробовать прямо сейчас? Ведь Zen Coding написан на чистом JavaScripte и портирован на Python, таким образом работает в браузере, и довольно просто интегрируется в CMS
Zen Coding нельзя интегрировать в каждый редактор. Это компонент, работающий с текстом: берет текст, что то делает и возвращает новый текст. Написан на JavaScript и Python, и может быть запущен виртуально на любой платформе. В Windows вы можете запустить JavaScript версию Widnows Scripting Host. Все современные Mac'и и Линукс дистрибутивы включают в состав Python
Чтобы ваш редактор поддерживал Zen Coding, необходимо написать плагин, способный обмениваться данными между редактором и Zen Coding. Редактор может не полностью поддерживать Zen Coding ввиду особенностей собственной системы плагинов.
* Aptana (кроссплатформенный);
* Coda, через TEA for Coda (Mac);
* Espresso, через TEA for Espresso (Mac);
* TextMate (Mac, возможно использование E-text editor для Windows);
* TopStyle;
* Sublime Text;
* GEdit;
* editArea online editor;
Многие люди, попробовавшие Zen Coding говорят, что изменили свои методы создания веб-страниц. Впереди еще много работы, реализовать поддержку многих редакторов, и написание документации. На данный момент вы можете посмотреть уже написаную документацию и исходные коды, чтобы найти ответы на ваши вопросы. Надеюсь вам понравится работы с Zen Coding!
В статье описывается новый способ написания HTML кода с использованием CSS селекторов, применяя удобный комплект инструментов, разработанный Сергеем Чикунком.
Сколько времени вы тратите для написания HTML? Теги, атрибуты, кавычки, скобки? Конечно, задача упрощается при использовании редактора с использованием автодополнения слов, но все же приходится вручную набирать довольно таки много кода.
Та же проблема и с Javascript, когда мы хотим получить конкретный элемент на странице. Приходилось писать много громоздкого кода, который становился все сложнее и сложнее в поддержке. Задачу решили Javascript фрэймворки, введя методики использования CSS селекторов. И вот теперь, вы можете использовать простые CSS выражения для получения любого DOM элемента. Удобно не правда ли?
А если бы вы могли использовать селекторы не только для выбора и доступа к элементам, но и еще и для генерации кода? Например, если бы вы могли написать так…
div#content>h1+p… и получить такой текст
<div id="content">
<h1></h1>
<p></p>
</div>Итак, сегодня мы представим вам Zen Coding, набор инструментов для высокоскоростной верстки. Изначально способ был предложен Вадимом Макеевым в апреле 2009, реализовывался автором этой статьи на протяжении нескольких месяцев, и наконец готов к использованию. Zen Coding состоит из 2 компонентов: заменитель аббревиатур(аббревиатура — селекторы, схожие с CSS-селекторами) и контекстно-независимые пары HTML тэгов. Взгляните на демонстрационное видео и убедитесь как все просто.
Если у вас нет желания читать подробные инструкции и примеры использования, взгляните на демо и скачайте плагин
Замена аббревиатуры
Функция замены аббревиатуры на лету трансформирует похожие на CSS селекторы в готовый XHTML кода. Возможно, термин «аббревиатура» может быть немного непонятным. Почему нельзя просто использовать выражение «CSS селектор»? На это есть 2 причины: первая, семантическая, селектор означает выбор чего-либо, здесь же мы генерируем, с помощью написания короткой конструкции, отображающей большой код. Вторая причина, поддержка лишь небольшой части CSS синтаксиса, плюс введение новых операторов.
Ниже приведен список, поддерживаем свойств и операторов:
EНазвание элемента (div, p);
E#idЭлемент с идентификатором (div#content, p#intro, span#error)
E.classЭлемент с классом (div.header, p.error.critial). Можно комбинировать с идентификатором, например: div#content.column.width;
E>NДочерний элемент (div>p, div#footer>p>span);
E+NВложенный элемент (h1+p, div#header+div#content+div#footer);
E*NОпределенное количество элементов (ul#nav>li*5>a);
E$*NНумерация элементов (ul#nav>li.item-$*5);
Итак, вы уже имеете представление как применять Zen Coding, просто напишите подобные CSS селекторы(«аббревиатуры)…
div#header>img.logo+ul#nav>li*4>a
и вызовите функцию Замены Аббревиатуры (Expand Abbreviation).
Как вы уже поняли, используется два оригинальных оператора: нумерация и генерация необходимого количества элементов. Например, если вам требуется получить 5 тэгов, необходимо написать li*5. Также подобная конструкция позволяет повторять и вложенные элементы. Если вам необходимо 4 элемента с вложенными тегами, пишем li*4>a и получаем код:
<li><a href=»"></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
Нумерация используется если необходимо выделить повторяющейся элемент с присвоением уникального индекса. Предположим требуется конструкция из трех тэгов c классами item1,item2,item3. Все что вам нужно это написать аббревиатуру div.item$*3
<div class=«item1»></div>
<div class=«item2»></div>
<div class=«item3»></div>
Просто добавьте знак $ для свойства класса или идентификатора, которое вы хотите сделать уникальным. Как здесь…
div#i$-test.class$$$*5
и получаем:
<div id=«i1-test» class=«class111»></div>
<div id=«i2-test» class=«class222»></div>
<div id=«i3-test» class=«class333»></div>
<div id=«i4-test» class=«class444»></div>
<div id=«i5-test» class=«class555»></div>
Как вы уже догадались, аббревиатура «a» генерирует <a href=""></a>. Или «img»=<img src="" alt="" />
Каким образом Zen Coding узнает о необходимости аттрибутов по умолчания для генерации тэга или о том, что закрывающий тэг не нужен? Все просто, в файле zen_settings.js описаны элементы, которые должны получиться в результате, файл представляем собой простой JSON файл, описывающий аббревиатуры для каждого конкретного языка (да, у вас есть возможность определять свои аббревиатуры для синтаксиса различных языков (HTML, XSL, CSS и т.д.). В общем случае определение собственной аббревиатуры выглядит так:
'html': {
'snippets': {
'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
...
},
'abbreviations': {
'a': '<href="">','img': '<img src="" alt="" />',
…
}
}
Типы элементов
Zen Coding поддерживает два главных типа элементов: «сниппеты» и «аббревиатуры». Сниппеты-произвольные фрагменты кода, а аббревиатуры-определения тэгов. С помощью сниппетов можно написать абсолютно любой код, и он будет выведен как есть. Но потребуется форматирование текста вручную(например используя \n и \t для генерации переноса строки и табуляции) и использовать ${child} переменную, там где вы желаете получить дочерние элементы, например, cc:ie6>style. Если вы не включите ${child} переменную, дочерний элемент будет сгенерирован после сниппета.
Благодаря аббревиатурам, вы можете описать определения тэгов, при этом очень важен правильный синтаксис. Обычно, мы пишем простой тэг с необходимым аттрибутами, вроде этого:. При использовании Zen Coding, определение тэга помещается в специальный объект, описывающий тэг, аттрибуты и при необходимости пустой тэг. Если вы наберете , Zen Coding применит особые правила перед тем как вывести законченную конструкцию.
И для сниппетов, и для аббревиатур можно добавить символ "|", определяющий положение курсора, после обработки конструкции. По умолчанию, Zen Coding, ставит курсор между кавычек в пустых атрибутах и между открывающим и закрывающим тэгом.
Пример
Приведу пример, что происходит если набрать аббревиатуру и вызвать функцию обработки. Для начала, аббревиатура разбивается на отдельные элементы: так div>a будет разделено на «div» и «a» тэги с сохранением необходимой вложенности. Далее для каждого элемента парсер ищет определение в сниппетах и потом внутри аббревиатуры. Если же определение конструкции не найдено используется название элемента как название нового тэга, применяя ID и class аттрибуты. Например, если написать mytag#example, парсер не найдет определение mytag и сгенерирует Была проделана большая работа по написанию стандартных CSS и HTML аббревиатур и снипетов. Изучив их, вы повысите свою продуктивность при использовании Zen Coding.
HTML поиск пар
Еще одно часто используемое задание для HTML верстальщика — поиск пары тэгов для элемента. Например, вы хотите выделить содержимое переместить его в другое место или просто напросто удалить. Или вы ищете закрывающий тэг или хотите знать какой открывающий тэг соответствует закрытому.
К сожалению множество современных инструментов для разработчиков не включают поддержу этого свойства. И, я решил написать свой собственный поиск соответствий тэгов как часть Zen Coding. На данном этапе это все лишь бета версия и имеет некоторые недостатки, но работает довольно хорошо и быстро. Вместо просмотра полного документа ищется релевантный тэг исходя из позиции курсора. Таким образом достигается сокрость и контексто-независимость. И работает даже с сниппетом в виде JavaScript кода
var table = '<table>';
for (var i = 0; i < 3; i++) {
table += '
"Обертка" аббревиатурами
Довольно удобная возможность, комбинирующая мощь замены аббревиатуры(Abbreviation Expander) в сочетании с парными тэгами. Довольно часто приходится добавлять оборачивающий элемент для обхода ошибки браузера. Или, например, вам необходимо небольшое украшение, вроде фонового изображения или рамки, для содержимого блока. Вам приходилось писать открывающий тэг, временно нарушающий целостность кода, искать необходимо место и только потом закрывать тэг. И тут удобно воспользоваться функцией “Wrap with Abbreviation”
Пользоватся ей довольно просто, необходимо набрать аббреиватуру, к которой будет применяться обычная функция Expand Abbreviation и текст появится внутри последнего элемента выражения. Так же Zen Coding учитывает положение курсора: внутри содержимого тега или внутри открывающего и закрывающего тэга. Исходя из этого, оборачивается содержимое тэга или же сам тэг.
Обертка аббревиатур использует особый синтаксис для обертки одиночных строк. Просто опустите переменную нумерации после вызова оператора для вывода определенного количества элементов. Когда Zen Coding встречает элемент с неопределенным количеством повторений элемент выводится столько раз, сколько выбрано строк,вкладывая контент каждой строки внутрь последнего вложенного элемента.
Если вы обернете аббревиатурой div#header>ul#navigation>li.item$*>a>span текст, подобный этому...
About Us
Products
News
Blog
Contact Up
то на выходе получите
<div id="header">
<ul id="navigation">
<li class="item1">About Us
<li class="item2">Products<li class=«item3»>News
<li class=«item4»>Blog
<li class=«item5»>Contact Up
</ul>
</div>
Как вы уже убедились, Zen Coding довольно мощный инструмент для обработки текста
Комбинации клавиш
Ctrl+,Обработать аббревиатуру
Ctrl+MНайти пару для тэга(открывающий или закрывающий тэг)
Ctrl+HОбернуть с аббревиатурой
Shift+Ctrl+MОбъединить строки
Ctrl+Shift+?Последнее место редактирования
Ctrl+Shift+?Следующее место редактирования
Ctrl+Shift+?Перейти к подходящей паре тэгов
Онлайн демо
Итак, вы узнали о принципах работы Zen Coding и как можно облегчить вашу работу. Почему бы не попробовать прямо сейчас? Ведь Zen Coding написан на чистом JavaScripte и портирован на Python, таким образом работает в браузере, и довольно просто интегрируется в CMS
Поддерживаемые редакторы
Zen Coding нельзя интегрировать в каждый редактор. Это компонент, работающий с текстом: берет текст, что то делает и возвращает новый текст. Написан на JavaScript и Python, и может быть запущен виртуально на любой платформе. В Windows вы можете запустить JavaScript версию Widnows Scripting Host. Все современные Mac'и и Линукс дистрибутивы включают в состав Python
Чтобы ваш редактор поддерживал Zen Coding, необходимо написать плагин, способный обмениваться данными между редактором и Zen Coding. Редактор может не полностью поддерживать Zen Coding ввиду особенностей собственной системы плагинов.
Полная поддержка
* Aptana (кроссплатформенный);
* Coda, через TEA for Coda (Mac);
* Espresso, через TEA for Espresso (Mac);
Частичная поддержка (Только ”Expand Abbreviation”)
* TextMate (Mac, возможно использование E-text editor для Windows);
* TopStyle;
* Sublime Text;
* GEdit;
* editArea online editor;
Заключение
Многие люди, попробовавшие Zen Coding говорят, что изменили свои методы создания веб-страниц. Впереди еще много работы, реализовать поддержку многих редакторов, и написание документации. На данный момент вы можете посмотреть уже написаную документацию и исходные коды, чтобы найти ответы на ваши вопросы. Надеюсь вам понравится работы с Zen Coding!