Utilisation du dégradé CSS au lieu des images

L'utilisation de CSS pour créer des dégradés au lieu d'images a-t-elle un caractère négatif?Utilisation du dégradé CSS au lieu des images

Par exemple le code suivant:

#gradient { 
    color: #fff; 
    height: 100px; 
    padding: 10px; 
    /* For WebKit (Safari, Google Chrome etc) */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff)); 
    /* For Mozilla/Gecko (Firefox etc) */ 
    background: -moz-linear-gradient(top, #00f, #fff); 
    /* For Internet Explorer 5.5 - 7 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); 
    /* For Internet Explorer 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; 
}

Merci.

Source

2010-03-25 Wiika

S'il vous plaît poster votre code correctement: http://stackoverflow.com/editing-help – Crozin

Comme vous l'avez illustré dans votre exemple, il n'existe pas de solution unique qui fonctionne pour tous les navigateurs courants. Je considère qu'un «négatif» pour la maintenance et la lisibilité du code. Un peu de critique constructive: le mot que vous cherchez est "à la place", pas "instantané".

Source

2010-03-25 15:19:41 Syntactic

Merci Syntactic pour votre réponse rapide, je suis désolé mais je ne suis pas un locuteur natif anglais, RegDwight a changé mon message – Wiika

Les dégradés ne sont pas encore standardisés et de nombreux navigateurs ne le supportent pas, dans votre exemple, -moz-linear-gradient fonctionne dans firefox 3.6 mais pas sur l'ancienne version. Si votre site est destiné à un usage public, de nombreuses personnes ne verront pas les dégradés, vous pouvez donc vérifier quelle version du navigateur ils utilisent et utiliser des dégradés ou des images basés sur ces dégradés. J'utilise des dégradés sur un site intranet (où je peux forcer les utilisateurs à utiliser un navigateur spécifique), Si le navigateur n'est pas Firefox 3.6 ou supérieur, le site affichera juste un message qui dit à l'utilisateur de mettre à niveau, mais ce n'est pas un bon manière si vous allez public. Donc, je choisis négatif pour les sites publics. :)

Source

2010-03-25 15:26:44

Oui votre 'e droite, j'ai un site Web public et tous mes utilisateurs utilisent des navigateurs modernes, la plupart d'entre eux utilisent toujours Internet 6-7, il y a une autre façon de gradients pour tous les éléments de la page est en utilisant une seule image transparente à transparent je crois) mais je ne suis pas sûr de savoir comment le faire dans photoshop – Wiika

Les dégradés CSS sont utilisés sur de nombreux sites Web de grande taille en utilisant les solutions de repli que vous utilisez. J'ajouterais PIE.htc aussi. Si vous utilisez PIE n'oubliez pas qu'il doit être absolument ou relativement positionné pour apparaître.

Si vous devez supporter de très vieux navigateurs, le mieux est de leur donner une couleur de fond solide.

Pour que ce soit bête de s'attendre à ce que les anciens navigateurs affichent des dégradés. Si vous devez absolument vous pouvez configurer une feuille de style conditionnel chargé: Là-dedans

<!--[if lt IE 8]> 
    <link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->

vous pouvez déclarer un gradient à base d'image répétable. Tout comme c'était le cas avant CSS3.

En faisant cela, vous rendez votre site un peu plus rapide pour les navigateurs modernes.

Source

2012-01-23 22:16:44 Tai

Utilisation du dégradé CSS au lieu des images

Répondre

Questions connexes