Есть ли изящный вариант деградации для этого и MSIE?

Question

Может ли кто-нибудь подумать об изящном варианте деградации для этого? Он выглядит неплохо в Chrome и Firefox, но поскольку MSIE не поддерживает этот CSS-параметр, он выглядит довольно бедно в этом браузере.

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

Я не думаю, что чистый CSS на основе изящную деградации возможно background-clip: text, потому что это связано с установкой градиента в качестве фонового изображения элемента и поэтому, когда имущество не признается UA , он по-прежнему оставляет фоновое изображение на элементе и делает его выглядеть уродливым.

Можно распознать браузер, используя JavaScript, а затем решить, применять ли это свойство или нет, но, на мой взгляд, было бы намного проще использовать SVG, как в приведенном ниже фрагменте.

Это проверено и работает как работающий в Chrome, Firefox, Opera, Edge, IE11 и IE10 и 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>

---

В качестве альтернативы, если фон известного сплошного цвета (и не должно быть прозрачными), то вы можете следовать ниже подходу к имитируя, что background-clip: text эффекта.

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>

---

Или, если вы хотите придерживаться существующего подхода, то вы можете использовать JS, чтобы обнаружить браузер, а затем решить, следует ли установить background-image собственности или нет. Таким образом, он будет показывать текст , как правило, в IE, тогда как остальное будет иметь эффект затухания.

Примечание: Логика проверки, является ли браузер IE или нет, выбрана из 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>