Специально для 404fest доделал новую версию Zen Coding под номером 0.5. Анонс этой версии и всех нововведений появится в ближайшие дни (сначала для Eclipse, потом через несколько дней и на остальных редакторах). Также, для этого фестиваля добавил поддержку еще одного редактора — editArea, который представляет собой редактор исходного кода, работающий прямо в браузере. Так что все прелести Zen Coding теперь можно оценить в онлайне и даже поставить его себе на сайт или в CMS.
Архив за Сентябрь 2009
-
Zen Coding онлайн
20 комментариев -
Домашка №1: результаты
Из 27 присланных работ результаты разделились следующим образом:
- Холодно — 18
- Тепло — 7
- Горячо — 2
В «Холодно» автоматически отправились все работы, где логотип находился между первым и вторым пунктом меню в HTML. Во-первых, это слишком просто и не интересно. Во-вторых — как правильно и своевременно заметил DeMx — такую конструкцию достаточно сложно сгенерировать на стороне сервера. Дело в том, что далеко не каждая CMS позволяет настолько легко вмешаться в генерацию стандартных компонентов. То есть упрощая себе работу на клиенте, сильно усложняем ее на сервере. Более того, в этом случае происходит смешивание данных и представления, а это вряд ли закончится чем-то хорошим. И если в контексте меню с логотипом особых проблем не видно, то в других ситуациях, когда дело будет касаться, например, контента и бокового меню — проблемы точно возникнут, в основном со стороны администрирования простым пользователем.
Соответственно, правильным решением было отделить меню от логотипа, что и сделали другие 7 участников. Практически все они поступили одинаково: сместили первый пункт влево с помощью
right: 100%; margin-right: 5%, тем самым выполнив условие с одинаковым расстоянием между пунктами меню. Однако засыпались на условии соблюдения выравнивания логотипа по базовой линии. Большинство «на глаз» подобрало значение смещения в em’ах, однако это не дает точного результата на разных ОС и при произвольном размере шрифта.Но два горячих парня — Ante и scorpix — решили поступить немного иначе. Правильно решив, что высокая картинка будет ровно стоять только на сплошной текстовой строке, они сделали все элементы инлайновыми. Scorpix просто написал все span’ами, а вот Ante сделал красивую и логичную HTML-конструкцию (которая совсем не понравилась IE и Fx2), превратив элементы в инлайн-блоки. Он и получает приз чикуёнковской симпатии.
Я в своем решении поступил точно так же, как и ребята из категории «Тепло» — сместил первый пункт меню с помощью
right: 100%; margin-right: 5%, разместив логотип абсолютом поверх меню. До первого пункта меню можно добраться двумя способами: через селектор:first-childи одноразовый expression для IE, либо указав этому элементу особый класс (что я и сделал). Естественно, я столкнулся с проблемой выравнивания логотипа по базовой линии. Можно было просто указать приблизительное смещение элемента в em’ах, чтобы выровнять логотип по тексту, а все нестыковки при изменении размера шрифта назвать придирками. Но если вы хотите заставить вашего дизайнера биться в экстазе, я покажу вам простой трюк, который позволит точно выровнять логотип по тексту.Так как логотип у нас находится в блоке и абсолютно спозиционирован, он никак не связан с текстом меню. Вы должны были заметить одну особенность: если достаточно высокую картинку разместить где-нибудь в середине текста, то она раздвинет строку по своей высоте.
Это не совсем то, что нам нужно: размер строки должен зависеть только от размера шрифта. Поэтому мы просто избавляемся от влиния высоты элемента с помощью отрицательного марджина (в качестве значения указываем высоту картинки):
Осталось, чтобы в нашем блоке с логотипом (он абсолютно спозиционирован, помните?) появилась полноценная строка. Для этого достаточно просто поставить пробел после картинки 🙂 Смотрим, что получилось в итоге.
Скоро будет второе задание, на этот раз создадим что-нибудь полезное для общества.