Фальшивая прозрачность для IE6

Ф

Почти все веб-разработчики трепетно относятся к IE6. И хоть его доля на рынке, чуть-чуть, но падает стабильно, но делать для него хотя бы минимальную поддержку всё-таки стоит.

Фальшивая прозрачность для IE6

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

Я, в последнее время, активно использую лайв-хак, которому уже очень много лет. Он позволяет сократить уменьшить на странице количество всякой всячины, которая учит IE6 понимать полупрозрачность у png.

Ну взять хотя бы pngfix, если задача получить полупрозрачность, например, у лайтбокса (лайтбаклсы давно взяли за моду оставлять поддержку полупрозрачности IE6 на долю веб-разработчика), то всё делается намного проще, и что главное, быстрее. Плюс страница, хотя бы чуть-чуть, но будет быстрее отрисовываться.

Вот ссылки на два скриншота, прямо скажу, они фейковые, но общий смысл понять помогут (кликабельно):

Фальшивая прозрачность для IE6
Обычная полупрозрачность, понимают все приличные браузеры

Фальшивая прозрачность для IE6
Финт ушами для любимого IE6

Итак, в чём же заключается фокус? В простой гиф-картинке, размерами 2х2, которая сделана вот по такой схеме:

Фальшивая прозрачность для IE6

В итоге, получаем вот такой код (вы меня простите пожалуйста, так код писать не надо, его надо писать через условные комментарии, но иногда я себе позволяю такой милый пустячок-с):

background-lightbox
{
    background:url(bg.png); // для приличных браузеров
    _background:url(bg-ie6.gif); // для IE6
}

При этом, разумеется, вы можете делать полупрозрачность как угодно, например через opacity, и фильтрами для IE6. Но зачем лишние фильтры на странице?

Второпях сверстал небольшой пример того, как это будет выглядеть в браузере — index.

Ничего, кстати, не мешает, эту маленькую картинку загнать в base64, что бы под ногами не крутилась, но я не уверен, что это правильное решение.

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

Конечно же есть и минусы:
Во-первых, всё-таки это эмуляция прозрачности, фальшивая прозрачность, её нельзя рассматривать в роли полноценной замены прозрачности, если стоит такая задача.
Во-вторых, при zomm’e страницы, через раз, появляются неприятные артефакты.

А вы нашли ещё минусы?

Дмитрий Волотко

Метки

Страницы