Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

Философия CSS - дизайна. Часть 4.

Гибкость дизайна

С самого начала одной из основных целей при составлении разметки было обеспечение гибкости для создания различных вариантов дизайна. Необходимо было вставить в разметку достаточно много адресуемых элементов, чтобы внешний вид каждого можно было при необходимости модифицировать. Без дополнительного кода выбрать отдельный элемент на странице было бы невозможно. Селекторы потомков допускают следующий общий способ адресации элементов:
#quickSummary p {
color: red; }

Но при этом все элементы р внутри раздела #quickSummary становятся красными. А если нужно модифицировать только второй абзац внутри #quickSummary? Если не приписать каждому параграфу уникальный класс, то единственный способ решить эту задачу состоит в применении синтаксиса селекторов, появившегося в CSS2:
#quickSummary р + р {
color: red;
#quickSummary >
color: inherit;
P + P {

Поясним: первое правило содержит комбинацию селекторов дочерних и сестринских элементов и означает: «Применить это правило к любому элементу р, которому непосредственно предшествует другой элемент р и который также является дочерним элементом #quickSummary». Иными словами, это все абзацы внутри #quickSummary, кроме первого. Поэтому второе правило вводит дополнительное условие, отменяя применение первого ко всем абзацам, перед которыми имеется не менее двух предшествующих абзацев, из которых первый должен быть дочерним элементом ttquickSummary; иначе говоря, для всех абзацев, кроме первых двух, восстанавливается унаследованный стиль.
Уф! Пожалуй, слишком много путаницы ради простого выбора элемента. К счастью, в CSS3 это можно сделать гораздо проще:
#quickSurranary p:nth-child(2) {
color: red;

Но ни один из этих способов не работает в Internet Explorer! Так что можете на время забыть о них, если только нет жесткой необходимости использовать стиль, который большая часть аудитории не увидит.
Конечно, в течение следующих нескольких лет предпочтения публики могут измениться, но пока Internet Explorer занимает примерно 90% рынка.
Разговор о сложных селекторах в CSS увел нас довольно далеко от простой задачи. Но теперь должно быть ясно, зачем нужны дополнительные классы: они обеспечивают максимальную гибкость дизайна. Причины для включения в разметку «лишних» элементов span такие же: наличие внутренних элементов в каждом абзаце расширяет возможности применения стилей.

Подстановка изображений
У элементов span есть и еще одно назначение. Когда проектировался сайт Zen Garden, умами дизайнеров во всем мире как раз овладела совершенно новая идея:
если имеется заголовок (скажем, h3) и вы хотите заменить текст в нем изображением, то этот текст необходимо окружить двумя элементами. Один из них h3, а другой - span.
Если скрыть текст внутри span, например, за счет правила d i s p l a y : none, то останется только h3, с которым можно связать фоновое изображение, создав тем самым иллюзию графического заголовка. Поскольку у каждого элемента в Zen Garden имеется внутренний span, то открываются широкие возможности для экспериментов.
А зачем вся эта суета, спросите вы? Разве с помощью элемента img нельзя сделать то же самое? Ответ все тот же: гибкость. Радикально изменить внешний вид страницы за счет подмены таблицы стилей не удалось бы, будь изображения «зашиты» в HTML-код. Впро-
чем, у техники подстановки изображений есть свои проблемы, о которых мы еще поговорим ниже.

Упрощение разметки

Некоторые решения принимались, исходя из знаний, имевшихся на тот момент. В результате в разметку было введено больше структурных элементов, чем необходи-
мо в свете появления новых приемов. Нетрудно найти места, откуда можно было бы убрать лишние элементы.
С момента запуска Zen Garden стало возможным подставлять изображения без дополнительного span, так что большинство этих элементов больше не нужны.
И избыточные классы не используются в 98 процентах присланных работ, так что и от них можно было бы с легкостью отказаться. Набор пустых d i v и span в конце документа нужен только ради дополнительных адресуемых элементов, которыми дизайнер мог
бы воспользоваться.
Очень может быть, что для других сайтов такие элементы не понадобятся. В Zen Garden на них возложена весьма специфическая функция - обеспечить максимальную гибкость. Но настолько вариативный дизайн нужен далеко не каждому сайту.
Если вы захотите воспользоваться HTML-разметкой Zen Garden (а мы не возражаем против этого), то не забывайте, что одна из важнейших целей дизайна на
основе стандарт - фотоов - устранить лишние элементы.
Включить один-другой d i v для обрамления логически связанных элементов вполне допустимо, но окружать span каждый абзац и каждый заголовок на странице, пожалуй, чересчур. Ниже в этой главе мы еще вернемся к обсуждению вопроса о труктурировании
документа.

Что мы уже знаем

Главная миссия сайта Zen Garden - продемонстрировать, на что способен дизайн на основе стандарт - фотоов;знакомство с различными дизайнами показывает, на сколько гибкие возможности представления дает CSS.
Сам по себе CSS - это язык дизайна, служащий дополнением к таким языкам разметки, как HTML, XHTML и XML. Спецификация CSS1 появилась в 1996 году, а CSS2 - в 1998. В браузеры постепенно вводится поддержка для той и другой, так что начиная с 1998 года
стало принято управлять всеми типографскими особенностями представления с помощью внешнего CSSфайла. И на этом роль CSS и ограничивалась в течение последующих четырех или пяти лет.
Легко понять, почему CSS использовался лишь для управления шрифтами - ведь только это и поддерживалось одинаково всеми браузерами. Впрочем, даже и с этим они справлялись не очень хорошо, но у такого способа было одно весомое преимущество, из-за которого большинство дизайнеров готовы были применять CSS несмотря ни на что.
Преимущество состояло в том, что все документы на сайте могли ссылаться на один и тот же CSS-файл. Если задать гарнитуру шрифта в таблице стилей, то соответствующее объявление будет применено ко всем страницам. Стоит изменить вид или размер шрифта
всего в одном файле, как это отразится на всем сайте.
Это было существенно лучше применявшейся ранее методики, когда тег приходилось ставить перед каждым нуждающимся в выделении элементом
документа на всех страницах сайта. В результате на каждой из сотен страниц могло оказаться по семь-восемь таких тегов. Изменение шрифта выливалось в
длительную и мучительную работу.
Этот тип отделения представления был лишь малой толикой того, на что способны таблицы стилей. Редизайн сайта стал на много порядков проще, поскольку
для переноса текста из старого дизайна в новый уже не нужно было выискивать и заменять тысячи тегов , разбросанных по разным файлам; достаточ-
но было скопировать контент, а таблицы стилей сделали бы все остальное.
Но долгое время этим все и ограничивалось. Старые браузеры, плохо поддерживающие CSS и не позволявшие применять более сложные стили, оставались на компьютерах пользователей в течение многих лет после предполагаемого срока замены, так что делать что-то более продвинутое просто не имело смысла. Наконец в начале нового тысячелетия поддержка со стороны основных браузеров улучшилась до такой степени, что можно было всерьез рассматривать задействование потенциала CSS в полной мере. Конечно, она была (да и до сих пор остается) несовершенной, но все же достаточна, чтобы применение CSS не сводилось к замене шрифтов. После нескольких лет интенсивного
сотрудничества веб-дизайнеры во всем мире выработали надежные методы работы с имеющимися стилевыми средствами, позволяющими верстать страницы с использованием плавающих элементов и модели позиционирования. Были найдены и обходные пути для
браузеров, не вполне соответствовавших стандарт - фотоам.
Так где же мы сейчас находимся? Даже в 2005 году еще есть браузеры, не до конца поддерживающие спецификацию CSS2, хотя она вышла в свет в 1998 году. Но
в общем и целом поддержка достаточна для того, чтобы достоинства CSS и дизайна на основе стандарт - фотоов стали осязаемы и начали приносить плоды.
Приглядимся к этим достоинствам внимательнее. Скорее всего, вы о них уже знаете, коль скоро читаете эту книгу, но если вас интересуют детали, советуем обратиться к источникам, упомянутым в разделе «В заключение» в конце книги.




clipart









Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 37
Гостей: 16
Пользователи: JerryVef, Thomasimmix, AgnesAccony
Роботы: robot Bot, robot Bot, robot Bot, robot Bot, MSN Bot, MSN Bot, robot Bot, robot Bot, Yandex Bot, Google Bot, Google Bot, robot Bot, MSN Bot, Google Bot, MSN Bot, Yahoo Bot, crawl Bot, Google Bot

20-ка посетителей: JerryVef, magdalenatq1, Thomasimmix, AgnesAccony, gapedkag, MichaelRok, jeremyha3, veraem1, peteriq18, jeanieyf2, fernandols2, Shawndrome, nikkilc60, lucindact69, pennyhh18, Williamcloca, Sonyaexak, SmitCon, Dariusgarve, Charlesunerb


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги