• Рецензия на книгу Сергея Соколова «CSS 3 в примерах», разгромная.
• Статья, посвещённая эффективной работе с табличными данными — от размышлений об уместности использования таблиц до практических примеров.
• Продолжение, а точнее полная обновлённая версия статьи «CSS-менеджмент».
• Подробное исследование вопроса нарезки и оптимизации графики для вёрстки — от основ использования форматов до инструментария. Рабочее название — «С ножом против паровоза».

Отчётная часть на этом закончена, и напоследок позволю себе сообщить вам о запуске сайта DarkEntries. Вся дневниково-музыкальная часть, внезапно исчезнувшая с этого сайта, всплыла на новом домене.

So Safari, Opera and now Firefox all pass the test; of the major browsers, that only leaves one Inevitable Exception…

Судя по словам архитектора IE8 Алекса Могилевского, CSS3-селекторы не будут внедрены в IE до тех пор, пока спецификация не будет официально утверждена. А что до тех CSS3-селекторов, что уже появились в IE7 («we actually did a couple of CSS3 Selectors for IE7»), то это, по его же словам, произошло случайно — просто человек, занимавшийся внедрением, не был в курсе, что это оказывается CSS3…

В общем, теперь-то мы знаем, что на самом деле скрывается за аббревиатурой IE ;)

Каких только решений не придумано для этой тривиальной задачи — от сомнительного списка элементов <img> до более-менее внятных решений с помощью фоновых изображений. Но одно неизменно — всё это сдобрено хорошей порцией JS-кода, отвечающего за необходимое поведение. Что вполне логично приводит к тому, что без JS, в лучшем случае, не видно всей красоты, а в худшем — вообще нельзя проголосовать. В общем, не слишком хорошо.

Поэтому я предлагаю новое решение: пять звёздочек и его особенности:

• Вся динамика максимально вынесена в CSS при помощи псевдо-класса :hover, JS применяется только для фиксирования результата голосования и для того, чтобы заставить IE6 понимать указанный псевдо-класс не только для ссылок, за счёт переключения дополнительного класса phover при взаимодествии с контролом.
• Следовательно, при отключённом JS, во всех браузерах, кроме IE6 и младше, вся красота со звёздочками продолжает работать, а сам процесс голосования становится простым переходом по ссылке.
• Для отрисовки звёздочек используется только одна картинка, таким образом — только один запрос и контрол уже готов к работе.
• Потенциально, голосование становится возможно даже при отключённых картинках — в таком случае рейтинг выглядит как прогресс-бар. Очевидность контрола в этом случае ухудшается, но и это уже ценно.

Самая интересная часть CSS-кода:

1. .voting A.cur,
2. .voting A:hover,
3. .voting:hover A.cur:hover,
4. .voting:hover A:hover {
5. background:#FC0 url(../i/stars.png) no-repeat;
6. }
7. .voting:hover A.cur {
8. background:none;
9. }

Признаюсь честно, вещей вроде E:hover E:hover { … } мне до сих пор писать не приходилось.

Также хотелось бы упомянуть про интересное JS-решение для определения версии IE, чтобы для шестой его версии и младше эмулировать псевдо-класс :hover для списков. И вот каким образом я получаю переменную ltIE7 (less than IE7):

1. var ltIE7 = false
2. /*@cc_on
3. @if (@_jscript_version < 5.7)
4. ltIE7 = true
5. @end
6. @*/

Эта пляска с собачками называется «условное выполнение» (Conditional Compilation) и формально вообще не является JavaScript'ом, это JScript. Если я не ошибаюсь, только его IE и понимает, а официальный JavaScript работает только благодаря довольно широкой совместимости этих языков. Что-то до боли знакомое, вы не находите? Прямо условные комментарии (Conditional Comments), только в JS-реинкарнации. Кто знает, если копнуть MSDN поглубже, может быть найдётся что-то похожее и для CSS?

