Веб-стандарты. Философия изящества. Часть 3

Артемий Ломов

Все те ключевые концепции философии современных веб-стандартов, которые раскрыты в первых двух частях нашего пространного повествования (смотрите часть 1 и часть 2), разумеется, не являются самоцелью. Они важны, конечно же, отнюдь не сами по себе, а исключительно благодаря тем положительным следствиям, которые порождает уважительное отношение к этим самым концепциям со стороны веб-разработчиков в повседневной практике.

Таких следствий очень много. Попытаемся перечислить и обосновать самые главные из них.

Ускорение загрузки веб-страниц

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

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

Все это очевидным образом уменьшает объем данных, передаваемых от сервера клиенту, что, разумеется, способствует ускорению загрузки страниц.

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

Облегчение машинной обработки

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

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

Бо́льшая гибкость в отношении различных сред и устройств

CSS2 уже давно позволяет прозрачно для пользователя (то есть не требуя от него никаких дополнительных действий) управлять представлением контента с учетом специфики различных сред и устройств, использующихся для вывода данных. В частности, можно создавать индивидуальные аппаратно-зависимые таблицы стилей или правила в общей таблице стилей, которые бы автоматически применялись при распечатке страниц, при просмотре их на маленьких экранах мобильных устройств и так далее. Этим механизмом (при посредстве директивы @media в CSS-коде или атрибута media HTML-элементов <style> и <link>) можно смело пользоваться на практике уже эдак лет семь. Дальнейшее развитие он получил в CSS3 в рамках модуля Media Queries.

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

Лучшая доступность для пользователей с ограниченными возможностями

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

Отказ от таких дремучих технических приемов, как, например, использование предусмотренных в HTML таблиц для нужд позиционирования порций контента на пространстве страницы (а не для структурирования табличных по своей природе данных, что является единственным предназначением элемента <table>) позволяет почти всегда сохранять структуру контента простой, линейной (даже если экранное представление с множеством хитро разбросанных по странице блоков кажется на первый взгляд сложным и замысловатым). Это, в свою очередь, гарантирует, что при просмотре с отключенными стилями или с применением пользовательской таблицы стилей (а слабовидящие люди часто пользуются такой возможностью) все содержимое страницы можно будет вполне комфортно, в адекватной последовательности прочесть.

CSS2.1 предусматривает специальные типы сред (braille и embossed) в отношении механических строк Брайля и брайлевских принтеров. Поддерживается также тип speech в отношении сред речевого вывода — правда, никакие специальные свойства для них не определяются; опыт CSS2 (с определенными в рамках этой спецификации типом среды aural и рядом специальных аудиальных свойств) сочли, по-видимому, преждевременным. Будем надеяться, что поддержку всех нюансов синтеза речи в недалеком будущем обеспечит CSS3 Speech Module.

Доступность контента для пользователей устаревших браузеров

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

Даже если речь идет об HTML5, новые структурные элементы которого неведомы старым браузерам, контент, аккуратно размеченный с использованием известных испокон веков тегов <h1><h6>, <p> и им подобных, прекрасно отобразится со стилем по умолчанию даже в браузере эпохи HTML 2.0. По крайней мере, текст основного содержания страницы всегда можно будет прочесть, причем вполне комфортно.

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

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

Гарантированная совместимость верстки с современными браузерами и последующими их версиями

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

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

Возможно, специфика работы некоторых экспериментальных свойств и значений CSS, используемых ныне с вендорными префиксами, в итоге изменится. Но вендорные префиксы на то и придуманы, чтобы была возможность отточить нюансы реализации перспективной технологии в различных браузерах на раннем этапе ее развития и не допустить противоречий в реализациях «зрелой» спецификации (как взаимных противоречий реализаций между собой, так и противоречий реализаций в браузерах с буквой спецификации как таковой).

Облегчение процесса разработки сайтов

Легкий, логически стройный, прозрачный код намного проще писать и впоследствии сопровождать, чем код, разрабатываемый абы как. Конечно же, разработчикам консервативной школы придется сделать некоторое усилие над собой с тем, чтобы перестроиться на новый лад, но оно сто́ит того. Вообще, конечно, это вполне себе тема для холивора самостоятельной статьи, достойная рассмотрения в деталях…

Заключение

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