Дзэн-сад для CSS - это интересная инициатива, запущенная в 2003 году. Ее цель - продемонстрировать преимущества использования каскадных таблиц стилей (Cascading Style Sheets) или CSS.

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

Дзэн-сад для CSS - это вебсайт, созданный в 2003 году Дэйвом Шеа.

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

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

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

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

Организация веб-дизайнеров под названием Проект веб-стандартов (The Web Standards Project) начала работать с производителями браузеров в направлении "выравнивания" этих программ (которые могли отображать обну и ту же веб-страницу очень по-разному) согласно рекомендациям Консорциума Всемирной Паутины (World Wide Web Consortium) или W3C.

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

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

Например, в следующем отрывке кода HTML:

<p><em><strong><blockquote>Это цитата</blockquote></strong></em></p>

"blockquote" относится к текстовому блоку, соответствующему цитате из другого текстового блока.

Другими словами, это способ структурирования предложения в документе, и он не указывает, например, шрифт, размер или цвет его букв.

Как это ни странно, этот код регулярно использовался для поизведения визуального эффекта отступа вместо своего исходного предназначения, поскольку много браузеров подразумевали такой тип абзаца:

Абзац

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

Более того, это сильно ограничивает гибкость нашего дизайна.

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

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

<p><em><strong><blockquote class="literature">В одном месте в Ла Манче...</blockquote></strong></em></p>

означает, со структурной точки зрения, что то, что лежит между тегами "blockquotes" - это литературная цитата.

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

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

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

А у Дэйва Шеа начала складываться такая идея: если в сети существует резервуар отличных графических работ, основанных на CSS, дизайнеры смогут осознать потенциал этой технологии, если им предоставить соответствующие примеры.

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

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

Существует более 700 вкладов, то есть таблиц стилей.

Каждый из них генерирует абсолютно отличную от других веб-страницу, и можно не заметить, что все они содержат тот же самый HTML-материал.

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

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

*****************
Исходная статья:
"Дзэн-сад для каскадных таблиц стилей (Cascading Style Sheets Zen Garden)"
опубликована Жуаном К. Дюрштелером
© Ж. К. Дюрштелер 2000 - 2005 Барселона, Испания

Перепечатана с разрешения автора.

http://www.infovis.net

Подпишитесь на бесплатную рассылку новостей от InfoVis здесь.