Навигация

Партнеры

ArtGrafica - АртГрафика - скачай счастье :) » Статьи по дизайну » WEB дизайн » CSS 33. Мир дизайнера - полон ярких красок

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

CSS 33. Мир дизайнера - полон ярких красок


Тюльпан
Реализация ниспадающих меню с помощью CSS и альтернатива для Internet Explorer


Хрупкость цветка тюльпана, у которого недостает одного лепестка, захватила воображение Эрика Шепэрда. Для своей работы он выбрал горизонтальную верстку с ниспадающими меню вдоль верхнего края. Возможность создавать ниспадающие меню с помощью одних лишь таблиц стилей впервые на своем сайте продемонстрировал! несколько лет назад Эрик Мейер, но для работы в Internet Explorer необходимо искать обходные пути.
Таким образом, задача состоит в том, чтобы создать оптимальный дизайн, но предусмот-
реть и альтернативный вариант специально для Internet Explorer, не утратив целостности и сохранив всю функциональность. Шэперд сумел это сделать.

Создание меню при помощи одних лишь таблиц стилей


Создавать меню на базе CSS - сплошное удовольствие. Делается это легко, причем с помощью применения различных стилей и способов позиционирования можно добиваться различных результатов. Но самое интересное в том, что не нужно писать ни одной строчки на языке javascript.
В приведенном ниже коде показана базовая разметка навигационного меню на основе списка. Это упрощенная версия разметки, примененной в «Тюльпане», разница в том, что вместо нескольких d i v для разных списков ссылок здесь имеется лишь один.

<div id="menu">
<h3>Select a design:</h3>
<ul>
<lixa href="#">Gardenias de Perfume</a> by <a
href ="#">Armando Sosa</ax/li>
<lixa href ="#">Pneuma</a> by <a href = "# ">Adam
Polselli</ax/li>
<lixa href ="# ">Birdhouse</a> by <a
href ="#">Justin Vilela</ax/li>
<lixa href ="#">Defiance</a> by <a
href="#">James Ehly</ax/li>
<lixa href =" #">Mediterranian</a> by <a
href="#">John Whittet</ax/li>
<lixa href="#">Austrian&#8217;s Dark Side</a>
by <a href ="# ">Rene Grassegger</ax/li>
<lixa href ="#">Invitation</a> by <a
href="#">Brad Daily</ax/li>
<lixa href ="#">Odyssey</a> by <a
href ="#">Terrence Conley</ax/li>


Если посмотреть, как выглядит эта разметка без применения стилей в любом браузере, включая Internet Explorer, то вы увидите обычный неупорядоченный список.
Хотя пользоваться ею, безусловно, можно, но выглядит она не очень красиво. Однако стоит добавить таблицу стилей, как все преображается. Ниже приведена таблица со стилями для тела документа и ссылок.

