CODEWITHSUNDEEP
backgroundcompatibilitymozillaclipcss
Harry Solovay
Harry Solovay

Reputation: 11

Text-shadow and background-clip css in Mozilla

I'm having an issue with the cross-browser compatibility of a css inset text-shadow effect. Specifically, I'm having an issue with Mozilla. Here is the code:

I have a container with various inner elements:

<div id='abstract'>
    <span>Abstract</span>
</div>

Applied to it are the following styling rules:

#abstract span {
    font-family : 'FuturaLT Heavy';
    font-size : 21px;
    line-height : 24px;
    text-transform : uppercase;
    color : transparent;
    background-color : #565656;
    text-shadow : 0px 2px 3px rgba(255, 255, 255, 0.5);
    -webkit-background-clip : text;
       -moz-background-clip : text;
            background-clip : text;

}

The span appears as I want it to in Safari and Chrome:

http://harrysolovay.com/non_site_related/images/stackoverflow/1.png

Unfortunately, this is what gets displayed in Mozilla:

http://harrysolovay.com/non_site_related/images/stackoverflow/2.png

I used modernizr to test both text-shadow and background-clip: both properties exist and are functional in Mozilla, which is keeping me from writing javascript that only inserts the styles if the property exists. In other words, I've ruled this out as a solution.

How else can I fix this issue? Are there any other detection and fallback methods I should try? Is there a simple css solution (please say yes)? Any help, suggestions or comments would be greatly appreciated. Thank you.

Upvotes: 0

Views: 499

Answers (1)

Harry Solovay
Harry Solovay

Reputation: 11

I found a solution to my question.

First, add the following test to Modernizr:

`Modernizr.addTest('backgroundcliptext', function() {
    var div = document.createElement('div');
    div.style.webkitBackgroundClip = "text";
    var text = div.style.cssText.indexOf('text');
    if (text > 0) return true;
    'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){ 
        if (val+'BackgroundClip' in div.style) return true;
    });
});`

This tests not only that the background-clip property exists in the browser, but also that the text value exists as an understood value. Then, the boolean Modernizr.backgroundcliptext is true if browser is compatible. I wrote something like this:

if(Modernizr.backgroundcliptext) {
    $('#abstract > span').css({
        'color' : 'transparent',
        'background-color' : '#565656',
        'text-shadow' : '0px 2px 3px rgba(255, 255, 255, 0.5)',
        '-webkit-background-clip' : 'text',
           '-moz-background-clip' : 'text',
                'background-clip' : 'text'
    });
}

(with the text css set to have a black color, no background-color and no background-clip or text-shadow)

Although I came up with an indirect solution to this problem, I hope there will soon be a way to patch browsers without the background-clip : text value understanding. Please comment if you have any news at all on this front. Thank you.

Upvotes: 1

Related Questions