Навигация

Партнеры


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

CSS 31 Учимся мыслить как дизайнер

Удвоение
Два дизайна - одна таблица стилей


Отсутствие ограничений на сайте CSS Zen Garden навело Егора Клооса на мысль продемонстрировать, что CSS - это инструмент для воплощения в жизнь любых мыслимых идей.
Заинтересовавшись трюками, позволяющими отправлять таблицы стилей с нетривиальными конструкциями только тем браузерам, которые могут их поддержать, Клоос убедительно доказал, что изобретательный код может привести к поразительным результатам. Так и появилась на свет работа «Удвоение», в которой единственная таблица стилей порождает два совершенно разных дизайна.

M O S e


Споры по поводу того, как улучшить дизайн при просмотре в браузерах с более полной поддержкой CSS, велись еще до появления «Удвоения». Идея проста:
воспользоваться отсутствием поддержки некоторых селекторов в том или ином браузере для того, чтобы именно с их помощью составить правила, которые
увидят браузеры, имеющие необходимую поддержку, а точнее Mozilla и его варианты Firefox, Opera и Safari. Конкретно, техника MOSe основана на селекторах, которые не поддерживаются в Microsoft Internet Explorer. Наиболее часто для этой цели применяются селекторы дочерних элементов, селекторы сестринских элементов и селекторы атрибутов.

Селекторы дочерних элементов


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

div#content>p {color: orange;}


Это правило говорит, что все абзацы, являющиеся непосредственными потомками d i v с идентификатором # c o n t e n t , будут выкрашены в оранжевый цвет.

Селекторы сестринских элементов

Селектор сестринских элементов выбирает сестер (или, если хотите, братьев) данного элемента (то есть имеющих того же родителя, что и этот элемент).
Синтаксически сначала указывается начальный элемент, затем комбинатор +, за ним - сестринский элемент и,наконец, объявление:

div#warning р + р {color: red;}


В результате абзацы, соседствующие с начальным абзацем внутри d i v с идентификатором ttwarning, будут отображаться красным цветом. Если применить это правило к той же разметке, что и выше, то мы увидим карт - фотоину, (красный шрифт отображен серым цветом).

Селекторы атрибутов и сопоставление с образцом

А вот тут-то и начинается самое интересное! Возможно, читатель незнаком с селекторами атрибутов, и прежде всего потому, что они не поддерживаются в
Internet Explorer. Поэтому большинство практикующих веб-дизайнеров даже не думают о том, как их можно использовать. А ведь селекторы атрибутов
предлагают очень интересные возможности.
Селектор атрибутов позволяет выбирать элементы в зависимости от того, какие атрибуты для них заданы и, что еще более полезно, от того, каковы значения
этих атрибутов. Так, если имеется ссылка с конкретным URL, то можно сделать выбор, базируясь не только на том факте, что имеется атрибут h r e f , но и на его значении. Тогда к каждому элементу с данным URL будет применен соответствующий стиль.
Рассмотрим следующую таблицу стилей:

