Читаем Устойчивый веб-дизайн полностью

Устойчивый веб-дизайн

Возможно, лучшей демонстрацией возможностей CSS стал сайт под названием CSS Zen Garden, созданный Дейвом Ши. Это была витрина красивых и разнообразных дизайнов, все они были выполнены с помощью CSS. Важно отметить, что HTML остался прежним.

Выбор из множества дизайнов, созданных для CSS Zen Garden.

Видя, как один и тот же HTML-документ оформляется множеством различных способов, я убедился в одном из полезных эффектов CSS: разделении задач.

Связь

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

В тесно связанной системе каждая часть системы может делать предположения о других частях. Такие системы могут быть спроектированы довольно быстро, но за это приходится платить. Им не хватает устойчивости. Если одна часть выходит из строя, это может привести к отказу всей системы.

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

Хакеры, пионером которых был Дэвид Сигел, жестко связывали структуру и представление в единый монолитный HTML-файл. Принятие CSS ослабило эту зависимость, приблизив веб к модульному подходу философии UNIX. Презентационная информация может быть перенесена в отдельный файл – таблицу стилей. Вот почему к одному HTML-документу в CSS Zen Garden может быть применено так много различных дизайнов.

Таблица стилей по-прежнему должна обладать некоторыми знаниями о структуре HTML-документа. Довольно часто в разметку добавляются "крючки", облегчающие стилизацию: например, определенные значения атрибутов CLASS или ID. Таким образом, HTML и CSS не полностью разделены. Они образуют партнерство, но у них есть и договоренность. Документ разметки может решить, что иногда он хочет попробовать увидеть другие таблицы стилей. Между тем, таблица стилей потенциально может быть применена к другим документам. Они слабо связаны друг с другом.

Танцы, посвященные архитектуре

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

Мир архитектуры за многие годы накопил свой собственный набор ценностей дизайна. Одна из них – принцип честности материалов. Один материал не должен использоваться в качестве заменителя другого. Иначе конечный результат будет обманчивым.

Использование таблиц TABLE для верстки – это материальная нечестность. Элемент TABLE предназначен для разметки структуры табличных данных. Конечный результат использования ТАБЛИЦ, элементов FONT и проставочных GIF – это фасад. На первый взгляд все выглядит хорошо, но при проверке это не выдерживает критики. Как только такой сайт подвергается стресс-тестированию при реальном использовании в различных браузерах, фасад рушится.

Использование CSS для представления материала является честным – это целевое использование CSS. Он также позволяет HTML быть честным в материальном плане. Вместо того чтобы пытаться выполнять две роли – структуры и представления – HTML может вернуться к выполнению своей истинной цели – разметке смысла содержимого.

По-прежнему можно использовать (или злоупотреблять) CSS, чтобы быть материально нечестным. Долгое время не существовало простого способа добавить закругленные углы к элементу с помощью CSS. Вместо этого веб-дизайнеры находили способы обойти эту проблему, накладывая на элемент фоновые изображения для имитации того же конечного эффекта. Это работало до определенного момента, но, как и в случае с проставкой GIF, это был фасад. Затем появилось свойство border-radius. Теперь дизайнеры могли получить свои закругленные углы честным с материальной точки зрения способом.

Важно отметить, что дизайнеры смогли использовать новые свойства, такие как border-radius, задолго до того, как их стали поддерживать все веб-браузеры. Все это благодаря либеральной модели обработки ошибок CSS. Новые браузеры отображали закругленные углы. Более старые браузеры не выдавали ошибку. Старые браузеры не прекращали разбор CSS и не отказывались разбирать его дальше. Они просто игнорировали бы непонятные инструкции и шли дальше. Ни вреда, ни вреда.

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

И это нормально.