[jQuery/CSS3] Efekt text-shadow w IE

Ile razy poziom waszej irytacji sięgał zenitu, podczas próby aplikacji efektów CSS3 w kIEpskIEj przeglądarce?

Oooo... już nie liczycie? Ja też przestałem;) Ale zapodaję wam ratunek w jednej z sytuacji, która mnie tez dobitnie denerwowała swojego czasu przy kilku projektach - text-shadow. Oczywiście problemu nie ma w IE w sytuacji, gdy cień powinien być czarny (mamy przecież mikroszitowe "filtry"). Niestety, przy innej kolorystyce cienia pojawiają się już komplikacje, a pluginy i rozwiązania, które można wygrzebać w sieci, niestety nie rozwiązują problemu.

Poniżej zapodaję plugin pod jQuery, który załatwia sprawę w IE od wersji 6 począwszy (ale radzę mojego portfolia pod v6 nie odpalać... wygląda strasznie:D)

$.fn.IETextShadow = function(options){
    var opts = $.extend({
        ignore: ''
    }, options);
    if($.browser.msie && $.browser.version.substr(0,1)) {
        $(this).not('input').not(opts.ignore).each(function() {
            var html, w, h;
            $context = $(this);
            $context.each(function() {
                var shadow = this.currentStyle['text-shadow'].split(' ');
                var fontSize = $(this).css('fontSize');
                var x = shadow[0];
                var y = shadow[1];
                var color = shadow[3];
                html = $(this).html();
                w = parseInt($(this).width());
                h = parseInt($(this).height());
                $(this).css({'width':w,'height':h,'position':'relative'});
                $(this).empty().html('<span class="sh-v">' + html + '</span><span class="sh-s" style="font-size:' + fontSize + ';margin-left:' + x + ';margin-top:' + y + ';color:' + color + ';">' + html + '</span>');
                $(this).find('.sh-v').css({'width':w,'height':h})
                       .next('.sh-s').css({'width':w,'height':h});
            });
        });
    }
};

Plugin wywołujemy w taki sposób:

$(document).ready(function() { 
    $('.my-text-shadow').IETextShadow({
        ignore: '#jakis-id-ktorego-child-nie-ma-cienia .my-text-shadow'
    });
});

Dzięki parametrowi  'ignore' możemy pominąć elementy specyficzne, które cienia nie powinny w IE mieć wygenerowanego, ze względu na jakieś specyficzne warunki, które sprawiają problemy (np. caption na elementach slidera, który znika, pojawia się i wywija inne cuda, z czym mogą być problemy w kontekście cienia w IE).

Poniższy plugin pobierając parametr text-shadow z atrybutów CSS (którego to of kors IE nie interpretuje) generuje element <span> z atrybutami adekwatnymi do elementu, który cieniujemy. Jedyne, czego teraz potrzebujemy do dodatkowo podać dwie reguły w CSS dla zagnieżdżeń wartości napisu i cienia + kontenera w którym wszystko się mieści, aby elementy grał ze sobą. Oczywiście te regułki aplikujemy tylko dla programu IE. Przeglądarki tego nie potrzebują;) (tak, wiem jestem dość ironiczny).

.sh-v{ /* css dla pseudo-wartosci */
    position:absolute!important;
    z-index:2!important;
    display:block!important;
    left:0;
    top:0;
}
.sh-s{ /* css dla pseudo-cienia */
    position:absolute!important;
    z-index:1!important;
    display:block!important;
    margin-top:-1px;
    left:0;
    top:0;
}

Przykład:

<p class="my-text-shadow">To jest jakiś cieniowany element.</p>

.my-text-shadow{font-size:20px;font-weight:bold;text-shadow:1px 1px 0 #ff0000;}

To jest jakiś cieniowany element.

Ta wersja pluginu generalnie przydaje się w sytuacji, gdy trzeba zaaplikować 1-pikselowy cień... Wersja obsługująca blur pewnie pojawi się za jakiś czas, jak tylko będę miał chwilkę, żeby do tego wrócić;) W każdym razie, na początek i do 90% zastosowań, ta wtyczka na razie wystarczy;)