07 ноября 2009 :Метод постепенного улучшения с CSS3: Поддержка современных браузеров

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

В последних версиях инновационных браузеров (типа FF 3.5, Opera 10) введены некоторые декоративные эффекты из предложенной спецификации CSS 3. Прозрачность, тени и эффект зебры (полосатости) теперь доступны без использования JavaScript, или дополнительной разметки. Но в некоторых старых браузерах, которые всё ещё используются этих свойств нет, и было бы грустно думать что у вас не будет шанса использовать эти замечательные эффекты ещё несколько лет.

В этой статье я расскажу о том как сделать приятные (постепенные) улучшения в браузерах которые поддерживают особенности CSS3 и при этом показать удовлетворяющую остальных пользователей вёрстку.

Что такое постепенное улучшение (progressive enhancement)?

Чтобы понять концепцию "постепенного улучшения", нужно понять принцип "лёгкого ухудшения" (graceful degradation), который хорошо описан следующей цитатой:

Лёгкое ухудшение означает что ваш сайт продолжает работать даже если просматривается в менее чем оптимальном браузере, в котором продвинутые эффекты не работают.
Fluid Thinking, by Peter-Paul Koch

"Постепенное улучшение" использует тот же метод только с противоположной стороны, вместо заботы о том чтобы сайт не развалился в старом браузере, нужно прежде всего думать о контенте и просто добавлять в дизайн особенности современных программ чтобы улучшить пользовательское восприятие, в то время как базовое состояние вёрстки всё ещё работает на старых машинах. Это на текущий момент наилучший, способ применять новые возможности CSS 3.

Пример

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

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

Разметка

Сделаем простое меню используя неупорядоченный список (ul):

<ul> 
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li> 
<li><a href="">Lorem Ipsum</a></li> 
<li><a href="">Lorem Ipsum</a></li> 
<li><a href="">Lorem Ipsum</a></li> 
</ul>

Базовый стиль

В качестве базового я  применю стиль который использует только простые селекторы наслезования. Он создаёт границу у каждого элемента и меняет фон при наведении мыши (onmouseover). Это должно работать в любом браузере сделанном за последние 7-8 лет (и возможно больше).

CSS очень прост:

ul {
background-color: blue; 
border-bottom: 1px dotted #999; 
list-style: none; 
margin: 15px; 
width: 150px; 
}

li { 
background-color: #fff; 
border: 1px dotted #999; 
border-bottom-width: 0; 
font: 1.2em/1.333 Verdana, Arial, sans-serif; 
} 
 
li a { 
color: black; 
display: block; 
height: 100%; 
padding: 0.25em 0; 
text-align: center; 
text-decoration: none; 
} 

li a:hover { background-color: #efefef; }

Единственная странность тут это синий фон у <ul>; это я объясню позже. С этим стилем, у нас будет следующий базовый вид, он будет отображаться в IE6 так:

Базовая вёрстка, так будет выглядеть в IE6 и других старых браузерах.

Применение улучшений

IE7 был первым в серии браузеров IE который поддерживал все селекторы атрибутов из CSS 2.1, что тоже распространено в почти всех других браузерах. Мы можем использовать один из них - дочерний селектор - чтобы начать улучшение. Так как IE6 не поддерживает дочерние селекторы он проигнорирует следующие правила:

body > ul { border-width: 0; } 

ul > li { 
border: 1px solid #fff; 
border-width: 1px 0 0 0; 
} 

li > a { 
background-color: #666; 
color: white; 
font-weight: bold; 
} 

li:first--child a { color: yellow; } 

li > a:hover { background-color: #999; }

С этими правилами CSS, список выглядит так:

У меню теперь цветной фон и жирный текст, а также первая ссылка подсвечена другим цветом.

Так отобразят список IE7, Firefox, Safari и Opera.

Сделаем больший акцент

Следующим шагом увеличим акцент, используя свойство которое IE не распознаёт: Прозрачность (opacity). Нам не надо применять специальных селекторов для этого, т.к. IE просто пропустит то свойсво которое он не поддерживает:

li { opacity: 0.9; } 

li:hover { opacity: 1; }

Следующая картинка показывает как это свойство работает в опере, вы можете увидеть что элементы списка приобрели лёгкий синий оттенок от фона <ul>. При наведении мыши (mouseover), каждый элемент становится полностью непрозрачным:

Вы можете конечно использовать IE'шное свойство filter для этого же эффекта в IE. Равно как и браузеро-специфичные префиксы (-moz-, -webkit-) для нижеуказанных свойств. Но в образовательных целях я придержусь стандарта CSS, так как filter не стандартное свойство, то оно и не валидно.

Firefox 2 поддерживает прозрачность, но в более поздних браузерах мы можем пойти ещё дальше. В Safari и Opera, мы можем украсить текст используя свойство text-shadow:

li a:hover { text-shadow: 2px 2px 4px #333; }

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

Наконец, можно позаботиться полной поддержки Оперой новых CSS 3 селекторов и добавить ещё один слой улучшений: переменные цвета фона используя селектор nth-child:

li:nth-child(2n+1) a { background-color: #333; } 

li:nth-child(n) a:hover { 
background-color: #aaa; 
color: #000; 
} 

li:first--child > a:hover { color: yellow; }

Мы увидим полосатое меню в Опере:

Итог и выводы

На рисунке ниже видно как начальная разметка выглядит в IE6, IE7, Firefox, Safari и Опере, после применения правил CSS описанных в этой статье. как вы можете видеть, так как поддержка браузерами CSS становится всё более утончённой, меню становится более стильным и сложным, и используя технику постеменного улучшения, меню остаётся рабочим даже в очень старых браузерах.

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