IE и rgba
Вслед за Женей, учусь новому.
http://bolknote.ru/2009/11/01/~2299
Женя удивился, а вслед за ним, удивился и я. Сколько лет назад командой разработки MSIE были придуманы разные клевые штуки, облегчающие разработку. И многие из них всё еще не предложены нам от W3C.
Сегодня, благодаря этому новому знанию, я понял как решить две труднорешаемые задачи. Издавна, чтобы сделать фон блока полупрозрачным, мы вынуждены были использовать или png-24 картинку в фоне или opacity-свойство. Но в случае с png-24, для ИЕ6 нужно писать AlphaImageLoader фильтр, который катастрофически замедляет рендеринг страницы. А в случае с opacity приходилось придумывать трюки, чтобы дети блока не бледнели от родительского opacity.
А теперь проблему opacity можно забыть, как страшный сон:
.block
{
background: #rgba
}
* html .block
{
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#99000000, endColorstr=#99000000);
}В начальной и конечной позиции один и тот же RGB (000000) и добавляю перед ним одно и то же значение Alpha (99)
Значение Alpha указывается в 16-тиричной системе, где 00 – полностью прозрачный, а ff – непрозрачный пиксел
Я протестировал скорость рендеринга страницы, на которой выливается 300 элементов с gradient-фильтром — он не замедляет рендеринг и это сильно радует
Но этот случай описывает ситуацию, когда нужно сделать однотонный полупрозрачный цвет, как например в модальных диалогах, когда вся остальная страница затемняется.
Иногда использовать png-24 всё-таки необходимо, как например в случае, когда нужно обрезать длинную неразрывную строку, уводя ее градиентом в непрозрачность.
В этом случае можно использовать второй способ.
.block
{
background: url(image.png)
}
* html .block
{
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#00ffffff, endColorstr=#ffffffff, GradientType=1);
}GradientType принимает значение 1, если градиент рисуется слева-направо; и 0, если градиент сверху-вниз.
MSIE хороший браузер.
Комментарии
5 комментариев к “IE и rgba”
Написать комментарий.
Придумывать погремушки в рамках своего красивого браузера и не думать про стандартизацию — это совсем не «хорошо».
Вот когда IE начнёт поддерживать нормальную нотацию RGBA и HSLA (см. спецификацию CSS 3), тогда поговорим о хорошем.
Ответить@pepelsbey, эта погремушка реализована много лет назад, когда стандарты не стучались в каждый дом
ОтветитьНу, не знаю, я бы не стал называть браузер хорошим только потому, что он (вау!) умеет делать градиенты через какие-то дополнительные фильтры-оверлеи.
Он и веб-шрифты сумел первым. И что, кто ими пользуется сейчас? Один из примеров, как можно угробить технологию проприетарным внедрением.
Ответить@pepelsbey, а чему еще радоваться в жизни то?:)
да и вообще кто на середину 2001 года мог похвастаться подобными погремушками? Между прочим, даже сейчас не всех из них мы знаем и тем более используем…
я его не защищаю, но зачем пинать почем зря? и да, ты не объективен, все мы знаем где ты работаешь
)))
Ответить@Вадим, дорогой, не обращай внимания на мою похвалу ИЕ — я-то знаю, что он глючный и не поддерживает стандарты
Да, ИЕ сейчас объективно плохой браузер. Но кто из браузеров 1999 года (а фильтры появились в ИЕ5) поддерживал стандарты? Не вина самого браузера, что его производитель не выпускал новые версии с 2001 года. Но то, что в ИЕ5 было реализовано многое-удобное-для-разработчиков, а в ИЕ6 потом это было еще улучшено, пусть и проприетарными поделками, отрицать сейчас не имеет смысла.
Ответить