?

Log in

No account? Create an account
Универсальная поддержка полупрозрачности в MSIE6- - Если хочешь услышать смех бога — спланируй что-нибудь
Август 7, 2006
06:12 pm

[Ссылка]

Previous Entry Поделиться Next Entry
Универсальная поддержка полупрозрачности в MSIE6-

MSIE6- полупрозрачные PNG не поддерживает, это всем известно. Как обойти это с помощью AlphaImageLoader тоже всем известно. Но обычно описывается или решение в лоб, когда для каждого PNG-24 указывается в стиле AlphaImageLoader с конкретным URL к картинке, или громоздкое решение со скриптом.

Искал сегодня универсальное решение, чтобы не надо было ни прописывать для каждой картинки свой собственный AlphaImageLoader, ни применять внешние скрипты (мало того, что там написано дофига, так это ещё и внешний файл + используется прозрачный GIF).

Нашёл такое решение:

HTML:

<img class="png" src="/path/to/your.png" alt="different story"/>

CSS

img.png {
    background-image: expression(
        this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter =
            "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
            this.src + "', sizingMethod='image')",
        this.src = "/path/to/transparent.gif"
    );
}

Вроде бы то, что надо. Но, во-первых, оно у меня не заработало :), во-вторых, используется прозрачный GIF (т.е. + ещё один HTTP запрос), а в-третьих, нет поддержки MSIE5.

Думал, пыхтел, пробовал, ругался.

В итоге родилось такое решение:

<i class="png"><img src="image.png" alt="Image"/></i>

HTML код чуть больше, чем в предыдущем примере. Сейчас станет понятно почему. Самое главное, как обычно, в CSS:

* html .png
{
    width: expression(this.firstChild.width);
    filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+
            this.firstChild.src+"', sizingMethod='image')");

    background: expression("transparent url("+
            this.firstChild.src.replace(".png", ".gif")+") no-repeat");
    backgr\ound: none !important;
}

* html .png img
{
    behavior: expression(this.style.visibility="hidden");
}

Теперь по порядку:

  1. Используем * html, чтобы стили применялись только в MSIE6-.

  2. Задаём width, ибо AlphaImageLoader работает только если заданы размеры блока. Причём ширину блоку задаём равной картинке, которая лежит внутри этого блока (this.firstChild.width). Ещё вместо ширины можно задать position: absolute или float: left/right.

  3. filter'ом загружаем PNG, беря src из картинки. Это работает в MSIE-5.5+

  4. Для MSIE-5.0, который не понимает AlphaImageLoader, задаём background, заменяя в имени картинки .png на .gif. Т.о. для MSIE-5.0 надо иметь вторую картинку с обычной прозрачностью, лежащую рядом с полупрозрачным PNG.

  5. Скидываем background для MSIE-5.5+, используя backgr\ound.

  6. А теперь скрываем оригинальную картинку. Причём скрываем её не просто через visibility: hidden, а через expression, чтобы это отработало только при включеных скриптах.

Итак, что получилось:

  • Нормальные браузеры показывают PNG-24 as is.

  • MSIE-5.5 и MSIE-6.0 со включеными скриптами и картинками показывают PNG-24 через AlphaImageLoader.

  • MSIE-5.5 и MSIE-6.0 со включеными скриптами и отключеными картинками показывают PNG-24 через AlphaImageLoader, ибо ему пофигу, что картинки отключены. :) Это и хорошо!

  • MSIE-5.5 и MSIE-6.0 с отключеными скриптами показывают картинку на сером фоне. Оно и правильно, чудес не бывает, нет скриптов — нет и компотика.

  • MSIE-5.0 со включеными скриптами и картинками показывают GIF фоном. Нет полупрозрачности, но это лучше, чем ничего.

  • MSIE-5.0 со включеными скриптами и отключеными картинками картинку не показывает. Ну, тут ничего не поделаешь.

  • MSIE-5.0 с отключеными скриптами и включеными картинками показывает картинку на сером фоне.

Вот пример. По хорошему, картинку для MSIE-5.0 надо рисовать отдельно, убирая из макета тени и уменьшая количество цветов. Я просто убрал тень у оригинальной картинки, немного высветлил и сохранил как gif.

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

Tags: ,

(84 комментария | Оставить комментарий)

Comments
 
Страница 1 из 2
<<[1] [2] >>
[User Picture]
From:johnny_the_kid
Date:Август 7, 2006 02:25 pm
(Link)
прикольно, надо будет опробовать. респект как минимум за усидчивость!
[User Picture]
From:harisov
Date:Август 7, 2006 02:27 pm
(Link)
А пример написать-то я забыл! Сейчас сделаю.
[User Picture]
From:genetiq
Date:Август 7, 2006 03:52 pm
(Link)
никого не хочу обидеть, но баян. учите матчасть.
[User Picture]
From:johnny_the_kid
Date:Август 7, 2006 04:06 pm
(Link)
ссылку на первоисточник не скинете?
[User Picture]
From:wixus
Date:Август 7, 2006 11:33 pm
(Link)
думаю, что многие (если не все) кто юзал пнг24 делали такое. а вот не сделаете ли вы ман по прозрачности пнг заданной backgound-image:url(png.png) ? ;)
[User Picture]
From:harisov
Date:Август 8, 2006 03:27 am

AFAIK это невозможно.

