Верстка страниц - современные технологии, часть 2: CSS
Немного истории
Язык HTML создавался для логической разметки документов - то есть, текст с указанием заголовков, ссылок, списков, таблиц и других элементов. Подразумевалось, что броузер сам знает, как все элементы должны выглядеть на экране или при печати; а то, что все документы будут выглядеть примерно одинаково, ученые из CERN наверняка считали дополнительным преимуществом этого языка.
Ранние
стандарты HTML (1992) вообще не содержали тегов, влияющих
только на внешний вид документа. Но, как только Интернет стал
массовым явлением, одинаково выглядящие сайты стали недостатком,
который нужно было немедленно исправить: уже HTML
3.2 (1996) отступил от логической разметки, добавляя тег <FONT>
для задания шрифта и атрибуты для цвета. Это небольшое отступление
и стало "трещиной в плотине" логической разметки.
Netscape Navigator и Internet Explorer, которые в то время уже
схватились друг с другом, один за другим объявляли о новых и новых
возможностях украсить документ: Netscape добавил <BLINK>
- Explorer ответил <MARQUEE>, фреймы и объекты,
фильтры и переходы Explorer 5 и 6 с одной стороны и Mozilla c
другой - и стройное логическое форматирование быстро превратилось
в суп из указаний шрифтов, цветов, подергиваний, бегущих строк
и полупрозрачных картинок, который работал полностью только на
одном броузере в конкретной его версии.
CSS
Уже в 1996 консорциуму W3C стало ясно, что HTML не сможет удовлетворить нарастающую лавину требований к изменению внешнего вида документа. Технология CSS, официально рекомендованная W3C в декабре 1996, предложила простое решение: разделить логическую разметку и оформление. Пусть HTML размечает структуру документа, а приложенные к нему таблицы стилей описывают его внешний вид.
Потребовалось восемь лет, чтобы CSS стал действительно широко используемой технологией. Недостаток внимания со стороны производителей броузеров, разные и несовместимые реализации, и не желающие изучать новые языки дизайнеры долго держали CSS в состоянии средства для дополнительного оформления сайтов, сверстанных табличным способом. Но последние два года (2002-03) стали временем бурного развития CSS: накопленный опыт дизайнеров, вместе с появлением нового поколения броузеров, сделал возможным качественный скачок в роли CSS из "дополнительной технологии" в самостоятельный способ верстки сайтов.
Один за другим, популярные сайты с миллионами посетителей в день перестраиваются с табличного дизайна с вкраплениями CSS к использованию CSS в качестве основного средства форматирования. А когда такие гиганты, как ESPN и Wired News, переходят на CSS - то и не относившиеся слишком серьезно к возможностям этой технологии веб-дизайнеры обращают на неё своё внимание.
ESPN : таблицы? Посмотрите ещё раз...
Wired News тоже перешел к CSS
Почему CSS?
Основное преимущество CSS - это разделение между содержанием и оформлением. Один и тот же документ HTML с разными таблицами стилей может быть "непохож сам на себя"; замечательный пример этому - CSS Zen Garden. Стоит посмотреть на несколько стилей оформления этого сайта, чтобы оценить весь потенциал этой технологии.
CSS Zen Garden: меняются только таблицы стилей
Но кроме художественного разнообразия, разные таблицы могут использоваться и для разных устройств: например, таблицы стилей для печати, которые умеют печатать все встреченные ссылки (а не просто отмечать их в тексте синим цветом), или таблицы для портативных устройств, которые превращают трёхколоночную страницу в одноколоночную шириной всего 160 пикселей.
А ещё, большинство возможностей CSS просто не существуют в HTML; так что избежать применения этой технологии в том или ином виде просто невозможно. Но если это действительно так, то почему все сайты ещё не перешли на полностью-CSS дизайн?
Проблемы CSS
Первая и главная проблема CSS - ошибки и неточности броузеров в реализации этой технологии. Ни один броузер не реализует CSS полностью, и целые сайты посвящены выявлению этих проблем и способов их обхода. Хуже всего, работники Microsoft заявляли, что новая версия IE появится только в составе новой операционной системы - то есть, все пользователи существующих ОС ограничены MSIE 6.0 SP1; вcпомните, что IE используется 80-95% посетителей, в зависимости от сайта, и его список ошибок CSS больше, чем любого другого широко используемого броузера.
Из этого следует вторая проблема - трудоёмкость. В отличие от таблиц, которые работают почти одинаково в любом броузере, дизайн CSS необходимо тестировать в каждой комбинации OS/броузер, которая имеет значение для заказчика сайта. Три версии IE для Windows, две - IE для Mac, Mozilla, несколько версий Opera, Safari, Konqueror... Этот список может быть очень длинным, и разбираться с вывертами каждого броузера - далеко не увлекательное занятие.
И ещё одна деталь, которая приводит некоторых дизайнеров в бешенство: невозможность контроля над видом страницы и положением элементов с точностью до пиксела. Разница между броузерами, ошибки округления и другие факторы приводят к тому, что элементы страницы "плавают" друг относительно друга в разных броузерах; любой дизайн CSS должен это учитывать - оставлять поля, не сводить друг с другом тонкие линии и т.д. Если абсолютный контроль обязателен, то приходится возвращаться к таблицам.
В заключительной части: а надо ли вообще использовать HTML?
