Pourquoi devrais-je utiliser les boutons CSS3?

Question

J'ai récemment créé un site Web et j'ai décidé de créer des boutons qui s'affichent en cliquant sur CSS3, plutôt cool.

Mais existe-t-il vraiment une raison valable d'utiliser CSS3 sur une image-objet, car seuls les navigateurs modernes affichent les boutons CSS3?

Le client m'a posé cette question, et tout ce que je pouvais penser était moins de requêtes http, donc le chargement serait légèrement plus rapide. Je peux voir du point de vue des clients que c'est une belle semaine de réponse.

Y a-t-il une meilleure raison?

Ou existe-t-il une méthode de remplacement qui serait capable de déplacer une position d'arrière-plan de sprites, ou de modifier le dégradé et d'ajouter une ombre de case sur un survol/focus?

juste écrit que je me demande si modernisateur serait de relever le défi ...

Answer 1

Cela est beaucoup plus une question d'éthique et d'affaires qu'une question de technologie, mais nous allons voir quelques points. Tout d'abord, je pense que votre client ne devrait pas connaître tous les détails techniques concernant la mise en œuvre. Il/elle devrait savoir ce qu'il/elle doit savoir, et c'est suffisant.

Vous ne devriez pas dire "Je ferai de votre site avec CSS3, de nouveaux éléments HTML5, et de jolis effets javascript eye-candy" pour un folk non-tech. Dites simplement "Je peux faire un bon site pour vous".

S'il vous questionne sur ce que vous utilisez ou pourquoi vous pensez que c'est la meilleure approche, alors vous répondez avec des avantages.

Il est léger, apporte moins de problèmes de compatibilité et est plus facile à entretenir. => Réduire le temps que son client attendra pour le chargement du site, tout le monde peut le voir, et coûtera moins cher dans les besoins futurs. CSS3 n'est pas une nouveauté révolutionnaire, vous devriez faire face à ces technologies qui sont évolutives. Toutes les règles précédentes s'appliquent toujours, y compris les règles de repli.

CSS Sprites sont une technique faite avec CSS2, donc il devrait fonctionner avec n'importe quel navigateur, y compris certains anciens (pas sûr de IE6).

Les dégradés sont nouveaux. Les navigateurs FF 3.5+, IE9 beta, Opera et webkit les affichent. IE8 ou plus ne le font pas. Quelque chose pour les ombres de boîte. Pour ceux-ci, j'ai juste ajouté quelques règles très simples comme solution de repli. Lorsque je développe, je mets le lien vers la feuille de style principale sur l'en-tête de la page, puis j'utilise un commentaire conditionnel IE pour charger les feuilles de style et les scripts.

Sur cette feuille de style IE seulement, j'ajoute juste les hacks ou les fallbacks nécessaires pour le rendre un peu décent. Vous avez des filtres MS pour gérer cela. Mon regard ie.css stylesheet comme:

.gradient { 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff'); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff')"; 
} 

.boxShadow { 
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5); 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5)"; 
box-shadow: 5px 5px 5px #666 
} 

Notez qu'il ya des règles, même avec ceux-ci, pour gérer IE6 solutions de repli, IE7 et IE8 +. Mais c'est minuscule et assurer un meilleur affichage.

A côté de cela, je vous suggère de lire http://24ways.org/2009/ignorance-is-bliss

Modernizr est une bonne lib, mais pense que si vous avez vraiment besoin.Vous pouvez être en train d'utiliser un bulldozer au lieu d'une cuillère.