Автор: Молли Э. Хольцшлаг.Соблюдаем web-стандарты
XHTML+CSS. Преимущества очевидны
В октябре 2006 г. была опубликована статья Павла Ловцевича «XHTML+CSS. Преимущества очевидны», которая спустя полгода вызвала дискуссию в Хабрацентре им. Novikov. На этой странице приводится статья с аргументами Ловцевича (выделены красным шрифтом) и контраргументами (оформлены пиктограммой). Так же даны те пояснения к статье, которые пришлось дать его автору, уж коли затеялся такой диспут.
В последнее время на всех форумах только и слышно: стандарты, «валидность», CSS-верстка, XHTML. Более того, не затихают непрекращающиеся споры сторонников двух школ веб-дизайна: классической табличной и новой CSS-верстки о том, что есть верстка и что кому кажется более логичным и удобным. Этой статьей я не хотел бы начать новый виток этой «священной войны», более того ее целью даже не является переубеждение «табличников» к переходу на стандарты. Я хочу лишь ознакомить читателя с теми неоспоримыми преимуществами, которыми обладает CSS-верстка. А уж выводы каждый должен сделать для себя сам.
Так же хочу дать предварительный комментарий приводимым ниже доводам в пользу XHTML+CSS. В моем понимании CSS-верстка и XHTML — неразделимые понятия, некоторые читатели могут мне сразу же возразить, мол, верстать «валидно» и семантически верно можно и в HTML. Но позвольте, работать можно и под MS-DOS, ведь так? И кто только придумал этот непонятный GUI? Еще отмечу, что некоторые доводы в пользу css-верстки могут показаться вам знакомыми по книгам Дж. Зельдмана, Д. Ши и прочих авторитетных мастеров веб-дизайна и вы будете совершенно правы.
Эта статья является результатом накопленного практического и теоретического опыта автора. Итак, 15 доводов в пользу перехода на XHTML + CSS.
1. XHTML является текущим опубликованным стандартом разметки гипертекста, заменившим HTML.
И что? Это преимущество? Это просто факт. В чем преимущество для компании-владельца сайта, скажем, в ближайший год после запуска?
Преимущество состоит в том, что разработка и развитие HTML фактически прекратилось, даже несмотря на то, что в недрах W3C не дремлет Тим Бернерс Ли с идеей HTML5. На ваш взгляд, что все таки сейчас выглядит более законченным и будет принято раньше — XHTML2 или HTML5? На мой взгляд, XHTML2.
2. XHTML является более последовательным, чем HTML, что снижает вероятность возникновения ошибок.
Что значит «более последовательным»? Вероятность возникновения ошибок зависит не от языка, а от человека.
XHTML приучает к порядку в коде, посмотрите, как зачастую новички пишут HTML-разметку: атрибуты то берут, то не берут в кавычки, то в верхнем регистре пишут теги, то в нижнем, кроме того, валидатор явно укажет новичку на то, что вот сие есть архаизм и это правильно задавать через CSS (я имею в виду устаревшие стилистические теги и атрибуты HTML, которые просто убраны из XHTML), новичок запомнит раз и навсегда про вложенность тегов и т.д. и т.п.
3. Новые браузеры «любят» XHTML (в частности XHTML 1.0). Т.к. он предоставляет дополнительные функции, недоступные в HTML и имеет четкий синтаксис.
Это преимущество? Что значит «любят»? В какой форме это выражается? Какие преимущества и каким образом дает эта «любовь»? В чем именно HTML имеет «нечеткий» синтаксис?
Вы представляете каким образом происходит разбор HTML-кода, когда браузеру приходится пыхтеть, проверяя различные ошибки разработчика, как незакрытые теги, разного рода ошибки кода. Сейчас они просто по старинке закрывают глаза на все эти вещи. Кроме того, разработчикам браузеров приходится все это реализовывать в программном коде браузера, что повышает вероятность ошибок и уязвимостей уже в самом браузере. Про нечеткость таже беда, то разность регистра написания, то взятие, то невзятие в кавычки атрибутов и т.д.
4. XHTML является подмножеством языка XML, который позволяет уже сейчас значительно расширить возможности форматирования документов, а в будущем позволит полноценно использовать все новые возможности, пока еще неизобретенные или неутвержденные технологии.
О’кей, он является подмножеством. Наверное, это круто. В чем конкретно преимущество?
Я имел в виду такие вещи, как MathML, SVG, экспорт в RSS (HTML, к слову имеет такую возможность, но все это усложняется в случае нарушения стандарта XHTML) и т.п. И если вы следите за технологиями, то нетрудно заметить, что XML уже повсюду. Он вышел далеко за рамки веб, став межплатформенной средой что ли, и применение ему продолжает находится непрерывно. Т.о. мы в каком-то смысле подходим к унификации обмена и хранению данных.
5. XHTML является частью семейства Web-стандартов (также включающего в себя CSS и W3C DOM), что позволяет контролировать внешний вид и поведение страницы на разных платформах, браузерах и устройствах.
Классно, что он является частью семейства. Про стандарты было в пункте 1, так что это уже ради красивой цифры притянуто. Интересно, до XHTML не могли контролировать? Как же тогда сайты делали? Или сейчас могут? Тогда почему столько мучений, чтобы оно выглядело одинаково в разных браузерах при более-менее сложном дизайне?
Про XSLT слыхали? Так вот эта вещь недоступна для HTML. Мучения в данный момент в 99% случаев только с IE. Все остальные браузеры достаточно полно и адекватно поддерживают CSS 2 и XHTML 1-1.1. Верстая сейчас правильно, вы обеспечиваете долгую жизнь своему документу.
6. XHTML открывают путь в мир метаданных, что, можно утверждать с большой долей вероятности, позволит в будущем поисковым машинам более корректно и точно обрабатывать данные в XHTML документах (читай страницах сайта).
Как поэтично! Путь они открывают. А что это дает владельцам сайтов здесь и сейчас? А в HTML я метатеги не мог использовать? Мог. На них поисковики дружно забили.
Возможно, я сделаю для вас открытие, но META-тегами не ограничивается понятие метаданных. Есть такая штука, как микроформаты еще, об этом вам лучше и популярнее сможет поведать Макс Россомахин. А в будущем именно через XML мы сможем описывать контент.
7. XHTML позволяет изменять порядок контента в документе, что также дает свои преимущества при поисковой оптимизации сайта.
Ну еще куда ни шло.
А вот здесь вы сами себе противоречите! HTML при блочной верстке тоже самое позволяет, но, как я указал в начале статьи, стоило статью несколько иначе позиционировать (этот пункт является больше преимуществом CSS и блочной верстки).
8. XHTML повышает доступность сайта для большего круга читателей, таких как люди с дефектами зрения или координации. Это означает, что на практике устройства чтения с экрана не будут сбиты с толку, увидев в теле документа тег <table> и попытавшись выдать его содержимое, как какую-то табличную информацию. Также будет возможность полноценно и комфортно пользоваться сайтом даже при отсутствии мышки.
Приму только из гуманистических соображений. В России, здесь и сейчас для большинства сайтов это значения не имеет. Аудитория не та. Тем, кто продает машины или компьютерные игры нет разницы, прочитает ли вдобавок к 500000 посетителей еще пара с брайлевского терминала.
А кто говорит, что разработчик должен ограничиваться только постсовковой клиентурой? Вы в курсе того, что в США, например, существует такой нормативный акт, как Section508, согласно которому авторы веб-сайтов несут юридическую ответственность за недоступность контента сайта для людей с ограниченными физическими возможностями? И хотя эта статья применяется пока в большинстве случаев только к государственным сайтам, но она есть и, дабы избежать возможного судебного разбирательства, лучше сразу его избежать на стадии разработки.
9. XHTML повышает доступность сайта также для большего круга user-agent'ов: КПК, мобильные телефоны, цифровые проекторы и прочие устройства с выходом в веб. Это означает, что больше нет необходимости в создании нескольких версий сайта, т.к. берется один XHTML-шаблон, к которому по запросу применяются различные таблицы стилей.
Я не считаю это правильным. Если я выхожу с КПК через GPRS, я не хочу грузить всю страницу, чтобы потом посредством CSS было убрано лишнее из уже загруженного. Я хочу чтобы мне лишнее не грузилось и считаю правильным делать для КПК и мобильных отдельные версии с адаптированным контентом и навигацией, оптимизированные по трафику.
Во-первых, речь идет о том, что многие новые мобильные юзерагенты просто не разбирают html-код, а только xhtml. Поговорим о целесообразности создания отдельных версий сайта. Затраты на разработку возрастают в несколько раз, кроме того, это просто плохой тон — определение агента посетителя. Применение веб-стандартов во всех смыслах уменьшает объем передаваемого кода, так что несколько лишних килобайт кода, который потом будет скрыт, вам не сделают погоды, уж поверьте. А CSS-верстка позволит вам сделать полностью адаптированную версию для конкретного типа агента посетителя.
10. XHTML отменяет необходимость создания отдельной версии страницы для печати, т.к. при выводе документа в печать также есть возможность задать отдельный стиль. Этот преимущество недоступно табличной разметке, т.к. предварительное форматирование создано уже в самом теле документа.
Пардон муа, это как вы разметку сделаете.
Опять же делаю поправку на название статьи, это преимущество правильной верстки и применения стандартов. Здесь соглашусь частично с вами.
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 Гб! Комментарии излишни.
Факт: сайт спортивной сети ESPN перешел на CSS в начале 2003 г. — ежедневная экономия на трафике составила 2 терабайта.
Хо-хо! Видел множество примеров, когда верстка на слоях без таблиц занимала больше места. Хотите примеров? Спросите у Яндекса.
Йо-хо-хо! А вот это уже из области неправильного применения стандартов, уж поверьте на слово, коллеги стандартисты безусловно поддержат.
12. XHTML, за счет выноса элементов и инструкций оформления документа во внешний файл, позволяет загрузить в браузер пользователя контент максимально быстро, а по мере того, как он приступит к его прочтению, продолжит загружаться оформление сайта. Это позволяет, не дожидаясь полной загрузки страницы, решить, существенна ли представленная информация, или стоит покинуть страницу и продолжить поиск информации на других сайтах.
Я и в HTML мог CSS применять. И с таблицами даже. Не засчитан пункт.
Согласен, опять же ссылаюсь на неграмотность названия статьи. С таблицами без особого трюка отображение табличной разметки не начнется, пока браузер не увидит (всю таблицу). Однако это не относится к Gecko-браузерам.
13. XHTML код более логичен и прост, поэтому в нем гораздо легче разобраться HTML-кодеру не писавшему код страницы.
Зависит от того, кто пишет код.
Согласен, но цель статьи — приучить людей к порядку, которые без кнута в виде валидатора невозможен, а валидация HTML неактуальна в контексте разделения контента и оформления.
14. XHTML позволяет, имея один шаблон, подключать к нему бесконечное множество стилей, кардинально меняющих его оформление без единой правки самого шаблона. Это достигается за счет манипулирования свободной блочной разметкой содержимого в противовес жестко заданной табличной.
Есть конкретные примеры когда на реальном коммерческом сайте надо было это делать и не пришлось ни единой правки вносить именно в шаблон?
Ну вы меня просто убили... О csszengarden.com хотя бы слышали?
15. XHTML корректно обрабатывается старыми браузерами, что уменьшает препятствия к его использованию. А в новых, за счет правильной поддержки CSS, можно добиться невероятных результатов.
Да? IE3 NN4? Шучу. Вот насчет результатов. Бизнесу нужны не «невероятные результаты», а ощутимые финансовые.
Простите меня великодушно, но это ирония и ничего больше с вашей стороны. Поддержка браузеров ниже IE 5, NN6, Opera 8 просто неактуальна.
Все эти причины и стали моим личным стимулом к переходу на стандарты W3C и CSS-верстку. Чего и вам, собственно, желаю.
- Стандарт XHTML.
- Филоcофия CSS-дизайна. Об удивительной технологии CSS.
- Web-студии и web-стандарты — две вещи несовместные?
- Как декларация DOCTYPE влияет на отображение браузерами?
- Недостатки меню на javascript. Из опыта создания ниспадающих меню в NavStudio.
- Зачем нужна печатная версия сайта. Как создать печатную CSS-версию?
Автор: Кристофер Шмитт