Is there a graceful degradation option for this and MSIE?

Question

Can anyone think of a graceful degradation option for this? It looks nice in Chrome and Firefox but since MSIE doesn't support that text clipping CSS option it looks pretty poor in that browser.

div#svg-heading {
  font-size: 300%;
  font-family: Arial black;
  color: #aaa;
  transform: translate(65px, 15px);
}
div#svg-heading a {
  text-decoration: none;
  color: #aaa;
  font-style: normal;
  background-image: linear-gradient(#aaa, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="svg-heading">
  <a href="/svg.html">NEW SVG CHARTS</a>
</div>

Answer 1

I don't think a pure CSS based graceful degradation is possible for background-clip: text because this involves setting the gradient as the element's background image and so when the property is not recognized by the UA, it still leaves the background image on the element and makes it look ugly.

It is possible to recognize the browser using JavaScript and then decide whether to apply the property or not but in my opinion it would be a lot more simpler to use SVG like in the below snippet.

This is tested and found to be working fine in Chrome, Firefox, Opera, Edge, IE11 and IE10 and IE9.

<svg height="200px" width="100%">
  <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#aaa" />
    <stop offset="80%" stop-color="white" stop-opacity="0" />
  </linearGradient>
  <a xlink:href="/svg.html">
    <text x="20" y="50" fill="url(#grad)" style="font-family: Arial black; font-size: 300%">NEW SVG CHARTS</text>
  </a>
</svg>

---

Alternately if the background is a known solid color (and needn't be transparent) then you could follow the below approach to mimicing that background-clip: text effect.

div#svg-heading {
  font-size: 300%;
  font-family: Arial black;
  color: #aaa;
  transform: translate(65px, 15px);
}
div#svg-heading a {
  position: relative;
  text-decoration: none;
  color: #aaa;
  font-style: normal;
}
div#svg-heading a:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0px;
  border: 1px solid;
  background-image: linear-gradient(transparent, rgba(255, 255, 255, 1) 80%);
  pointer-events: none;
}

<div id="svg-heading">
  <a href="/svg.html">NEW SVG CHARTS</a>
</div>

---

Or if you want to stick to your existing approach then you could use JS to detect the browser and then decide whether to set background-image property or not. This way it will show the text normally in IE whereas the rest would have the fade effect.

Note: The logic to check if browser is IE or not was picked from this answer.

window.onload = function() {
  var isIE = /*@cc_on!@*/ false || !!document.documentMode;
  if (!isIE) {
    document.getElementById('anchor').style['background-image'] = 'linear-gradient(#aaa, rgba(255, 255, 255, 0) 80%)';
  }
}

div#svg-heading {
  font-size: 300%;
  font-family: Arial black;
  color: #aaa;
  transform: translate(65px, 15px);
}
div#svg-heading a {
  text-decoration: none;
  color: #aaa;
  font-style: normal;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="svg-heading">
  <a href="/svg.html" id='anchor'>NEW SVG CHARTS</a>
</div>