Стильные стили и немного о хлопке

pic

Часть первая, теоретическая

Исхитрись-ка мне добыть
То-Чаво-Не-Может-Быть!
Запиши себе названье,
Чтобы в спешке не забыть!
Леонид Филатов.
Про Федота-стрельца, удалого молодца

После выхода 9 ноября финального релиза браузера Mozilla Firefox 1.0 (http://www.mozilla.org/products/firefox/) вновь разгорелись давно тлеющие во многих форумах и дискуссионных листах дебаты о принципах веб-строительства. Точнее, те дебаты, которые проходят по линии размежевания по отношению к принципам разметки страниц с помощью традиционных таблиц или с помощью рекомендуемых каскадных стилей.

Отвлечемся на минутку, чтобы вернуться к «паленой лисице», как любовно называют новичка от создателей Мозиллы браузер Firefox. За первую неделю после выхода новый браузер скачали и установили 3 миллиона пользователей. Его с восторгом обсуждают во всех форумах, где я участвую, все надеются, что появилась реальная возможность «подвинуть» Internet Explorer, чего пока не удавалось предыдущим Мозиллам и Опере. Вот что пишет Артемий Ломов в своей воскресной колонке на «Информационном буме»: «Этот продукт безупречного воплощения идей open source продвигается набирающим силу сообществом веб-разработчиков, ратующих за соблюдение рекомендаций W3C, примерно под таким лозунгом: «Пожалуйста, сделайте дизайнеров, работающих с веб-стандартами, счастливыми. Установите себе нормальный бесплатный браузер. Отдайте нам Web».

Open sourse — открытый код — международное движение разработчиков за раскрытие кодов программ, что позволяет всем желающим подключиться к доработке исходных текстов, исправлению ошибок и внесению дополнений. Таким образом аккумулируются энергия и знания тысяч участников, что несомненно отражается на качестве продукта, естественно, бесплатного. Противостоят им «закрытые» разработки программных корпораций, утверждающих, что качественный продукт не создается «толпой» и что труд разработчиков непременно должен быть оплачен. Как-нибудь позже рассмотрим подробнее интересные аспекты противостояния двух подходов к программированию.

pic

Сейчас же прошу обратить внимание на слова Ломова «ратующих за соблюдение рекомендаций W3C» — именно в них и заключается призыв вернуться из того «разнузданного беспорядка», в котором пребывает в настоящее время искусство создания веб-сайтов, и следовать рекомендациям Консорциума по развитию технологии www W3C (http://www.w3.org/).

Самое странное, по мнению Артемия Ломова, так это то, что многие кодеры признают основной своей работой доводку сайтов до такого состояния, чтобы они выглядели одинаково во всех браузерах. Кто делал сайты, прекрасно знает, какой это адский и бестолковый труд, подбирать отступы, бордюры, поля и другие элементы, чтобы сайт одинаково смотрелся хотя бы в трех самых популярных браузерах. Этот труд также сродни и сизифову, ибо новая версия любого браузера запросто могла перечеркнуть все усилия.

Самое интересное, что страницы и не должны выглядеть одинаково. Вспомним историю. Язык разметки HTML, по замыслу своих создателей, изначально позиционировался как язык логической разметки документов, включая в себя лишь такие элементы, как гиперссылки, заголовки, абзацы, списки и их пункты, а чуть позже — теги для вставки графических изображений и описания HTML-форм. Предполагалось, что внешний вид всех подобных элементов будет определять браузер на свое усмотрение. Чем они, браузеры, и занялись. Тем более что в Сеть пошла коммерция с рекламой и своими требованиями к подаче материала. Первым, Нетскейп Навигатор ввел всякие красивости, плагины и скрипты. «Побивший» его четвертый IE вынужден был не только повторить все нетскейповские заморочки для совместимости, но и добавить свои собственные, чтобы совсем «оторваться» от других браузеров, перевести их в разряд догоняющих. В борьбе браузеров было не до принципов, а ведь самый главный из них, за который ратуют отцы-основатели и лидеры-законодатели — это отделение логической разметки от конкретного представления информации. Например, желая выделить часть текста, разработчики должны поставить теги логического выделения, а реализация его будет зависеть от устройства воспроизведения. В «настоящих» браузерах своим способом, например, курсивом, в наладонниках или мобильных телефонах — своими способами (возможно, подчеркиванием или шрифтом), при чтении голосом — громкостью или интонацией.
Так вот, разработан механизм отделения стилей подачи документа от его логической структуры и от содержания, и называется он Каскадные таблицы стилей CSS («Cascading Style Sheets»). Суть его в том, что заранее описываются стили представления разных элементов, а в самом документе дается (при необходимости) лишь имя стиля. Чаще всего описания стилей выносятся в отдельный файл, к которому обращаются все страницы сайта. Это, во-первых, позволяет получить унифицированный, единообразный вид всех страниц сайта, и, во-вторых, для изменения оформления не надо переделывать все страницы, достаточно изменить файл стилей.

pic

Напомню, что при «традиционной» верстке разметка страницы производится с помощью таблиц. Это гибкий и удобный механизм позиционирования элементов на странице, причем можно указать границы, отступы (внутрь и снаружи), фон, ширину и высоту как для отдельной ячейки, так и для группы строк и ячеек. Причем таблицы бывают «резиновые» и «жесткие». Резиновые имеют ширину не постоянную, в процентах от ширины экрана, это значит, что при любом разрешении экрана и при свертывании окна таблица будет сохранять свой заданный процент от ширины окна. Например, регистрационная страница сайта ООО Tomas помещена в ячейку таблицы шириной 100% и всегда, независимо от размера шрифта и разрешения экрана, заполняет весь экран по ширине.

А «Арбуз», наоборот, размещен в таблице с жестко указанной шириной 683 пикселя, в ней он и остается при увеличении разрешения экрана, увеличивая лишь «пустоту» вокруг таблицы. Вопрос о том, какие таблицы, резиновые или жесткие, лучше или правильнее, конечно же, не стоит, у каждого способа свои области применения, свои способы увязки с общим дизайном сайта.

Так в чем же причина раздора? — возникает законный вопрос. Дело в том, что таблицы не вписываются в концепцию логической разметки и их использование противоречит рекомендациям Консорциума W3C. Стандарт CSS2 http://www.w3.org/TR/REC-CSS2/, утвержденный в качестве официальной рекомендации в 1998 году (а еще точнее, 12 мая 1998 года), обладает всеми возможностями для разметки. В частности, в нем появилась так называемая модель визуального форматирования (блочная модель), позволяющая, по идее, избавиться от излюбленной и отточенной до мелочей, но не вяжущейся с какой бы то ни было логикой построения документов привычки веб-мастеров верстать сайты таблицами.
Но модель визуального форматирования поддерживается корректно и в полноте пока только самыми свежими браузерами — такими, как IE6, Firefox или Opera 7.x. Сбрасывать со счетов пользователей предыдущих версий этих продуктов, не понимающих CSS2, пока еще рановато. Хотя известно, что доля «старых непонятливых браузеров» действительно с каждым днем неумолимо уменьшается.
— Главное, на мой взгляд, — пишет Артемий Ломов в обсуждении на дискуссионном листе рассылки, — препятствие для веб-разработчиков, искренне желающих покончить с табличной версткой, — это IE5, доля которого в Рунете составляет порядка 20% (по данным http://gs.spylog.ru/) Основным источником головной боли является тот факт, что Internet Explorer 5.x (за исключением версии 5.5 для Macintosh) неверно интерпретирует значения свойств width и height CSS-кода. Согласно официальной рекомендации CSS2, свойства width и height определяют соответственно ширину и высоту содержимого блочного элемента, тогда как величины полей вокруг содержимого (padding) и толщина рамки (border-width) дополнительно прибавляются к значениям width и height. IE5 же в пику стандарту трактует значения свойств width и height как ширину и высоту блочного элемента с учетом полей и рамки. Эта несовместимость, конечно же, порождает определенную головную боль, но справедливости ради нужно заметить, что означенный баг можно обойти множеством различных способов.

А поэтому, как мне кажется, причина пренебрежения веб-стандартами заключается не столько в технологических ограничениях, сколько в «человеческом факторе», выражающемся пассивностью и консерватизмом большей части веб-разработчиков. Судя по опыту общения с практикующими веб-разработчиками (начиная любителями-одиночками и заканчивая признанными мастерами студии Лебедева), консерватизм этот бывает замешан на многих оправданиях, среди коих можно отметить как банальные леность, боязнь перемен и нежелание переучиваться («нас и так неплохо кормят»), так и недопонимание или недооценку тех преимуществ, которые несут в себе веб-стандарты.

Поэтому на данном этапе я вижу острую необходимость в популяризации концепций W3C среди отечественных разработчиков, чем и пытаюсь в меру сил заниматься посредством собственных колонок. К сожалению, в отличие от Запада, в Рунете пока исчезающе мало ресурсов, доходчиво и ясно рассказывающих о новых веяниях в веб-технологиях — в основном речь идет о CSS-блогах энтузиастов-одиночек, вроде http://live.julik.nl/, http://umade.ru/, http://ru.id-as.com/, http://cssing.iatp.org.ua/.. Более-менее масштабные концептуальные материалы носят преимущественно переводной характер (см., например, http://webmascon.com/)
Не исключено, что на фоне всего этого значительный пласт российских веб-разработчиков вообще не подозревает о каких бы то ни было альтернативах табличной верстки, с использованием прозрачных GIF’ов-распорок и визуальных средств, встроенных в HTML. Или, во всяком случае, не придает осторожным поползновениям отдельных первопроходцев большого значения.
А посему нашему «прогрессивному крылу» может помочь только объединение. Лично я возлагаю большие надежды на то, что со временем проект webstandard.ru, который сейчас находится в разработке, станет влиятельным «партийным органом». ;-) Заинтересованных милости просим присоединяться! Конец цитаты. Все сказанное о российских веб-разработчиках полностью относится и к Узнету, ведь технологии не знают границ. Среди наших разработчиков колонка Артемия Ломова также популярна, на нее ссылаются в обсуждениях на форумах.

pic
pic

Большинство веб-разработчиков не спешит сразу бросить таблицы и перейти на верстку блоками, здесь много причин. Кроме перечисленных в «монологе» Ломова, можно также привести пример явной бессмыслицы такого «перехода ради перехода». Например, при выкладывании прайс-листа, конечно же, его стоит делать только таблицей. Вообще преобладает в большинстве случаев комплексный подход — позиционирование элементов на странице выполнять пока с помощью таблиц, а подачу внутренней отделки осуществлять с помощью каскадных стилей. В качестве примера приведу «Арбуз» (конечно, не образец идеального кода, но для иллюстрации подойдет, тем более ничего нагляднее под рукой нет). С помощью таблиц размещены все элементы заголовка, меню и статей, это хорошо видно, если сделать границу таблиц видимой, задав ее толщину в один пиксель — сразу все ломается и рассыпается. А уж внутреннее убранство — каскадными стилями. Это в первую очередь шрифт ячейки и абзаца, семейство (конечно же, такая элегантная Verdana), размер и цвет. Для абзацев — поля слева, справа, отступы первой (красной) строки, красивый большой первый символ абзаца (буквица). И, конечно же, ссылки — их шрифт и его цвет для разных событий — активной, посещенной и ссылкой под наведенным курсором (a:hover). Ссылки на «Арбузе» зеленого цвета, при наведении курсора мыши становятся красными, такое на первый взгляд несопоставимое сочетание оправданно, ибо вписывается в общую концепцию оформления. А ее разработал, похвастаюсь, один из лучших местных авторитетов Евгений Белов, известный так же, как MYKC. Осталось добавить только, что еще заданы параметры заголовков (шрифт, размер, цвет), и подарочек всем от IE — цвет скроллбара и полосы прокрутки. Другие браузеры не поддерживают «эту глупость», как выразился тот же Ломов, ну и напрасно — посмотрите, как кстати приходится к общему арбузному оформлению зеленая полоса прокрутки.

Часть вторая, практическая

Нешто я да не пойму
При моем-то при уму?..
Чай, не лаптем щи хлебаю,
Сображаю, что к чему.
Леонид Филатов.
Про Федота-стрельца, удалого молодца

Итак, начитавшись «передовых» статей с «новыми веяниями» (само это сочетание звучит издевательски, если вспомнить о дате выхода рекомендаций W3C) и пообщавшись с Артемием Ломовым, я решил создать сайт совершенно без таблиц, только на каскадных стилях. С Артемием заочно был знаком, читая еще в 1999 году его статьи в журнале Hard’n’Soft. Сейчас мы часто переписываемся. Дело в том, что Артемий проверяет на «правильность» все колонки Информационного Бума. То есть (раскрываю страшный секрет), когда я «заливаю» заранее текст своего «арбузного ломтика по средам», Артемий вычитывает его и присылает мне свои трехцветные замечания. Красным он отмечает грубые орфографические и стилистические ошибки, зеленым — типографические (кавычки, скобки, тире, дефисы, неразрывные пробелы), и синим — не обязательные пожелания для улучшения читаемости, красоты слога и так далее. Поэтому благодаря самоотверженному труду Артемия тексты выходят идеальными, отлаженными, ухоженными и легко читаемыми.

Итак, все подбираемся к главному, я давно хотел восполнить пробел — в Узнете нет ни одного сайта, посвященного хлопчатнику, а у меня имелся некоторый материал. Решил сделать сайт и попробовать некоторые советы сайтостроителей в деле. Привожу код с комментариями. Сразу оговорюсь, что это не шедевр и не образец, специалисты наверняка найдут много плюх, но как объект разбора использовать, наверное, можно. Не принимается также критика оформления, ибо никаких претензий на качественный дизайн, естественно, нет. Адрес сайта http://cotton.fan.uz — спасибо руководству и администраторам научно-образовательной сети UzSci.net за размещение и техническую поддержку.

Примечание: сайт в доработке, поэтому не все еще сделано, нет, например, ключевых слов для поисковиков и прочих мелочей. Обращаюсь ко всем, кто прочтет, наверняка у вас возникли вопросы, замечания, пожелания, предлагаю конструктивно обсудить все затронутые в статье вопросы в Неформальном Форуме Узнета.

Orphus system