Поддержка браузерами функции RGBa. - «Верстка»
Microsoft представила ИИ-помощника Copilot Appearance с мимикой - «Новости мира Интернет»
Microsoft представила ИИ-помощника Copilot Appearance с мимикой - «Новости мира Интернет»
Яндекс представил ИИ-архитектуру TabM для работы с табличными данными - «Новости мира Интернет»
Яндекс представил ИИ-архитектуру TabM для работы с табличными данными - «Новости мира Интернет»
Microsoft вернула удобный перенос данных между ПК в Windows 11 - «Новости мира Интернет»
Microsoft вернула удобный перенос данных между ПК в Windows 11 - «Новости мира Интернет»
Инженер создал чехол для iPhone, который превращает Lightning в USB-C - «Новости мира Интернет»
Инженер создал чехол для iPhone, который превращает Lightning в USB-C - «Новости мира Интернет»
Figma открыла доступ к генеративному ИИ для создания интерфейсов без кода - «Новости мира Интернет»
Figma открыла доступ к генеративному ИИ для создания интерфейсов без кода - «Новости мира Интернет»
Microsoft открыла регистрацию на бесплатный год обновлений безопасности для Windows 10 - «Новости сети»
Microsoft открыла регистрацию на бесплатный год обновлений безопасности для Windows 10 - «Новости сети»
Их заменил ИИ: ведущие технологические компании уволили более 100 000 специалистов с начала года - «Новости сети»
Их заменил ИИ: ведущие технологические компании уволили более 100 000 специалистов с начала года - «Новости сети»
«Парадокс успеха»: глава Microsoft попытался успокоить сотрудников после новой волны увольнений - «Новости сети»
«Парадокс успеха»: глава Microsoft попытался успокоить сотрудников после новой волны увольнений - «Новости сети»
Intel пригрозила бросить освоение передового техпроцесса 14A, если на него не найдётся заказчиков - «Новости сети»
Intel пригрозила бросить освоение передового техпроцесса 14A, если на него не найдётся заказчиков - «Новости сети»
Анонсированы смартфоны Realme 15 и 15 Pro с улучшенными камерами и чипами Snapdragon 7 Gen 4 и Dimensity 7300+ - «Новости сети»
Анонсированы смартфоны Realme 15 и 15 Pro с улучшенными камерами и чипами Snapdragon 7 Gen 4 и Dimensity 7300+ - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Вёрстка » Поддержка браузерами функции 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


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

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

RGBa - это функция, используемая в CSS для определения цвета с альфа-каналом. Используется она следующим образом: Это позволяет нам заполнить какую-либо область полупрозрачным цветом. Кроме того, мы знаем, что есть очень похожее свойство opacity, но оно применяется ко всем дочерним элементам и обходится это только при использовании хаков. С помощью RGBa, мы можем сделать полупрозрачным только один элемент, не применяя свойство к дочерним. Альтернативный цвет. Не все браузеры поддерживают RGBa. Таким образом, если дизайн позволяет, то необходимо объявлять альтернативный цвет. Если его не объявлять, то браузер не будет применять цвет для этого элемента вообще. Но даже этот способ не работает, в действительно старых браузерах. Поддержка браузерами 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. Этот фильтр даёт точно такой же результат: Вопрос к читателям. Есть несколько статей, которые вроде бы и можно перевести, но не знаю, на сколько это вас заинтересует. Статьи такие: CSS Box-Model О свойстве float О свойстве overflow Было бы интересно услышать ваше мнение, интересно ли это вам и стоит ли вообще их переводить.

запостил(а)
Audley
Вернуться назад
0

Смотрите также

А что там на главной? )))



Комментарии )))