По аналогии с предыдущим примером, можно получить и переменную ltIE6 (less than IE6), вычислив версию JScript, использующуюся в браузере. Для IE6 она равна 5.5:

1. @if (@_jscript_version < 5.6)
2. ltIE6 = true
3. @end

Более подробное описание этой чудо-технологии можно найти в статье «Conditional Compilation Variables». Пятизвёздочных вам рейтингов ;)

• Не забывайте добавлять фоновый цвет при указании фонового изображения, когда цвет фона страницы совпадает или не слишком контрастирует с цветом текста.
• Постарайтесь обрисовать основные блоки, очертания которых формируются с помощью картинок, при помощи цвета фона или рамок. Чтобы каркас вашего сайта прорисовывался и без графики. Как пример такой практики — задание слабо контрастного цвета фона элементов <img> для иллюстраций в тексте для того, чтобы избежать дырок в тексте — конечно при условии, что картинкам заданы размеры.
• Не ленитесь указывать альтернативный текст для изображений и не забывайте, что этот текст можно оформлять, применяя стили шрифта к элементу <img>.

В принципе, можно продолжать и дальше, но я не об этом. Обратите внимание на последнюю рекомендацию — о ней помнит большинство верстальщиков, иначе можно получить линейкой по рукам от валидатора. Однако мало кто вспоминает про такой слегка сомнительный, но пока вполне легальный элемент, как <input type="image"/>

И чёрт с ней, с иллюстрацией — не увидят, да может и к лучшему. А вот невозможность отправить форму при отсутствующей или неявно присутствующей кнопке — это уже дело посерьёзнее. И что будем делать? Понятное дело — прописывать текст действия, написанный или подразумеваемый на картинке. Но как? К примеру, встретил я на днях такое:

1. <input type="image" src="send.gif" value="Отправить"/>

Судя по всему, это сработано по аналогии с <input type="submit"/>, где задание атрибута value="Отправить" задаёт текст действия на кнопке. И ведь работает, правда, местами… Однако, как нам известно, элемент <input type="image"/> имеет красноречивый атрибут alt (наряду с типично картиночными align, usemap, ismap), предназначенный как раз для задания альтернативного текста.

Учитывая то, что валидатор не имеет ничего против атрибутов value и alt для <input type="image"/> в XHTML 1.0 Strict документе, то давайте проверим на практике — кто же из них круче. Предложим такой код следующему зверинцу: IE 5–7, Firefox 3, Opera 9, Safari 3…

1. <input type="image" src="send.gif" alt="Альтернативный текст"/>
2. <input type="image" src="send.gif" value="Чушь какая-то"/>
3. <input type="image" src="send.gif" value="Чушь какая-то" alt="Альтернативный текст"/>

…и получаем: alt vs value

Получается, что value хоть и срабатывает в Firefox и Safari как альтернативный текст, но всё же напрочь перебивается значением alt, которое стабильно отображается во всех протестированных браузерах.

Вывод очевиден — помимо правильности использования атрибута alt по прямому назначению, это ещё и самый стабильный способ задания альтернативного текста для элемента <input type="image"/>.

1. Всегда отдавайте каждому браузеру только то, что он должен и может переварить. Это значит, что ваш HTML-документ и файл стилей абсолютно валидны, не содержат загадочных невидимых юникодных символов, все хаки для IE вынесены во внешний файл и подключаются через условные комментарии. Тогда мистики в вашей работе поубавится.
2. Пишите хаки только для IE, не ройте себе яму. Где и как — см. пункт 1.
3. Изучайте возможности CSS3 и внедряйте их в свои работы, не забывая про обратную совместимость с динозаврами.
4. Не превращайтесь в макетонарезочный автомат — мыслите на шаг вперёд дизайнера, помогайте ему и не нойте «он не предусмотрел состояние посещённых ссылок!», а просто сделайте это сами.
5. Фары и ремень!.. Точнее, грамотность и типографика. Тире, копирайты, кавычки, заголовки, списки, врезки, цитаты, форматы дат, телефонных номеров — всё мнообразие представления текста. Не поддавайтесь быдло-вебу и чат-стилю текста.

