28172 sujets

CSS et mise en forme, CSS3

Pie css3 ou Modernizr ?

Bonjour,

je souhaite me mettre à utiliser html5 et css3, j'ai fais plusieurs recherches, je comptais partir avec html5shiv et pie css3 puis je me suis dis que ce serais sympa de commencer aussi à utiliser les transitions css3 mais j'ai quelques questions :

- Modernizr fait la même chose que pie css3 et plein de choses en plus, dont les transitions, c'est bien ça ? plus besoin de htmlshiv non plus dailleur ?
- Donc on utilise pie CSS3 si on cherche juste à faire fonctionner les quelques propriété css3 de base comme les ombres, les coins arrondis etc mais si on veut aller plus loin, transitions, font face etc etc alors il vaut mieux Modernizr ?
- Quels sont les inconvénients / avantages de Modernizr sur pie CSS3 et vise et versa ?

Merci d'avance pour les précisions.
En fait, ce ne sont pas du tout le même type d'outil:

CSS3 Pie = Polyfill

Donc du code permettant d'imiter ou de combler les lacunes de certaines propriétés sur différents navigateurs. HTML5 shim/shiv sont également des polyfill, tout comme Selectivizr (sélecteurs CSS 3) ou response.js (media queries pour IE < 9)

Modernizr = feature detection

Modernizr te permet seulement de savoir si telle ou telle propriété est supporté sur un navigateur quelconque. L'intérêt de Modernizr est qu'il teste réellement le support de différents modules, propriétés (etc) html5 et css3 et ne fait pas que comparer le User-Agent avec une base de donnée.

En gros, les deux n'ont rien à voir. Ils peuvent être complémentaire, mais sont tous deux facultatifs jusqu'à un certain point. Tout dépend de l'utilisation que tu décideras d'en faire.

Cela dit, il n'existe pas (à ma connaissance) de polyfills pour les transitions/animation en CSS 3. Modernizr te permettra cependant de tester le support, et ce sera ensuite à toi de construire un fallback pour les navigateurs ne supportant pas ces propriétés (en utilisant la fonction .animate() de jQuery par exemple)
Merci beaucoup pour cette réponse très clair, je comprends mieux maintenant.
Donc du coup si j'ai bien compris, Modernizr sert à detecter ce qui fonctionne ou non dans le navigateur et ensuite dans le callback je choisi de loader un Polyfill si yes ou un autre si no (ou rien), dailleur ce Polyfill peu être pie CSS3 donc !

J'ai croisé cette liste de Polyfill : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
c'est assez pratique d'avoir tout centralisé, si jamais ça peu faire gagner du temps à quelqu'un.

Bref donc c'est donc bien plus clair, par contre si j'ai bien compris, avec Modernizr je n'ai plus besoin de html5shiv, Modernizr load la même chose, ou j'ai mal compris ?
En fait, tu dois construire ton "build" de Modernizr custom.

Alors, tu peux y ajouter, ou non, html5 shiv.

Si tu l'ajoute cependant, tu dois déclarer Modernizr dans ton header. Cela t’empêchera de paralléliser le download de ce script (donc mauvais pour les performances). C'est à toi de voir quelle importance a la performance, quel impact peut avoir ce choix. Si tu veux mon avis, ça ne changera pas grand chose à moins que tu cible beaucoup les appareils mobiles.

Modernizr ajoutera deux chose à ton document que tu pourras utiliser.

1. Des classes CSS ajoutés directement à la balise <html>. Celles-ci te permettront de cibler ou d'offrir des fallbacks selon le support d'une propriété. Par exemple:


.csstransitions #menu a {
  transition: all .5s;
}
.no-csstranstions #menu a {
  color: red;
}


Mais évidemment, ces classes ne seront disponible que si JS est activé. Alors pense à toujours avoir un style de base sans js.

2. En Javascript, Modernizr devient un objet contenant des booléens prêt à l'emploie. Par exemple:


if( Modernizr.csstransitions ) {
  alert("Transitions CSS 3 supportés");
} else {
  alert("Transitions CSS 3 non-supportés  [decu]");
}


Raphaël a d'ailleurs écrit un article au sujet de Modernizr sur Alsacréations: (le fonctionnement depuis la version 2 est seulement moins intrusif; les mauvaises impressions de l'article sont, selon moi, tout à fait réglé aujourd'hui)
http://www.alsacreations.com/astuce/lire/996-amelioration-progressive-modernizr-et-selecteurs-css.html
Modifié par Vaxilart (28 Dec 2011 - 08:48)
super merci pour toutes ces précisions c'est très clair maintenant, je peux refaire mon site en html5 et css3 Smiley smile
Sujet clos
Aller à