Linear-gradient VS SVG Gradient

Bonjour la communauté,

J'ai une question sur les background dégradé.

J'ai dans mes marque pages 2 sites très pratiques concernant les dégradés en background :

Ultimate CSS Gradient Generator

et

SVG Gradient Background Maker

En CSS, ces 2 code me donnent le résultat que je demande et semblent être compatible tous navigateur (pour les navigateurs à partir de IE9 j'entend).
Ma question est donc la suivante : quel sont leurs différences (en css je parle) ?
Et lequel vaut-il mieux utiliser et dans quels cas ?

Avec tous les préfixes pour chacun des navigateurs les pages css deviennent lourdes et difficilement maintenables. Les solutions qui te rajoutent les préfixes sans que tu n’aies besoin de t’en soucier ont elles aussi leurs défauts (comme à chaque fois que tu rajoutes une surcouche).

Je pencherai donc plutôt pour la solution SVG qui est plus maintenable, on ne copie-colle pas n fois la même instruction avec juste un préfixe qui change ce qui est toujours source d’ennui dans la maintenance. Mais il faut bien mettre les instructions css dans un fichier css séparé et pas comme dans l’exemple les mélanger dans le html. C’est plus long à charger car la css ne peut pas être mise en cache et c’est moins maintenable, bref on y perd sur tous les plans.
La solution est compatible firefox4.0, safari3.2, opera 9.5 tandis que celle des préfixes est compatible firefox3.6 safari4.0 et opera 11.1.
Après si tu veux une maintenance plus facile utilise un fichier SVG séparé et si tu veux un temps de chargement rapide utilise le css en url-base64 en définissant une classe si tu utilises plusieurs fois le même dégradé dans ta page.

Pour les anciennes versions d’explorer tu peux appeler avec des commentaires conditionnels pour ie6 à ie8 une page css qui reprend les balises propriétaires du navigateur de Microsoft tel que ton premier lien le fait (en virant bien sûr toute la partie css qui ne concerne pas ie).
Modifié par adrien881 (25 Oct 2012 - 14:15)

donc pour toi les 2 solutions sont viable, c'est juste une question de goût

Traxyl2en1 a écrit :
donc pour toi les 2 solutions sont viable, c'est juste une question de goût

Bonsoir,

Personnellement, pour avoir switché sur les deux méthodes, j'ai une nette préférence pour les base64, d'autant plus que ça marche non seulement pour les gradients mais pour tous types d'images (en restant raisonnable sur la taille bien sûr). C'est la solution que j'ai retenue pour mon site (ça limite de beaucoup les requêtes serveur). Les gradients CSS, non merci.

Je me pose toutefois la question de la technologie à adopter pour mes icônes, étant donné que de nombreuses méthodes en SVG voient le jour...
Modifié par Olivier C (02 Nov 2012 - 01:47)