J'aimerais utiliser des gradients fortement dans un nouveau site Web sur lequel je travaille. Je me demandais s'il serait préférable de mettre en œuvre les gradients de CSS3 ou SVG.
En règle générale, je n'ai besoin que de gradients linéaires multitendants qui répondent tous les deux à mes besoins.
J'ai initialement supposé que cela a été préféré à CSS3, mais a commencé à remettre en question ma décision et apprécierait d'autres opinions.
Une considération importante que je ne connais pas la réponse à laquelle est ce qui fonctionne mieux?
Y a-t-il une meilleure pratique pour la mise en œuvre de gradients de fond?
4 Réponses :
Ne faites pas vos choix de conception basés sur la fabrication d'un heureux heureux. Utilisez une prise en charge progressive d'amélioration / navigateur graduée et appuyez sur IE au bas de votre liste de support.
Choisissez CSS3: votre site Web apparaîtra simplement sans gradients sur IE, ce qui est probablement un compromis acceptable à faire.
Vous devez utiliser http://www.colorzilla.com/gradent-editor/ Pour générer des CSS et SVG (pour IE9) à la fois.
Exemple: P>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Cela ne répond pas vraiment à la question que l'OP demande. C'est génial que l'on puisse soutenir à la fois avec un code minimal - mais le PO demande des avantages et des inconvénients. La seule façon dont cette réponse a du sens est de savoir s'il était préfixé avec "Les deux gradients sont complètement équivalents à tous les égards; Différents navigateurs prennent simplement en charge différents types de gradies », ce qui ne serait pas une déclaration factuelle.
Selon un test effectué par Lea Verou (je fais confiance à son travail), les gradients CSS sont plus rapides: http://lea.verou.me/ 2011/08 / CSS-Gradity-Gradity - sont-beaucoup-plus vite que-svg /
Vous pouvez également envisager d'utiliser MODENTIZR pour servir SVG à IE9 qui prend en charge les arrière-plans SVG mais ne prend pas en charge les gradients CSS. P> dans votre CSS, vous feriez simplement: P> .cssgradients #someElement { /* Gradient background rule. */ }
.no-cssgradients #someElement { /* SVG background rule. */ }
J'ai choisi de mettre en œuvre mes gradients linéaires dans SVG, car je peux le faire une fois, je ne soutiens bien sûr que des navigateurs modernes.
C'est le SVG, je n'ai besoin que de la décrire une fois. Je ne suis pas sûr que s'il existe un moyen de définir les coordonnées X1Y1 et X2 Y2 à l'aide de CSS. heureux d'être prouvé.
Donc, si CSS ne peut pas implémenter un gradient avec des coordonnées X1Y1 X2Y2, je suppose que c'est un avantage d'utiliser des gradients linéaires SVG.
Le code suivant peut être pris droit de sortir de l'inkscape.
Pourquoi ne pouvez-vous pas définir les gradients une seule fois dans CSS?