И тут приходят сомнения…

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

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

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

1. В основном тексте книги для удобства будут встречаться следующие
2. обозначения: особенно важные моменты мы будем обозначать
3. <strong>полужирным</strong> выделением, цитаты будут обозначены
4. <cite>курсивом</cite>, фрагменты кода <code>моноширинным</code>
5. шрифтом, а текст из предыдущих изданий
6. будет выводиться <del>перечёркнутым</del>.

А теперь давайте подумаем. Разметка документа при помощи семантических элементов предполагает выбор элемента в соответствии с его содержимым. И о чём же говорят нам эти слова: «полужирный, курсив, моноширинный, перечёркнутый»? Ну уж никак не о важности, цитировании, коде и версионности. Очевидно, что только о представлении, демонстрируя, как должны выглядеть соответствующие фрагменты текста. Давайте будем честны, текст стоит разметить вот так:

1. В основном тексте книги для удобства будут встречаться следующие
2. обозначения: особенно важные моменты мы будем обозначать
3. <b>полужирным</b> выделением, цитаты будут обозначены
4. <i>курсивом</i>, фрагменты кода <tt>моноширинным</tt>
5. шрифтом, а текст из предыдущих изданий
6. будет выводиться <s>перечёркнутым</s>.

Только вот проблема — кое-какие из упомянутых элементов помечены как нежелательные. А ведь мы с вами только что создали семантически верный фрагмент документа. И что же делать? Честно говоря, не уверен. Знаю одно — сомневаться полезно, это пробуждает мысль от сна слепой уверенности.

А как думаете вы?

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

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

Срок приёма заявок на участие — с 3 апреля по 25 сентября 2008 года включительно. Времени более чем достаточно. Причём скажу вам, как инсайдер, что уровень заявок на данный момент таков, что у любого мало-мальски приличного сайта сейчас есть шансы если и не на победу, то как минимум на хорошее место в общем рейтинге конкурса.

И ладно бы, если дизайнеру понравилось поле поиска со скруглёнными краями из Mac OS X. Другое дело, когда он берётся за кнопку «Обзор», выпадающие списки или чекбоксы с радиобатонами — остаётся только молча сжать кулаки. И не потому, что это долго и сложно делать… Скорее потому, что тем самым дизайнер заставляет пользователя думать «боже, что это за хрень такая?» — он прячет то, к чему пользователь привык в своей системе или браузере. А это может привести к тому, что он, потратив время на попытку разобраться в интерфейсе, может плюнуть на все и уйти.

Но бывает, что очень надо. Поэтому предлагаю вам одно из решений проблемы с чекбоксами и радиобатонами, прототип которого я использовал в проекте «Магазин одной футболки» для Livejournal.

Найсбокс — для того, чтобы увидеть решение в действии, нажмите «Nice!».

Суть метода заключается в том, что мы, во-первых, оборачиваем наши контролы прямо в <label>:

1. <legend>Оркестра</legend>
2. <ul>
3. <li>
4. <label for="first-1">
5. <input type="radio" name="first" id="first-1" />
6. Представляет
7. </label>
8. </li>
9. </ul>

А во-вторых, если у пользователя включён JavaScript, то мы назначаем форме class="nice", а также ряд дополнительных классов для <input> и <label> — это прячет родные контролы далеко налево и рисует наши фоном для <label>:

1. .form .lost {
2. position:relative;
3. left:-9999px;
4. }
5. .form .radio-on {
6. background:url(../i/radio/on.gif) 0 50% no-repeat;
7. }

Таким образом, просто смещая контролы налево, мы сохраняем высоту строки и избегаем прыжков при срабатывании JS-функции.

Стоит заметить, что данная методика не претендует на звание «решение под ключ», а всего лишь демонстрирует подход к решению проблемы. Кроссбраузерность вполне на уровне: IE5–7, Firefox 2–3, Opera 9 (как минимум), Safari 3. Если вам важна совместимость с Safari 2, то придётся писать дополнительный костыль, который обеспечит встроенную в остальные браузеры связь ярлык/поле.