[id] {color: teal;}
[id="warning"] Pcolor: red;}
[href~="http://mc2websites.com/"]
decoration: none;}
{ t e x t -


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

CSS-сигнатуры

CSS-сигнатуры получают все более широкое распространение. Идея в том, чтобы приписать идентификатор элементу body, который станет затем уникальной
сигнатурой для различных таблиц стилей.
Истинная ценность CSS-сигнатуры в том, что она дает опытному пользователю возможность перенастроить внешний вид чужого сайта. Например, если вы часто
заходите на сайт, в котором текст отображается шрифтом размером 9 пикселей и светло-серым цветом на белом фоне, так что вы его читать не в состоянии, то
вовсе необязательно забрасывать автора сайта письмами типа «исправь, а не то...». При условии, что автор включил CSS-сигнатуру, вы сможете переопределить размер шрифта с помощью пользовательской таблицы стилей в своем браузере.
Увидеть, как CSS-сигнатура применяется в Zen Garden, можно на примере работы Клооса:

<body id="css-zrn-garden">


Чтобы создать дизайн «Удвоения» с дополнительными возможностями, Клоос воспользовался сигнатурой элемента body. Заглянув в таблицу стилей, вы увидите необычные, на первый взгляд, конструкции:

body[id=css-zen-garden] a:link { color: #f90;
}
body[id=css-zen-garden] a : v i s i t e d { color:
#f90; }
body[id=css-zen-garden] a:hover,
body[id=css-zen-garden] a:active { color:
#fff; )


Здесь Клоос определил поведение ссылок в предположении, что они находятся внутри элемента body, для которого задан атрибут i d с указанным значением.

Сравнение MOSe со стилями для Internet Explorer

Предложить браузеру Internet Explorer совершенно другой набор стилистических правил нетрудно. Нужно лишь позаботиться о том, чтобы он мог их интерпретировать.
Вот как выглядит версия таблица стилей для Internet Explorer:

a:link { color: #f90; }
a:visited { color: #f90; }
a:hover, a:active { color: #fff; }


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

Версия «Удвоения» с дополнениями


В версии дизайна с дополнениями есть несколько заслуживающих упоминания эффектов. Построен он по аналогии со слоями в Adobe Photoshop: фон замощен
повторяющимся орнаментом, а прочие элементы расположены поверх него.
Фон задается для элемента body:

body[id=css-zen-garden]
{ margin: ЮОрх 0 0 0; padding: 0; t e x t - a l i g n :
c e n t e r; background:
t r a n s p a r e n t u r l ( s q u i d b a c k . g i f ); }


Далее добавляется еще одно изображение, на этот раз оно ассоциируется с элементом # c o n t a i n e r . Карт - фотоинка выступает в роли задника для области контента.
В преамбуле интересный эффект создается за счет использования светло-серого фона, через который просвечивает задник:

body[id=css-zen-garden] #preamble {
position:
absolute; top: 30px; left: 20px; display:
block; margin: 0; border:
lpx dotted #fff; paddingL 0; width: 196px;
height: 290px; background:
transparent url(blk35.png) repeat; overflow:
hidden; }


Такой же эффект используется и в области контента, где поверх фоновой картинки отображается полоса прокрутки. Наконец, для расположенной справа панели навигации со вкладками применен селектор : hover, создающий очень красивый эффект выделения. Конечно, это возможно лишь в браузерах, поддерживающих : h o v e r для любых элементов, а не только для ссылок, но можно считать, что браузеры, поддерживающие селекторы, на которые опирается MOSe, этому условию удовлетворяют.
Поскольку вниманию Internet Explorer предлагается куда более традиционная таблица стилей, то и говорить об эффектах не приходится. Самый интересный аспект
дизайна для Internet Explorer - это заключенный в нем юмор. В нем скрыт намек на модель прямоугольных областей в CSS - девушка с удивленным выражением
на лице, заключенная в ящик, - и добродушная насмешка над ошибкой в интерпретации этой модели в Internet Explorer 5.x. (Модель прямоугольных областей - это визуальная модель, которую браузеры применяют для вычисления положения отдельных элементов на странице).

Дизайн с гарантией на будущее

Не затихают споры по поводу дизайна «с гарантией на будущее» (future-proof). Это означает, что сделанное сегодня будет работать и с приходом будущих,
более передовых технологий.
Понятно, что вся идея «Удвоения» - и вообще техника MOSe как таковая - основана на том, что в Internet Explorer плохо поддерживаются ставшие уже стандарт - фотоными селекторы, определенные в спецификации CSS 2.1. Но что произойдет в туманном будущем, когда Microsoft все-таки выпустит более современный браузер с поддержкой всех этих средств? Теоретически ничего страшного - при условии, что все селекторы и эффекты будут реализованы, как должно, гипотетический Internet Explorer для Windows версии 7 будет отображать страницу так, как это уже сейчас делают Mozilla и другие браузеры. И тогда мир станет краше. Но не исключено, что возникнет очередная несовместимость, так что предсказать результаты практически невозможно.
Клоос придерживается мнения, что идея гарантии на будущее - это «продукт чьего-то гипертрофированного воображения», поскольку мы не знаем, какие сюрпризы
может преподнести это самое будущее. Так это или не так, но, по крайней мере, сегодня мы можем обратить в свою пользу факт отсутствия поддержки современных
селекторов в Internet Explorer, что с блеском продемонстрировано на примере дуального «Удвоения».




http mc2websites com



css




css

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



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



Поиск

***

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

20-ка посетителей: Egormulky, JamesFreet, marleneas18, kristinajc11, Tranohops, Paveldon, ernaed16, lizak3, GeorgePlaut, Patriotvhg, cecilemm69, tammyqj3, kellylp3, Brentonsoca, fluellusy, msvuser, jodyid69, MichaelRok, Donaldmek, dbmvzvom48


Партнеры

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

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

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

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