body {
font-family: tahoma, arial, helvetica, sansserif;

font-size: small;
background-color: #F2F4EE;
>
a:link, a:visited {
font-weight: bold;
text-decoration: none;
color: #998;
}
a:hover {
color: #887;
text-decoration: underline;


Обратите внимание, что даже в Internet Explorer при наведении мыши на ссылку ее
текст подчеркивается. Пока все хорошо, но дальше начинаются сложности.
Необходимо изменить значение свойства d i s p l a y для элемента u l на попе. В результате список будет скрыт и активируется лишь при наведении на него курсора:

ul {
display: none;
}


Добавьте это правило в таблицу стилей, и во всех CSS- совместимых браузерах список исчезнет. Чтобы заставить его снова появиться, нужно добавить динамический псевдокласс : hover и задать для него значение свойства d i s p l a y , отличное от попе, в данном случае block. Теперь, как только курсор мыши задержится над элементом #menu, элемент и 1 станет ВИДИМЫМ.
Обратите также внимание на дополнительные стили для элементов u l и l i :

#menu:hover ul {
display: block;
border: lpx solid #776;
margin: 5px;
padding: 5px;
width: 175px;
list-style-type: none;
}
li {
margin: 0;
padding: 3px;
border-bottom: lpx solid #887;
}


Если протестировать эту таблицу стилей в браузере, поддерживающем псевдокласс : h o v e r для произвольных элементов, то при наведении курсора появится меню в виде списка. Именно так оно и выглядит в «Тюльпане». Увы, в Internet Explorer меню так и остается скрытым, виден лишь его заголовок.

Ниспадающие меню в «Тюльпане»


Если посмотреть, как выглядит «Тюльпан» во всей красе, то вы увидите все вышеописанное: HTML-списки превращаются в меню, а стили задают поведение
при наведении курсора и придают меню красивый внешний вид. Но из-за проблемы в Internet Explorer Шепэрд должен был продумать CSS-код очень тщательно. Задача состояла в том, чтобы дать эффекту проявиться в полной мере в совместимых браузерах, но скрыть эти стили от Internet Explorer, «подсунув» вместо них что-то другое, пусть не такое хитрое, но позволяющее работать с меню, не калеча основную
идею дизайна.

Минус на минус дает плюс


Относительно Internet Explorer здесь уместно сделать два замечания. Во-первых, он не позволяет применять псевдокласс : hover ни к чему, кроме ссылок. Поэтому эффект наведения курсора воспроизвести не удается, и значит, собственно выпадение меню реализовать таким способом не получится. Во-вторых, как мы знаем, Internet Explorer не понимает некоторых типов селекторов. В частности, речь идет о селекторе дочерних элементов, который и составляет главное средство сокрытия стилей от этого браузера. Вот фрагмент из «Тюльпана»:

#linkList2 ul > li
Internet Explorer не поддерживает также псевдокласс
: f i r s t - c h i l d .
#linkList2 ttlselect li > a: first-child


Это правило интерпретируется так: первая ссылка в любом элементе списка, находящемся внутри элемента с идентификатором l s e l e c t , который является
потомком элемента с идентификатором l i n k L i s t 2 .
К таким элементам будет применен соответствующий стиль, если, конечно, браузер поддерживает подобные селекторы. Коль скоро для Internet Explorer дело обстоит не так, то он просто проигнорирует такое правило.
Отсутствие поддержки для подобных селекторов и псевдоклассов - источник постоянной головной боли при кодировании стилей для Internet Explorer, но иногда эти недостатки можно обратить себе на пользу, чтобы обойти проблему.

Разделение стилей

Чтобы воспользоваться CSS для создания красивых ниспадающих меню и в то же время не отказываться от поддержки Internet Explorer, придется объявить резервные стили, которые Internet Explorer понимает:

#linkList2 {
position: absolute;
top: 65px;
left: 750px;
z-index: 2 000;
height: 150px;
margin: 0;
padding: 0;
width: 1350px;


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

#Hn k L i s t 2 # l s e l e c t l i a: first-child {
d i s p l a y : block;
html > body #linkList2 li {
margin: 0;
padding: 3px;
border-bottom: lpx solid #887;


Разделив стили с помощью этого приема, Шепэрд смог реализовать пригодные для работы меню в Internet Explorer. Конечно, они выглядят не так привлекательно, как в других браузерах, но все же не уродливы и для навигации годятся.

Еще более продвинутый CSS

У реализации меню в «Тюльпане» есть еще один аспект, на который стоит обратить внимание:

#HnkList2 ul > l i : last-child


Здесь используется не только селектор дочерних элементов, но и псевдокласс : l a s t - c h i l d , определенный в спецификации CSS3. Если псевдокласс : f i r s t - chi Id позволил Эрику выбрать первого потомка в каждом списке меню, то этот псевдокласс дает возможность выбрать последнего потомка и применить к нему свой стиль. Как выясняется, в некоторые браузеры уже встроена рудиментарная поддержка CSS3, так что ему удалось достичь удовлетворительных результатов.
Но на момент работы над этой книгой спецификация CSS3 еще не была завершена, а вы видели, как плохо некоторые браузеры поддерживают даже имеющиеся
рекомендации. Можно ли сделать что-то, кроме поиска обходных путей для Internet Explorer? Вообщето да, но вам решать, насколько предлагаемые варианты вас устраивают.
Во-первых, можно по умолчанию реализовывать динамические меню с помощью javascript-сценариев. В этом нет ничего порочного, просто CSS позволяет
сделать то же самое более элегантно, не задумываясь о том, включил ли пользователь в своем браузере javascript или нет.
Другая альтернатива - воспользоваться так называемым htc-файлом. Это расширение поддерживает только Internet Explorer. С помощью сценария, записанного в htc-файле, можно изменить поведение самого браузера. Самый известный обходной маневр, реализованный с помощью этой техники, - это проект IE7 Дина Эдвардса (Dean Edwards), в котором с помощью нескольких htc-файлов исправлены некоторые ошибки в Internet Explorer и добавлена поддержка передовых возможностей CSS. Еще один вариант, касающийся певдокласса : hover, - это прием whatevenhover,
базирующийся на тех же принципах.
Но надо иметь в виду, что все эти обходные пути официально не поддерживаются, так что пользоваться ими надо с осторожностью, все тщательно взвесив. По своей природе они противоречивы. Ясно, что спецификация должна быть поддержана самим браузером, и некоторые пуристы полагают, что любой трюк или фильтр - неприемлемое решение.

Чему мы научились

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




CSS



2





css

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



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



Поиск

***

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

20-ка посетителей: Shawndrome, Thomasimmix, qsfrhfhx, Marattalimi, AgnesAccony, LutherHet, franciscaou3, lunar.elf, zacharyqv4, fluellusy, ernestineot69, alexor60, EugeneNes, amvdcxfh, TimothyVot, Stevenval, lloydmx1, loly777, lizauy2, andrewqo11


Партнеры

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

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

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

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