Практические статьи

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

Браузеры отображают открываемые веб-страницы в потоковом режиме. Иными словами, элементы HTML-документа отрисовываются сразу же по мере их создания внутри DOM в процессе загрузки страницы. При этом взаимное расположение, размеры и прочие характеристики элементов могут неоднократно изменяться. Казалось бы, такой сценарий жутко избыточен с точки зрения ресурсозатрат. Неужели не проще применить стилевые правила уже после того, как дерево DOM полностью построено, один раз и навсегда отрисовав все элементы?.. Это ведь получилось бы сделать намного быстрее! Вопрос не столь однозначен…

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

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

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

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

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

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

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