Автор: Павел Ловцевич.

В последнее время на всех форумах только и слышно, стандарты, "валидность", CSS-верстка, XHTML. Более того, не затихают непрекращающиеся споры сторонников двух школ вебдизайна: классической табличной и новой CSS-верстки о том, что есть верстка и что кому кажется более логичным и удобным. Этой статьей я не хотел бы начать новый виток этой "священной войны", более того ее целью даже не является переубеждение "табличников" к переходу на стандарты. Я хочу лишь ознакомить читателя с теми неоспоримыми преимуществами, которыми обладает CSS-верстка. А уж выводы каждый должен сделать для себя сам.

Также хочу дать предварительный комментарий приводимым ниже доводам в пользу XHTML+CSS. В моем понимании CSS-верстка и XHTML - неразделимые понятия, некоторые читатели могут мне сразу же возразить, мол, верстать "валидно" и семантически верно можно и в HTML. Но позвольте, работать можно и под MS-DOS, ведь так? И кто только придумал этот непонятный GUI? Еще отмечу, что некоторые доводы в пользу css-верстки могут показаться вам знакомыми по книгам Дж. Зельдмана, Д. Ши и прочих авторитетных мастеров вебдизайна и вы будете совершенно правы. Эта статья является результатом накопленного практического и теоретического опыта автора. Итак 15 доводов в пользу перехода на XHTML+CSS.

1. XHTML является текущим опубликованным стандартом разметки гипертекста, заменившим HTML.

2. XHTML является более последовательным, чем HTML, что снижает вероятность возникновения ошибок.

3. Новые браузеры "любят" XHTML (в частности XHTML 1.0). Т.к. он предоставляет дополнительные функции, недоступные в HTML и имеет четкий синтаксис.

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

5. XHTML является частью семейства Web-стандартов (также включающего в себя CSS и W3C DOM), что позволяет контролировать внешний вид и поведение страницы на разных платформах, браузерах и устройствах.

6. XHTML открывают путь в мир метаданных, что, можно утверждать с большой долей вероятности, позволит в будущем поисковым машинам более корректно и точно обрабатывать данные в XHTML документах (читай страницах сайта).

7. XHTML позволяет изменять порядок контента в документе, что также дает свои преимущества при поисковой оптимизации сайта.

8. XHTML повышает доступность сайта для большего круга читателей, таких как люди с дефектами зрения или координации. Это означает, что на практике устройства чтения с экрана не будут сбиты с толку, увидев в теле документа тэг <table> и попытавшись выдать его содержимое, как какую-то табличную информацию. Также будет возможность полноценно и главное комфортно пользоваться сайтом даже при отсутствии мышки.

9. XHTML повышает доступность сайта также для большего круга user-agent'ов: КПК, мобильные телефоны, цифровые проекторы, и прочие устройства с выходом в веб. Это означает, что больше нет необходимости в создании нескольких версий сайта, т.к. берется один XHTML-шаблон, к которому по запросу применяются различные таблицы стилей.

10. XHTML отменяет необходимость создания отдельной версии страницы для печати, т.к. при выводе документа в печать также есть возможность задать отдельный стиль. Этот преимущество, как и преимущество в пункте 6 недоступной табличной разметке, т.к. предварительное форматирование создано уже в самом теле документа.

11. XHTML+CSS позволяет существенно снизить вес документа. Таким образом, вы существенно снижаете нагрузку на сервера, каналы связи и ускоряете выдачу готового документа пользователю. Это достигается за счет того, что XHTML-шаблон не содержит элементов разметки, т.к. они выносятся CSS-файл. Для более наглядного подтверждения этого довода обратимся к примеру. Обычно разница между XHTML+CSS и HTML+CSS (табличным) шаблонами составляет от 300 до 500 процентов в пользу XHTML+CSS, в некоторых случаях она может быть и больше. Представим воображаемый сайт с суммарной посещаемостью в сутки 10000 уникальных посетителей. Сверстаем его сначала классическим табличным способом. Получим - размер HTML-шаблона 20 Кб с файлом стилей размером 5 Кб. Итак, впервые выданный в браузер пользователя сайт закэширует все изображения, скрипты вынесенные во внешние файлы и файлы стилей, т.е. CSS-файлы. Также в расчетах примем за истину то, что дизайн сайта (CSS-файл) не будет подвергаться изменению в течение года и не потребует повторной загрузки. Скрипты и изображения можно не принимать в расчет, т.к. на конечный результат они не повлияют. (20 Кб * 10000 * 365 + 5*10000) /1024= 71337 Мб или 71,3 Гб трафика в течение календарного года. Сверстаем этот же сайт на XHTML+CSS методом CSS-верстки. На выходе XHTML, равный 5 Кб и CSS - 10 Кб (здесь необходимо отметить, что размер CSS файла обычно возрастает в связи с тем, что все данные о форматировании и визуальном представлении документа выносятся в CSS-файл). Проведем расчет. (5 Кб * 10000 * 365 + 10*10000) /1024= 17919,9 Мб или 18 Гб трафика. В данном примере экономия составляет 71,3 Гб - 18 Гб = 53,3 Гб! Комментарии излишни.

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

13. XHTML код более логичен и прост, поэтому в нем гораздо легче разобраться HTML-кодеру не писавшему код страницы.

14. XHTML позволяет, имея один шаблон, подключать к нему бесконечное множество стилей, кардинально меняющих его оформление без единой правки самого шаблона. Это достигается за счет манипулирования свободной блочной разметкой содержимого в противовес жестко заданной табличной.

15. XHTML корректно обрабатывается старыми браузерами, что уменьшает препятствия к его использованию. А в новых, за счет правильной поддержки CSS, можно добиться невероятных результатов.

Все эти причины и стали моим личным стимулом к переходу на стандарты w3c и CSS-верстку. Чего и вам, собственно, желаю!

Статьи проекта TEMPL.RU:
Как верстать сайт? Шаблонная вёрстка сайта.
Шаблонны- DIV vs. TABLE.
Как сделать дизайн сайта простым и удобным.
Преимущества и недостатки табличной верстки.
XHTML+CSS. Преимущества очевидны.
7 советов начинающему Вэб-Мастеру.
Простые советы вэб-дизайнеру.
Советы начинающим вэб-мастерам.
Создание меню с применением CSS и DHTML
Практика сайтостроения.