Y at-il une option de dégradation gracieuse pour cela et MSIE?

Question

Quelqu'un peut-il penser à une option de dégradation gracieuse pour cela? Il a l'air bien dans Chrome et Firefox mais comme MSIE ne supporte pas cette option de CSS de découpage de texte, il semble assez pauvre dans ce navigateur.

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

Je ne pense pas qu'un pur CSS basé dégradé est possible pour background-clip: text car cela implique la mise en gradient comme image d'arrière-plan de l'élément et donc quand la propriété est pas reconnue par l'UA , il laisse toujours l'image de fond sur l'élément et le rend laid.

Il est possible de reconnaître le navigateur en utilisant JavaScript, puis décider d'appliquer ou non la propriété, mais à mon avis, il serait beaucoup plus simple d'utiliser SVG comme dans l'extrait ci-dessous.

Ceci a été testé et s'est avéré fonctionner correctement dans Chrome, Firefox, Opera, Edge, IE11 et IE10 et 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>

---

Alternativement, si l'arrière-plan est une couleur unie connue (et ne doit pas être transparent), vous pouvez alors suivre l'approche ci-dessous pour que background-clip: text effet mimant.

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>

---

Ou si vous voulez coller à votre approche existante, vous pouvez ensuite utiliser JS pour détecter le navigateur et de décider ensuite si vous souhaitez définir background-image propriété ou non. De cette façon, il affichera normalement le texte dans IE alors que le reste aurait l'effet de fondu.

Remarque: La logique pour vérifier si le navigateur est IE ou non a été sélectionnée à partir de 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>