Остаётся только пожелать вам вменяемых дизайнеров и не использовать подобные методики.

Современный взгляд на организацию кода

Продолжение. Начало — «Семантическая вёрстка. Часть первая»

Второй уровень семантики: именование элементов

Для создания второго смыслового уровня документа у нас есть два способа именования элементов: id и class. Каждый имеет свои особенности, в силу которых формируются типичные ситуации применения каждого из них.

Имя элемента характеризует его функциональность или содержимое: упорядоченный список (первый уровень семантики) комментариев (второй уровень семантики).

1. <ol id="comments">
2. <li>Первый</li>
3. <li>Второй</li>
4. </ol>

Согласно спецификации, id — это имя уникального элемента, в большей степени подходит для создания структурной разметки документа:

1. <body>
2. <div id="header"> … </div>
3. <div id="content"> … </div>
4. <div id="footer"> … </div>
5. </body>

В отдельном случае, id применяется для создания связей ярлык-поле при помощи атрибута for элемента <label>:

1. <label for="full-name">
2. Полное имя
3. </label>
4. <input type="text" id="full-name"/>

В то время, как class — это общее имя множества элементов и, соответственно, их общая семантическая роль. Множественные классы для одного элемента позволяют удобно комбинировать не только стили, но ещё смысловые значения нескольких имён. Данный фрагмент микроформата hCard говорит нам о том, что эта ссылка ведёт на сайт (url) организации (org) под названием (fn) «Яндекс»:

1. <a href="http://yandex.ru/" class="fn org url">
2. Яндекс
3. </a>

Таким образом, применяя id для структурной разметки, мы создаём некие пространства имён, благодаря которым мы можем адресовать применение стилей для элементов с одинаковыми смысловыми ролями и, соответственно, именами классов. В качестве примера такой ситуации, можно привести оформление ссылок на RSS-поток, которые в шапке и подвале документа, в нашем случае, должны отличаться цветами:

1. <div id="header">
2. <a href="#" class="rss">RSS</a>
3. </div>
4. <div id="footer">
5. <a href="#" class="rss">RSS</a>
6. </div>

1. .rss {
2. padding-left:20px;
3. background:url(rss.png) no-repeat;
4. }
5. #header .rss {
6. color:#C00;
7. }
8. #footer .rss {
9. color:#069;
10. }

Семантически верное именование HTML-элементов при помощи атрибутов id и class, помимо самой семантики, привносит упорядоченность не только в сам документ, а ещё и в процесс разработки.

Правильно именованный код удобно читать, разбираться во всех его хитросплетениях, даже если этот код чужой. Личный опыт показывает, что при использовании последовательной и логичной политики именования элементов, а также отступов, формирующих дерево документа, практически полностью отпадает необходимость разметки кода HTML-комментариями, поясняющими где блок начался, где закончился и что в нём вообще содержится. Всё и так легко понимается из визуальной структуры и имён элементов.

Третий уровень семантики: комбинация именованных элементов

Основа интернета — это гипертекстуальность, т.е. связь документов при помощи гиперссылок, создающая единое информационное пространство сети. Говоря же о третьем уровне семантики, мы подразумеваем создание смысловых связей между семантическими единицами в документе.

Единственным внятным примером этого механизма на данный момент являются микроформаты (μf). Идейным вдохновителем данной методики семантической разметки является Тантек Челик (Tantek Çelik), известный нам по работе над IE for Mac, Box Model Hack и проекту Technorati.

Микроформаты сами по себе являются большой темой для изучения, для чего я могу порекомендовать следить за обновлениями следующих ресурсов:

• Microformats — официальный блог и wiki-документация
• Microformatique — блог Джона Оллсопа (John Allsopp), автора книги о микроформатах
• Микроформаты — о микроформатах по-русски на Хабрхабре

