Прозрачный фон и поддержка браузерами модели RGBa

Речь пойдёт не о прозрачности блока, не об использовании изображений формата png с альфа-каналом, а о прозрачном фоновом цвете. Не слышали о таком свойстве? Ну что ж скоро будете не только много слышать но и успешно применять, ибо CSS3 грядёт!

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

 div {  background: rgba(55, 69, 126, 0.5); }

Как видим, фон тут задаётся в формате RGBа, в отличии от стандартного RGB. Четвёртое значение — это значение прозрачности цвета. Что же такого особенного в этом свойстве? Дело в том, что указав прозрачность фона блока мы никак не влияем на его дочерние элементы. Раньше, чтобы наложить к примеру текст на полу-прозрачной «подложке» поверх изображения мы пользовались свойством opacity, тоже кстати свойством CSS3. И получали при этом дополнительные проблемы: все дочерние (вложенные) элементы тоже становились полу-прозрачными. Приходилось их «вынимать» и позиционировать поверх полу-прозрачного блока. Слишком много телодвижений для такой простой, казалось бы, задачи. Теперь же ничего этого делать не нужно, прорачность не применяется к самому блоку. Смотрим на скриншот:

Ну, теперь о плохом, о поддержке браузерами модели RGBa сегодня.

• Mozilla Firefox 3.0.6 — есть.
• Safari 3.2.1 и Safari 4 — есть.
• Google Chrome — есть
• Internet Explorer 7 — нет ( и не удивительно)
• Internet Explorer 6— нет ( да и пошёл бы он…)
• Opera 9.64 — нет (как так?)
• Opera 10 альфа — есть (ну, слава Богу)

Opera неприятно удивила, но так как релиз десятой версии браузера не за горами, а пользователи этой программы обновляют её регулярно, то преживать придётся недолго. С IE тут вроде всё ясно, по слухам даже 8 версия не будет поддерживать модель RGBa. Но, как и во многих случаях, у браузара от Microsoft есть «чёрный вход» и в данном случае — это свойство filters.

div{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8037457e,endColorstr=#8037457e);
}

Для начала убираем назначенный фон, затем задаём градиент: начальный (startColorstr) и конечный (endColorstr) цвет, естественно должны быть одинаковыми и указываются в привычной (для меня, во всяком случае) шестнадцатиричной системе. А вот первые две цифры как раз и являются значением прозрачности. Прописываем это в отдельном файле css, подключаем его к документу через conditional comments и вуаля!