Поддержка браузерами модели RGBa
Спонсор месяца:
Санкт-Петербург аренда квартир – размещение в Спб, альтернатива гостиницам.
Модель RGBa отличается от тем, что позволяет дополнительно указать прозрачность цвета. Это выглядит так:
div {
background: rgba(200, 54, 54, 0.5);
}
Этот код выполняет тоже самое, что и привычное нам написание background и opacity. Но последнее делает прозрачным все дочерние слои и способов решения этой проблемы нет (кроме хаков с позиционированием). Кроме того, для разных браузеров приходится прописывать как минимум 3-4 названия этого свойства (opacity, filter: alpha(opacity=X), -moz-opacity, -khtml-opacity).
С помощью модели RGBa мы можем сделать слой прозрачным, не затрагивая его дочерние элементы:
Но, как вы уже догадались, не все браузеры поддерживают RGBa, поэтому вам придется дополнительно прописывать background с RGB моделью, т.е. просто цвет. Если вы этого не сделаете то, соответсвенно, слой будет без цвета.
div {
background: rgb(200, 54, 54); /* Проверка поддержки */
background: rgba(200, 54, 54, 0.5);
}
Поддержка браузерами модели RGBa
| Браузер, версия, OS | Поддержка | Проверка RGB |
|---|---|---|
| Firefox 3.0.5 (OS X, Windows XP, Vista) | Работает | — |
| Firefox 2.0.0.18 (PC) | Не работает | Сплошной цвет |
| Safari 4 (Developer Preview, Mac) | Работает | — |
| Safari 3.2.1 (PC) | Работает | — |
| Mobile Safari (iPhone) | Работает | — |
| Opera 9.6.1 | Не работает | Сплошной цвет |
| IE 5.5 (PC via IETester) | Не работает | Нет цвета |
| IE 6 (PC via IETester) | Не работает | Сплошной цвет |
| IE 7 | Не работает | Сплошной цвет |
| IE 8 beta 2 | Не работает | Сплошной цвет |
| Google Chrome 1.0.154.43 | Работает | — |
| Google Chrome 1.0.154.46 | Работает | — |
| Netscape 4.8 (PC) | Не работает | Нет цвета |
| SeaMonkey 1.1.14 | Не работает | Нет информации |
| Sunrise 1.7.5 | Работает | — |
| Stainless 0.2.5 | Работает | — |
| Flock 2.0.2 | Работает | — |
| BlackBerry Storm Browser | Работает | — |
| Camino 1.6.6 | Не работает | Нет информации |
Данные взяты из , там же представлен более подробный список браузеров. Вот такие вот подводные камни :\
Dmoz
Ну что же вы данные в табличке-то не перевели на русский? Работы на две минуты, а смотреться будет гораздо лучше.
Цитировать
Хорошая статья!!! Очень интересное свойство, однако,как это не печально пока ее не применить на практике из-за малой поддержки браузеров :(((А так за статью – большущий респект!!!
Цитировать
Я вот сейчас бьюсь над прозрачностью для мобильного браузера в windows mobile. Что-то вообще не представляю как это можно сделать :(
Цитировать
Мне кажется, особого смысла использовать свойство, которое поддерживается лишь половиной браузеров, нету. Ладно там прозрачность png, которую из основных только IE6 не держит, так тут вообще беспредел :)
Цитировать
Обычный технический прогресс… все текущие нововведения аукнутся лет через 5-10, когда верстальщикам станет чуточку проще верстать сайты уровня 2009 года (за счет упрощения некоторых задач), а устаревшие браузеры вымрут как класс. На данный же момент вряд ли это кому-то нужно, ибо все равно придется прописывать и filter, и opacity, и прочие пережитки эволюции для корректного отображения у всех пользователей. И эта тенденция незыблема, к сожалению…. прогресс не стоит на месте.P.S.: а проблема с PNG в IE6 и так решается достаточно просто
Цитировать