Fichiers jQuery et svg

Question

Je développe un site Web et je veux implémenter des fichiers svg pour vous aider en ce qui concerne les affichages retina, mais je veux un fichier png de secours en tant que sauvegarde. Ceci est le html/js/css;

<div id="band"> 
</div> <!--band--> 

<script> 
     $(document).ready(function() { 
       if (Modernizr.inlinesvg) { 
       //SVG. 
      $('#band').html('<img src="barbGradient.svg" />'); 
       } else { 
       //No SVG. 
      $('#band').html('<img src="barbGradient.png" />'); 
      } 
     }); 
</script> 

C'est le css;

} 

.no-inlinesvg div#band { 
position: relative; 
top: -950px; 
background-repeat: repeat-x; 
background-image: url('../_images/barbGradient.png'); 
z-index: -1; 

} 

.inlinesvg div#band { 
position: relative; 
top: -950px; 
background-repeat: repeat-x; 
background-image: url('../_images/barbGradient.svg'); 
z-index: -1; 
} 

Tous les navigateurs sont terriblement rendus! Je sais que je peux inclure deux pngs à différentes résolutions, mais je trouve la méthode js plus intelligente! Toute aide serait appréciée!

Answer 1

Je voudrais rester avec la solution png. 99,5% de vos utilisateurs ne remarqueront pas. Le HTML spec n'est pas prêt pour cela (Editors Draft) et les coûts d'une implémentation hacky surpasseront les avantages de l'OMI. Si vous voulez toujours cela, consultez this solution. Mais encore une fois, cette fois avec une citation du développeur polyfil:

. « Note: Soutenir ce nombre de points d'arrêt ajoute rapidement la taille du DOM et augmente le temps de mise en œuvre et la maintenance, afin d'utiliser cette technique avec parcimonie »