Utiliser CSS3 aujourd'hui, outils et ressources

Astuce par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (53967 lectures)
Tags : css, arrondis, explorer, ie8, IE6, ie7, css3, ombrages, font-face

Bien que les spécifications CSS 3 soient encore en phase de maturation, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer.

Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public.

De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. On en vient à soupeser les avantages et inconvénients de chacune de ces solutions : d'un côté la rapidité d'intégration; de l'autre une baisse de performance non négligeable sur ce navigateur. Selon le contexte, le public ciblé ou nos affinités, la balance ne penche pas toujours du même côté.

Voyons quelques uns de ces outils en ligne en vogue actuellement :

CSS3pie.com

CSS3Pie

Dans la jungle des outils permettant d'émuler CSS3 sur Internet Explorer, CSS3Pie semble être le plus robuste aujourd'hui et bénéficie d'une communauté et d'un compte Twitter plutôt actifs.

Via un fichier .HTC, CSS3Pie permet d'appliquer un certain nombre de propriétés CSS3 intéressantes : border-radius, box-shadow, border-image, backgrounds multiples et dégradés linéaires. Très prometteur.

CSS3please.com

css3please

CSS3Please n'est rien d'autre qu'une excellente démonstration en direct et interactive de différentes propriétés CSS3 (arrondis, ombrages, dégradés, transparence, rotation, transition, font-face)

Vous pouvez modifier les options et valeurs de la page, elles s'appliqueront instantanément sur la boîte d'exemple et l'ensemble des syntaxes (-moz-, -webkit-, et filtres IE) est proposée.

CSS3generator.com

css3generator

Dans la même veine que CSS3Please, CSS3Generator est un outil de génération automatique de syntaxes CSS dont le résultat est affiché en direct à l'écran.

Certaines fonctionnalités telles que les colonnes multiples, resize, box-sizing ou outline le démarquent de ses concurrents.

Selectivizr (ex-IE-css3.js)

Selectivizr

Toutes les ressources ne se limitent pas à rendre utilisable les propriétés CSS3, certaines telles que Selectivizr permettent d'émuler les différents sélecteurs (:first-child, :last-child, :nth-child, :focus, :target,…) CSS3 sur IE6-IE8 via JavaScript.

Sous forme de plugin ajouté à un framework existant (jQuery, Mootools, Prototype,…), cet outil nous semble bien abouti et robuste.

Font-face generator

fontfacegenerator

Exclusivement dédié à l'intégration de polices non standards sur tous les navigateurs, Font-face generator permet non seulement de convertir un fichier de fonte en plusieurs formats (.eot, .ttf, .woff) mais offre également une page de démonstration du résultat obtenu. Et ça marche !

Gradients generator

gradient

Gradients generator vous facilite la création de vos dégradés linéaires ou radiaux à l'aide d'un environnement où se croisent pipette, plage de couleurs, options de dégradés, code obtenu et résultat visuel.

N'oublions pas ces deux autres sites de ressources et d'information :

CSS3.info

css3.info

CSS3.info est site d'information sur les spécifications CSS3 pertinent et régulièrement alimenté.

Vous y trouverez les dernières actualités concernant cette norme et les navigateurs, quelques tutoriels ainsi que l'avancement des travaux sur les différentes propriétés et sélecteurs.

Findmebyip.com

FindMeByIP

FindMeByIP propose quelques tableaux évocateurs du support actuel des navigateurs concernant les diverses propriétés CSS3 et les sélecteurs. On y constate généralement que le retard pris par Internet Explorer est véritablement significatif et qu'il demeure complètement isolé à l'heure actuelle.

Et aussi…

Commentaires

billboc a dit le

super article ! merci beaucoup...

Nico3333fr a dit le

Mazette, la bonne collection de liens que voilà ! :-D
(et moi qui me disait qu'après HTML5, il fallait que j'expérimente CSS3, ça tombe pile !)

Merci !

Eroan a dit le

Merci pour ce condensé de liens super utiles, je garde ça sous le coude ;)

jpvincent a dit le

comme tu le rappelles, la contrepartie majeure est la baisse des performances qui peut être significative sur des pages un tout petit peu compliquées.
- le JS exécuté peut être lourd et modifie forcément le DOM, ça freeze le browser
- les .htc ont la mauvaise idée d'être des petits programmes qui s'exécutent pour chaque élément impacté par la règle CSS. Si tu as un coin arrondi pour 100 éléments d'une liste, ton PC exécute 100 programmes plus ou moins rapides

C'est au webdev d'être responsable et de se garder un IE6-7 sous le coude constamment ouvert pour bien vérifier qu'il n'y a pas de blocage du navigateur pendant un petit temps au chargement de la page.
C'est bon pour des gens sérieux sur des pages qui restent petites

sinon il reste à négocier la dégradation gracieuse (typiquement : pas de coins arrondis sur le IE7 du patron, il est probable qu'il ne le remarque jamais) ...
et sinon sinon il reste les techniques actuelles de CSS2+markup, certes consommatrices en markup voire en maintenance, mais bien éprouvées et reconnues :)

Borak a dit le

J'ai commencé à utiliser les Arrondis et les ombrages, mais tant pis pour les utilisateurs d'explorer.

LPS2P a dit le

Un autre petit lien sympa permettant de prévisualiser ce que rendent les principales propriétés CSS3. J'ai découvert ça il y a quelques jours au détour d'une promenade numérique :) http://www.impressivewebs.com/css3-click-char...

BeliG a dit le

Concernant le support sur les navigateurs, il manque pour moi une grande référence :
http://www.quirksmode.org/css/contents.html#CSS3

dldstyle a dit le

Super ce condensé de liens pour se lancer facilement dans le CSS3 tout en permettant au dinosaure de d'IE de comprendre le tout ! Hop, c'est twitté ;-)

pastelpro a dit le

J'ai testé CSS3PIE, très prometteur, le projet avance vite (sortie de la béta 2 le 28 juillet), rendu vraiment top. Par contre, encore de nombreuses situations où ça ne marche pas, et des performances vraiment pas terribles dès qu'on l'utilise trop.

Raphael a dit le

@pastelpro : je pense que les auteurs de l'outil seraient ravis d'avoir ton feedback et de pouvoir analyser les nombreuses situations où cela ne marche pas : leur forum est parfait pour ça, je les ai déjà contactés ainsi.

Chok71 a dit le

Il y a aussi Modernizr : http://www.modernizr.com Je n'ai pas encore tester... mais il a l'air très bon.

Sinon sympa l'article, merci !

Raphael a dit le

@Chok71 : oui j'ai hésité pour Modernizr, mais il ne fait que rajouter une classe dans la balise HTML. C'est à nous ensuite d'en faire ce qu'on veut.
Dans ce cas là, je préfère éviter JS et détecter les mauvais élèves via :root ou :lang : http://www.alsacreations.com/astuce/lire/996-...