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

Одна из техник предполагает использование прозрачного GIF, размером всего один пиксель на один пиксель. Если его вставить на страницу как элемент IMG, но задать точные значения атрибутов WIDTH и HEIGHT, то дизайнеры смогут контролировать количество пробельных элементов в своем дизайне.

Другая техника использует элемент TABLE. Этот элемент, а также его дочерние элементы TR и TD предназначались для описания табличных данных. Но при правильных значениях ширины и высоты ячеек таблицы его можно было использовать для воссоздания практически любого желаемого макета.

Это были хаки; умные решения сложных проблем. Но они имели печальные последствия. Дизайнеры относились к HTML как к инструменту для создания внешнего вида содержимого, а не как к языку для описания смысла содержимого. CSS был решением этой проблемы, если только дизайнеров можно было убедить использовать его.

Браузерные войны

Одной из причин, почему веб-дизайнеры не использовали CSS, было отсутствие поддержки браузера. Тогда были два основных браузера, конкурирующих за душу Интернета: Microsoft Internet Explorer и Netscape Navigator. Они были несовместимы по дизайну. Один браузер изобретал бы новый HTML-элемент или атрибут. Другой браузер изобретает свой собственный отдельный элемент или атрибут, чтобы делать точно то же самое.

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

Группа веб-дизайнеров решила, что хватит. Они собрались под знаменем проекта Web Standards Project и начали лоббировать Microsoft и Netscape, чтобы те отказались от своих проприетарных методов и приняли стандарты, такие как CSS.

Ситуация начала меняться с выходом Internet Explorer 5 для Mac, браузера, который поставлялся с впечатляющей поддержкой CSS. Если это было будущее веб-дизайна, то жизнь должна была стать гораздо более продуктивной и творческой.

Некоторые дальновидные веб-дизайнеры поймали ошибку CSS рано. Они переработали свои веб-сайты, используя CSS для макета, вместо использования TABLEs и spacer GIF. Будучи верными духу Интернета, они делились тем, чему учились, и призывали других перейти на CSS.

Некоторые дальновидные веб-дизайнеры рано поймали "жучка" CSS. Они изменили дизайн своих сайтов, используя CSS для верстки, вместо использования таблиц и распорных GIF. Верные духу основателей Интернета, они делились своими знаниями и призывали других перейти на CSS.

Возможно, лучшей демонстрацией возможностей 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 и не отказывались разбирать его дальше. Они просто игнорировали бы непонятные инструкции и шли дальше. Ни вреда, ни вреда.

Конечно, это