Гибкий веб-дизайн

Глава 2: Материалы

Рискуя объяснять прописные истины, хочу, чтобы вы задумались о том, что происходит, когда браузер считывает HTML-элемент. Возьмем, для примера, элемент «параграф» с каким-либо текстом внутри. У него есть открывающий и закрывающий тег P, а между ними текст.

<p>какой-либо текст</p>

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

<marklar>какой-либо другой текст</marklar>

И снова браузер отображает текст между открывающим и закрывающим тегом. Интересно то, чего браузер не делает. Браузер не выдает ошибку. Он не перестает считывать HTML с этого момента, отказываясь идти дальше. Вместо этого он просто игнорирует незнакомые теги и отображает их содержимое.

Этот либеральный подход к ошибкам позволил словарю HTML со временем вырасти из оригинального набора из 21 элемента до 121 в HTML5. Когда бы новый элемент не был введен в HTML, мы знаем как с ним поведут себя более старые браузеры — они отобразят его содержимое, игнорируя теги.

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

<main>этот текст отобразится в браузере</main>

Если веб-браузер одинаково относится ко всем тегам, отображая их содержимое, тогда в чем смысл существования словаря элементов HTML?

Значение разметки

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

Безусловно существуют особые элементы, такие как элемент А, которые обладают невероятными способностями. Его суперсила заключается в атрибуте HREF, позволяющем дать ссылку на любой другой веб-ресурс. Такие элементы, как INPUT, SELECT, TEXTAREA и BUTTON, имеют собственные суперсилы, позволяя пользователям вводить данные и передавать их на сервер.

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

На первом этапе развития словарь HTML был наполнен новыми элементами, которые давали веб-браузеру команды по оформлению: BIG, SMALL, CENTER, FONT. По сути, эти команды были единственной причиной существования перечисленных элементов — они не давали даже намека на значение своего содержимого. HTML был под угрозой стать языком визуального оформления вместо словаря значений.

Вопрос стиля

Хокон Виум Ли работал в ЦЕРН одновременно с Тимом Бернерсом-Ли. Он сразу ощутил потенциал World Wide Web и его языка, HTML. Он также понимал, что выразительность языка была под угрозой из-за наводнения элементами, отвечающими за стиль. Ли предложил новый формат для описания презентации HTML-документа: Cascading Style Sheets (Каскадные таблицы стилей).

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

селектор {
	свойство: значение;
}

Вот так.

CSS разделяет склонность HTML прощать ошибки. Если веб-браузер наталкивается на непонятный селектор, то просто пропускает его, в независимости от того, что указано в фигурных скобках. Если браузер видит непонятное ему свойство и значение, то игнорирует их в данном объявлении. Он не выдает ошибку. Он не перестает считывать CSS с этого места и не отказывается продолжать работу.

marklar {
	marklar: marklar;
}

Как и в случае с HTML, такой попустительский стиль обработки ошибок позволила CSS со временем вырасти. Новые селекторы, новые свойства и новые значения добавлялись годами. Когда бы новые возможности ни пополнили CSS, дизайнеры и разработчики знают, что могут спокойно использовать их, даже если они поддерживаются не всеми браузерами. Можно быть уверенным, старые браузеры будут к ним максимально индифферентны.

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

На убой

В 1996 году Дэвид Сигел опубликовал книгу «Создавая убийственные сайты». В ней он описал ряд изобретательных приемов для создания привлекательного дизайна посредством HTML.

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

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

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

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

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

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

Одна группа дизайнеров решила положить этому конец. Объединившись под знаменами Web Standards Project, они начали лоббировать отказ Microsoft и Netscape от проприетарных вариантов в пользу единого стандарта, такого как СSS.

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

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

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

A montage of screenshots, all very different in appearance.
Подборка из множества дизайнерских решений для CSS Zen Garden.

Показав один и тот же HTML-документ в множестве разных стилей, представили одно из самых благотворных свойств CSS — разделение ответственности.

Взаимозависимость

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

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

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

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

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

Танцевать об архитектуре

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

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

Использование TABLE для верстки не является соответствием материалов. Этот элемент предназначен для разметки табличных данных. Результат использования TABLE, элементов FONT и SPACER.GIF — всего лишь фасад. На первый взгляд все выглядит отлично, но на деле не выдерживает никакой критики. Как только вебсайт подвергается стресс-тесту настоящими пользователями в различных браузерах, фасад рушится.

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

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

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

Конечно это значит, что в итоге вебсайт будет выглядеть совершенно иначе в разных браузерах. Одни люди увидят закругленные углы, а другие — нет.

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

Ссылки

Глава 3:Видения