Я же продемонстрирую вам некоторые примеры превращения скверной разметки в разметку, содержащую новые смысловые уровни, и просто интересные примеры использования микроформатов.

В качестве первого примера можно привести разметку имени пользователя и маленькой иконки рядом, так называемого «головастика», который используется в сервисе блогов Livejournal.com. Вот, каким образом это выглядит сейчас:

1. <span class='ljuser' lj:user='kuteev' style='white-space: nowrap;'>
2. <a href='#'>
3. <img src='#' alt='[info]' width='17' height='17'
4. style='vertical-align: bottom;
5. border: 0; padding-right: 1px;' />
6. </a>
7. <a href='#'>
8. <b>kuteev</b>
9. </a>
10. </span>

Давайте внимательно рассмотрим, какую же полезную информацию мы можем извлечь из приведённой разметки:

• Юзернейм не переносится, ибо white-space: nowrap
• Головастика выровняли по вертикали, отключили у него рамку, отступ и задали размеры — width='17' height='17' style='…'
• Кутеев, оказывается, полужирный, поскольку <b>kuteev</b>

Впечатляющая подборка… Но давайте всё-таки попробуем улучшить эту разметку, используя микроформат hCard и долю здравого смысла:

1. <span class="ljuser vcard">
2. <a href="#" target="_blank"
3. class="ico" title="Профиль">
4. <img src="#" alt="" />
5. </a>
6. <a href="#" target="_blank"
7. class="fn nickname url" title="Журнал">
8. kuteev
9. </a>
10. </span>

Что же нового мы теперь можем узнать:

• Мы имеем дело с мини-визиткой Кутеева, потому как class="vcard"
• Ссылка с головастика ведёт в профиль — мы уточнили title="Профиль"
• Никнейм Кутеева — kuteev, мы видим class="fn nickname"
• Ссылка с никнейма ведёт на сайт Кутеева — class="nickname url", а точнее — в журнал, — мы уточнили title="Журнал"
• Пара нажатий — и Кутеев добавлен в мою адресную книгу

Данный код был написан мною для проекта Livejournal.ru, где таким образом были размечены все имена пользователей. Надеюсь, что в скором будущем подобная разметка будет использоваться и на Livejournal.com.

Следующий пример более абстрактен и демонстрирует разметку информации о компании при помощи микроформата hCard, которая дополняется картой расположения офиса, при помощи Google Maps API:

1. <div class="vcard">
2. <h1 class="fn org">Яндекс</h1>
3. <dl>
4. <dt>Адрес:</dt>
5. <dd class="adr">
6. <span class="postal-code">111033</span>,
7. <span class="locality">Москва</span>,
8. <span class="street-address">
9. ул. Самокатная, дом 1
10. </span>
11. </dd>
12. <dl>
13. <div id="map" class="geo">
14. <abbr class="latitude" title="55.7582">
15. N 55° 75.82
16. </abbr>
17. <abbr class="longitude" title="37.6786">
18. W 37° 67.86
19. </abbr>
20. </div>
21. </div>

• Мы имеем дело с визиткой организации и называется она «Яндекс» — class="fn org"
• У нас есть её структурно размеченный адрес: postal-code, locality, street-address
• Также нам известно точное географическое положение организации, обозначенное в в элементах <abbr>: class="latitude" и title="55.7582", class="longitude" и title="37.6786"
• При помощи несложного JavaScript-кода и Google Maps API мы извлекаем информацию о координатах и рисуем в элементе с id="map" карту, спозиционированную точно в нужном месте
• Пара нажатий — и «Яндекс» добавлен в мою адресную книгу

Соответственно, вся информация из приведённых примеров становится доступна поисковым машинам и плагинам ваших браузеров, поскольку её разметка формализована в спецификации микроформата hCard. Попробуйте сами:

• Плагины для Firefox — Operator и Tails Export
• Плагин для Safari — Safari Microformats

Семантика! Почему это важно

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

Повышение доступности сайта для альтернативных устройств просмотра

