Поддержка браузерами функции RGBa.

RGBa - это функция, используемая в CSS для определения цвета с альфа-каналом. Используется она следующим образом:

div{ background: rgba(200, 54, 54, 0.5); }

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

С помощью RGBa, мы можем сделать полупрозрачным только один элемент, не применяя свойство к дочерним.

Альтернативный цвет.

Не все браузеры поддерживают RGBa. Таким образом, если дизайн позволяет, то необходимо объявлять альтернативный цвет. Если его не объявлять, то браузер не будет применять цвет для этого элемента вообще. Но даже этот способ не работает, в действительно старых браузерах.

div { background: rgb(200, 54, 54); /* Альтернативный цвет */ background: rgba(200, 54, 54, 0.5); }

Поддержка браузерами RGBa.

Браузер, версия, платформа Результат Альтернатива
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 Не работает Сплошной цвет
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 Не работает

Лучший способ для альтернативного цвета в IE

Для IE мы можем испльзовать фильтр CSS от Microsoft. Этот фильтр даёт точно такой же результат:

<!--[if IE]> <style type="text/css"> .color-block { background : transparent; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); zoom : 1; } </style> <![endif]-->

Вопрос к читателям. Есть несколько статей, которые вроде бы и можно перевести, но не знаю, на сколько это вас заинтересует. Статьи такие:

  1. CSS Box-Model
  2. О свойстве float
  3. О свойстве overflow

Было бы интересно услышать ваше мнение, интересно ли это вам и стоит ли вообще их переводить.

Опубликовано: 28.11.2009 Просмотров 22826 Ссылка на оригинал Tweet it!
3 comments  

Den

2009.11.28 09:01

 Мне интересно было б прочитать - О свойстве overflow.

Спасибо.
 

Ant

2009.11.28 14:18

 да, про overflow поддерживаю
 

Stasovsky

2009.12.21 02:31

 IE, как обычно всю малину накрывает медным тазом...
 

Оставить после себя комментарий

user

2016.10.16

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!