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

Автор: harisov

Оригинал: http://harisov.livejournal.com/58661.html

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, чтобы это отработало только при включеных скриптах.

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

1. Нормальные браузеры показывают PNG-24 as is.
2. MSIE-5.5 и MSIE-6.0 со включеными скриптами и картинками показывают PNG-24 через AlphaImageLoader.
3. MSIE-5.5 и MSIE-6.0 со включеными скриптами и отключеными картинками показывают PNG-24 через AlphaImageLoader, ибо ему пофигу, что картинки отключены. :) Это и хорошо!
4. MSIE-5.5 и MSIE-6.0 с отключеными скриптами показывают картинку на сером фоне. Оно и правильно, чудес не бывает, нет скриптов — нет и компотика.
5. MSIE-5.0 со включеными скриптами и картинками показывают GIF фоном. Нет полупрозрачности, но это лучше, чем ничего.
6. MSIE-5.0 со включеными скриптами и отключеными картинками картинку не показывает. Ну, тут ничего не поделаешь.
7. MSIE-5.0 с отключеными скриптами и включеными картинками показывает картинку на сером фоне.