Речь идёт о всех устройствах, альтернативных привычному десктопному браузеру: мобильные и голосовые браузеры, принтеры, поисковые роботы. Для всех из них очень полезен первый уровень семантики в документе — т.е. логичная разметка информации:

• Мобильный браузер легко обработает валидный код, не переполненный презентационной разметкой, который, в большинстве случаев, окажется ещё и компактнее. В случае с предварительной обработкой страницы, как происходит при работе с Opera Mini, мы получаем, по меньшей мере, два преимущества: отсутствие потенциально опасной необходимости выпрямлять табличный макет для умещения его в небольшой экран устройства и такую специфическую особенность, как сворачивание меню в один блок, с возможностью его развернуть. За счёт этого экономится место на экране, а работает это всё на основе обычных списков. Также, подобная практика разметки страниц, позволяет легко писать специальные файлы стилей для мобильных устройств, на основе единого макета.
• Голосовой браузер правильно акцентирует каждый уровень заголовков, последовательно перечислит общие элементы списка, без необходимости продираться через каждую табличную строчку и ячейку макета, мешая и так непростому использованию сайтов людьми с ограниченными возможностями.
• Создание версии для печати превращается либо в простое отключение стилей, либо в минимальное оформление документа, который уже и так готов для удобного чтения.
• Поисковые машины оценят вашу работу. И речь идёт не только о весе ключевых слов в заголовке <h1>, вместо несуразности <td class="title"> и общем уменьшении мусорного кода на странице, но ещё и о всё более широко внедряемой поддержке микроформатов для более точного и подробного анализа ваших документов.

Использование языка в соответствии с его предназначением

Упомянутая выше концепция POSH (Plain Old Semantic HTML) основывается, прежде всего, на использовании встроенных возможностей языка. Прежде чем работать с HTML, неплохо было бы изучить его. К примеру, по этой статье: «Встроенная семантика в HTML» (Built in Semantics in HTML). Вполне вероятно, что после изучения всех возможностей HTML, вам больше не захочется называть вёрстку «дивной». Иначе говоря, использование вещей по их прямому назначению — это всегда наиболее оптимально.

Самодокументируемый код

При использовании второго уровня семантики в документе, а именно — именования элементов в соответствии с их содержимым или назначением, ваш код начинает звучать. Теперь это не просто набор бессмысленных классов вроде border4px или no-margin-right, а полноценный скелет вашего документа, который можно легко читать по внятно именованным ключевым элементам. Это не только упрощает разработку и поддержку сайтов, но ещё и является отличной основой для единого стиля вёрстки для целой команды, чтобы работа с кодом не превращалась в борьбу с кодом.

Новые смысловые уровни документа, удобная работа с ними

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

О «шмемантике»

Небольшая ремарка о понятии «семантика» относительно вёрстки. Это не попытка подвести серьёзную научную базу под саму вёрстку и технологии с ней связанные, и не игры во что-то высокое, светлое и элитарное. Семантическая вёрстка — это всего лишь набор идеологических установок и приёмов, которые помогут вам работать более уверенно и последовательно, создавая действительно качественную разметку. Если ваша задача просто «фигачить», вам сложно будет понять, о чём я, собственно, здесь рассказываю. По этой причине публикация «Семантика-шмемантика» не может вызвать какой-либо дискуссии — мы говорим о разных вещах, хоть и используем одинаковую терминологию.

Напоследок — серия публикаций по теме, обязательных для ознакомления:

• Джон Оллсоп (John Allsopp) — «Semantics in HTML», «Built in Semantics in HTML»
• Тантек Челик (Tantek Çelik) — «A Touch of Class», «The Importance of Being POSH»
• Джесс Скиннер (Jesse Skinner) — «Who will read your Semantic HTML?»

Для лучшего понимания некоторых моментов, не попавших в кадр, доступна сама презентация: CSS-фреймворки (PDF, 237 КБ), а также версия видео для iPod/iPhone: CSS-фреймворки (H.264, 66 МБ)