(Link)
Спасают только position: relative/absolute и z-index.
[User Picture]
From:73r
Date:Август 8, 2006 03:06 am
(Link)
Клево. Молодец. В закладки
[User Picture]
From:chupa88
Date:Август 8, 2006 03:27 am
(Link)
По моему, вот идеальное решение: http://homepage.ntlworld.com/bobosola.
[User Picture]
From:harisov
Date:Август 8, 2006 03:32 am
(Link)
Это "идеальное" решение имеет те проблемы, о которых написано в начале поста (загрузка внешнего файла, нет поддержки MSIE5), которые я решал, ища другой метод.
From:ex_advertize733
Date:Август 8, 2006 04:05 am

в закладки

(Link)
Я пробовал с AlphaImageLoader. Только под IE 5 не тестировал.
[User Picture]
From:pepelsbey
Date:Август 8, 2006 05:05 am
(Link)
Хм. Отличная штука ;)

2 chupa88: Подгрузка .htc имеет серьёзный недостаток — файл почему-то не кешируется и запрашивается с сервера для каждой картинки на странице. Остаётся только посчитать траф...
[User Picture]
From:harisov
Date:Август 8, 2006 05:11 am
(Link)
У chupa88 в примере не используется htc, там pngfix.js. Только, насколько я вижу, если страница будет большая, то pngfix.js загрузится быстрее и не применится ко всем картинкам.
[User Picture]
From:iderins
Date:Август 8, 2006 05:16 am
(Link)
Гм... надо будет попробовать.

Не до конца понятно, чем шило лучше мыла.
Обычно я использвал «громоздкое решение со скриптом».

Пока я вижу, что приведенное решение короче на пару абзацев, не использует внешний ява-скрипт (но без включенных скриптов тоже не работает), не использует прозрачный gif (хотя, как правило, это «частоиспользуемая» картинка, и он лежит в кеше).

Но если приведенный ход работает быстрее и меньше грузит процессор: то почему бы и нет? Надо попробовать.

Вопрос: а как отнесутся к * html остальные броузеры (текущие и ожидаемые)?
[User Picture]
From:harisov
Date:Август 8, 2006 05:24 am
(Link)
Для меня прозрачный гиф не является "частоиспользуемой картинкой", у меня в вёрстке их нет.

* html понимает только MSIE-4.0 - MSIE-6.0. В MSIE-7.0 этот баг парсера уже исправили. Т.ч. этот фильтр можно спокойно использовать для написания правил только для MSIE6-.

Остальные браузеры это определение парсят, но применять его не к чему. Из-за того, что FF парсит * html и ругается на cursor: hand я использую сейчас всегда два файла, один для MSIE, подключаемый через условные комментарии, второй для всех.
[User Picture]
From:nely_snork
Date:Август 9, 2006 02:34 am
(Link)
Спасибо за описанное решение. Уже вчера пригодилось, но по ходу тестирования возник вопрос: решение работает только при XHTML 1.0 Strict в DOCTYPE?!
У меня не получилось оживить Png в IE6 ни в HTML 4.01 strict, ни (что удивило еще больше) в XHTML 1.0 Transitional!
[User Picture]
From:harisov
Date:Август 9, 2006 03:52 am
(Link)
Действительно, если MSIE в Standard Mode, то не работает. Я всегда перевожу его в Quirks Mode, вставляя xml-prolog (так проще поддерживать MSIE5), вот и не заметил.
[User Picture]
From:r_a_d
Date:Август 16, 2006 02:55 am
(Link)
Вот только если вынести стиль в отдельный подключаемый файл, то нифига не работает :(
[User Picture]
From:r_a_d
Date:Август 16, 2006 03:04 am
(Link)
Сорри, где-то наглючил с копированием :)
From:(Anonymous)
Date:Август 25, 2006 03:44 pm
(Link)
Почему-то не работает :( В чём может заключаться причина?
[User Picture]
From:harisov
Date:Август 25, 2006 03:46 pm
(Link)
MSIE в Standard Mode? Не отрабатывает почему-то второй шаг (width: expression(this.firstChild.width)), надо задавать позиционирование или float.

В Quirks Mode всё работает, я использую именно его для MSIE6-.
From:(Anonymous)
Date:Декабрь 12, 2006 08:11 am
(Link)
Здорово! Большое спасибо!!! Работает!!!
(Удалённый комментарий)
[User Picture]
From:harisov
Date:Январь 12, 2007 11:31 am
(Link)
From:(Anonymous)
Date:Апрель 23, 2007 01:29 pm

gif

(Link)
А зачем вообще использовать гиф? Он же в любом случае больше весит.
[User Picture]
From:harisov
Date:Апрель 24, 2007 06:08 am

Re: gif

(Link)
Для иконок 16x16 GIF эфективнее, чем PNG-8.
Re: gif - (Анонимно) - Развернуть
Re: gif - (Анонимно) - Развернуть
From:(Anonymous)
Date:Май 15, 2007 09:31 am
(Link)
Чувак, большой тебе респект с прицепом!
Если б ты знал как ты подмог мне! ПАСИБ ТЕБЕ ОГРОМНОЕ! :)
[User Picture]
From:harisov
Date:Май 15, 2007 09:35 am
(Link)
Пожалуйста.
Vitaly's Home Разработано LiveJournal.com