23-05-2016, 03:39 PM
CSS Gradients fonctionne sur tout navigateur.
Perso, si un élément sert de décoration, alors je le fais en CSS. De là, soit le CSS crée son propre gradient si c'est possible, soit le CSS utilise une ressource (interne en data URI ou externe via une URI), qu'elle soit SVG (parfaitement adapté aux gradients complexes) ou PNG (adaptés pour du raster). Les illustrations (HTML figure) sont toujours des images externes, PNG ou SVG, même s'il s'agit juste d'un dégradé.
Niveau rapidité de chargement, je n'ai pas non plus testé, mais ce qui est certain, c'est qu'un dégradé simple CSS sera plus léger à transférer qu'une image PNG ou SVG de ce même dégradé. Mais ce genre de considération est hyper-marginal quand on veut choisir entre l'un ou l'autre.
Perso, si un élément sert de décoration, alors je le fais en CSS. De là, soit le CSS crée son propre gradient si c'est possible, soit le CSS utilise une ressource (interne en data URI ou externe via une URI), qu'elle soit SVG (parfaitement adapté aux gradients complexes) ou PNG (adaptés pour du raster). Les illustrations (HTML figure) sont toujours des images externes, PNG ou SVG, même s'il s'agit juste d'un dégradé.
Niveau rapidité de chargement, je n'ai pas non plus testé, mais ce qui est certain, c'est qu'un dégradé simple CSS sera plus léger à transférer qu'une image PNG ou SVG de ce même dégradé. Mais ce genre de considération est hyper-marginal quand on veut choisir entre l'un ou l'autre.