Website development
14 March 2011

Zen Coding v0.7

Вчера вышла новая версия набора скриптов для сверхскоростной верстки под названием Zen Coding.

Коротко о главном:
  1. Text nodes, полноправные участники аббревиатур

    {sample text}
    {item number $ ${nl}}*5
    p>{Click }+a{here}+{ to continue}

  2. Улучшенный механизм оборачивания в аббревиатуру (с предпросмотром в Eclipse). Посмотреть можно в демке, попробуйте обернуть (Ctrl+Shift+A) текст следующими аббревиатурами:

    ul>li*>a{Click at $#}
    span[title=$#]{Element’s title is $#}*
    ul>li*>span{$#}+{ }+a[title=$#]{$#}

    При оборачивании набранных текстом списков можно указать ключ |t, чтобы сбросить маркеры
  3. Размножение групп элементов

    dl>(dt+dd)*4

  4. Новые действия:
    • Increment/decrement number – изменяет число под курсором на 1, 10 или 0.1.
    • Evaluate Math Expression – выполняет простые математические выражения вроде 50/2+10 под курсором
    • Select Next/Previous Item – быстро выбирает следующий/предыдущий элемент в HTML (имя открывающего тега, полный атрибут, имя атрибута) и CSS (правило, полное свойство, значение свойства).
    • Reflect CSS Value – позволяет быстро вставить значение CSS-свойства и его аналогов с вендорными префиксами:

      -webkit-border-radius: 10px;
      -moz-border-radius: 5px;
      border-radius: 5px;

    • Encode/decode image to data:URI — быстро преобразовывает картинку в data:URL и обратно, в src или url()
  5. Multiple tabstops (Aptana/Eclipse, Espresso, TextMate, Komodo Edit) — перемещение по значениям свойства при помощи Tab, работает аналогично TextMate. Для демонстрации попробуйте развернуть в
    • CSS: bsha, brad+bsha
    • HTML: link:css*3
  6. Еще важные апдейты:
    • Update image size теперь работает и в CSS.
    • Аббревиатуры типа select>option*4 (т. е. блочные элементы внутри инлайновых) теперь разворачиваются корректно.
    • С восклицательным знаком аббревиатура CSS-свойства получает приписку !important:

      pos:a! → position:absolute !important;

    • Аббревиатуры и сниппеты с двоеточием для ускорения можно набирать и с дефисом (pos:a → pos-a).
    • Новый фильтр |s для вывода в одну строку.
  7. Множество закрытых багов (см. Google Code Issues).
  8. И еще кое-что по мелочи.

+61
5.1k 66
Comments 69