-moz-background-clip: text; in Mozilla update

Question

A couple of previous post seems to indicate that -moz-background-clip: text is not available in Mozilla. -moz-background-clip: *text* in Mozilla

Is it possible to hide what appears to be a proprietary WebKit only CSS feature from Firefox and other browsers? I would like to hide the pseudo "after" rule which adds text content to the page to achieve the desired effect from Firefox and IE, etc.

Here is my site, the text clearly renders badly in Firefox but fine in Chrome

http://sandpit.jonathanbeech.co.uk/

Answer 1

Yes, while background-clip is a valid CSS3 property, the text value in non-standard. As such no other browser supports it, and you do not need the other prefixes.

The problem you are seeing is that this feature does not fallback gracefully. Browsers that do not support it will show the background for the entire element.

To avoid this you need to hide the background from other browsers. The best way to do this is to use a webkit prefix. WebKit does not support this for the background property, but it does for CSS gradients. Thus you can specify a transparent gradient, and then specify your background image, by taking advantage of multiple background images:

 background: -webkit-linear-gradient(transparent, transparent), url("http://sandpit.jonathanbeech.co.uk/wp-content/themes/jontheme/images/crosshatch.png") transparent;

The main problem here is that Opera supports this -webkit- prefix for compatibility reasons. So you just need to specify a -o- gradient afterwards to cancel that out:

 background-image: -o-linear-gradient(transparent, transparent);

You then need to make the text transparent, so that other browsers do not see it:

 color: transparent;

See this fiddle to see it in action:

http://jsfiddle.net/dstorey/2dhNM/

As an aside, you can remove the z-index, as this only works on positioned (or not fully opaque) elements. As you've not set opacity or a position other than static on the ::after, this will not apply.

Answer 2

The CSS-Tricks article "Show Image Under Text (with Acceptable Fallback)" presents a nice solution. With it, -webkit-background-clip:text styled elements look ok-ish in other browsers (solid text on solid background).

Essentially, they use Modernizr to detect if the browser supports -webkit-background-clip:text, and only apply it if yes. Modernizr has to be extended with a custom test to make this possible:

<script src="modernizr-1.6.min.js"></script>
<script>
  Modernizr.addTest('backgroundclip',function() {

    var div = document.createElement('div');

    if ('backgroundClip' in div.style)
      return true;

    'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val) { 
      if (val+'BackgroundClip' in div.style) return true;
    });

  });
</script>

Answer 3

The solutions here have some different methods, which you could use to hide specific CSS properties from FF and other browsers. A bit messy/hacky though.

You could keep the CSS the same and just add

@-moz-document url-prefix() {
.css:after, .hoo:after, .prof:after{ display: none; }
} 

to remove the background pattern.

Using SVGs as recommended by the original post answers, would be a more elegant way to illustrate the text background cross-browser.