1

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/

Community
  • 1
  • 1
Jonathan Beech
  • 509
  • 1
  • 6
  • 16
  • You are looking for a safe fallback for `-webkit-background-clip:text` for non-Webkit browsers. As an alternative, you can look for [cross-browser solutions for patternized text](http://stackoverflow.com/q/13932946). – tanius Oct 17 '15 at 15:43

3 Answers3

6

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.

David Storey
  • 29,166
  • 6
  • 50
  • 60
  • Perfect, that code you posted was just the job. I really wish these browser vendors would get their act together and prevent some of this need for hacking by implementing proprietary Css properties. I guess its the nature of the beast but it all seems unnecessary when the end result is just to want to design something without needing extensive hacking. – Jonathan Beech Jun 20 '13 at 22:51
  • As it works, it would be great if you could accept my answer :) I’m in the CSS working group, but I wash‘t privy to any discussions around this (was before my time). I expect one of the reasons is that it doesn't fallback gracefully, so isn‘t design that well. It is also quite inconsistent with the other clip values, in that they clip to boxes. – David Storey Jun 20 '13 at 22:53
0

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.

Community
  • 1
  • 1
Aleena Byrne
  • 1
0

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>
tanius
  • 14,003
  • 3
  • 51
  • 63