Alsacreations.com - Apprendre - Archives (octobre 2012)
Les dernières ressources publiées sur Alsacreations.com
Positionner correctement des éléments en CSS s'est toujours révélé être une mission aussi palpitante que fastidieuse en raison d'un lourd passé de navigateurs assez peu enclins à suivre des standards communs. Depuis sa création, CSS propose officiellement quatre types de rendus d'éléments :
- Le rendu "bloc"
- Le rendu "inline"
- Le rendu "tabulaire"
- Le rendu "positionné"
Chacune des valeurs de la propriété display (par exemple inline-block), de float, ou de position, renvoie à l'un de ces quatre types de rendus.
CSS3 étend ce périmètre en introduisant un nouveau modèle de boîte "flexible" : Flexbox, ou Flexible Box Layout Module.
Flexbox est un nouveau mode de positionnement, introduit via la propriété display, permettant de créer un contexte général d'affichage sur un parent et d'en faire hériter ses enfants :
- Distribution en bloc ou en ligne,
- Alignements horizontaux et verticaux,
- Gestion des espaces disponibles (fluidité à l'instar des cellules de tableau),
- Réorganisation des éléments indépendamment de l'ordre du flux (DOM).
Compatibilité de Flexbox module
Commençons par calmer les plus optimistes d'entre vous et ceux que je vois déjà en train de se ruer sur leur éditeur HTML préféré. Posons d'entrée le décor ; j'ai deux bonnes et une mauvaise nouvelle :
- La première bonne nouvelle est que les spécifications concernant Flexbox sont au stade de "Candidate Recommandation" et peuvent être aujourd'hui considérées comme stables.
- La seconde bonne nouvelle est que l'implémentation de Flexbox sur les navigateurs est "relativement correcte", comme en témoigne l'excellente ressource Caniuse.
- La mauvaise nouvelle est que les spécifications ont radicalement changé plusieurs fois et que les navigateurs compatibles sont susceptibles de reconnaître l'une ou l'autre des versions des spécifications, parfois de manière incomplète, et - bien entendu - avec moults préfixes de partout !
Malgré ces quelques petites embûches, consolez-vous en vous rappelant notamment que dans le monde du Web mobile, les navigateurs récents sont déjà parfaitement prêts à afficher vos sites web dans ce mode de positionnement avant-gardiste.
Tableau des compatibilités
| Navigateurs | Versions | Détails |
|---|---|---|
 |
Internet Explorer 10+ IE mobile 10+ |
Ancienne spécification. Avec préfixe -ms- |
 |
Firefox 2+ | Ancienne spécification. Avec préfixe -moz- |
 |
Chrome 4+ Chrome Mobile (Android 4+) |
Ancienne spécification depuis Chrome 4. Avec préfixe -webkit- Spécification finale depuis Chrome 21. Avec préfixe -webkit- Ancienne spécification pour Chrome sur Android. Avec préfixe -webkit- |
 |
Opera 12.1+ Opera Mobile 12.1+ |
Spécification finale. Sans préfixe |
 |
Safari 3.1+ |
Ancienne spécification. Avec préfixe -webkit- |
 |
Android Browser 2.1+ | Ancienne spécification. Avec préfixe -webkit- |
Des spécifications fluctantes
Comme vous l'avez judicieusement constaté à la lecture attentive du tableau de compatibilité, la spécification de Flexbox a connu différentes étapes de syntaxe et nommage. Il y a eu trois syntaxes très différentes au cours de l'évolution de ce module :
| Syntaxe 2009 | Syntaxe 2011 | Syntaxe 2012 (finale) |
|---|---|---|
| display : box | display : flexbox | display : flex |
| box-flex | flex | flex |
| box-ordinal-group | flex-order | order |
| box-orient | flex-direction | flex-direction |
| box-pack + box-align | flex-pack | justify-content + align-items |
Pour des raisons pratiques évidentes, nous nous contenterons des syntaxes standardisées et sans préfixes au sein de cet article, il vous incombera de rajouter tous les préfixes constructeurs si vous désirez appliquer les exemples de codes sur votre navigateur préféré.
Appliquer Flexbox
Le principe général de Flexbox peut paraître assez déroutant de prime abord, mais finalement très pratique : il suffit de créer un "contexte de boîte flexible" sur un parent à l'aide de la propriété display afin qu'il soit appliqué à l'ensemble de ses enfants directs.
Tout au long de cet article et pour l'ensemble des exemples pratiques, nous avons choisi le navigateur Google Chrome, actuellement le plus à même de supporter cette spécification dans sa dernière version stable. Cependant, rien ne devrait vous empêcher de tester sur d'autres navigateurs.
En clair, la règle suivante va affecter les éléments enfants de .kiwi :
.kiwi {display: flex;}
Modifier l'orientation
L'un des premiers avantages de ce type de positionnement est de pouvoir jongler aisément entre une disposition d'éléments sous forme de colonnes (blocs) ou de lignes (inlines).
Pour ce faire, il suffit là encore d'indiquer ce comportement sur le parent à l'aide de la propriété flex-direction :
/* les enfants s'affichent en colonne */
.kiwi {flex-direction: column;}
/* les enfants s'affichent en ligne */
.kiwi {flex-direction: row;}
Démonstration flex-direction: column
Le suffixe -reverse inverse l'ordre d'affichage :
/* les enfants s'affichent en colonne inversée */
.kiwi {flex-direction: column-reverse;}
/* les enfants s'affichent en ligne inversée */
.kiwi {flex-direction: row-reverse;}
Démonstration flex-direction: column-reverse
Dans la lignée de flex-direction, signalons l'existence de la propriété intéressante flex-wrap.
Cette propriété autorise (ou non) les éléments à s'afficher sur plusieurs lignes lorsqu'elles dépassent de leur conteneur, les valeurs étant les suivantes :
-
flex-wrap: nowrap: les éléments demeurent toujours sur une ligne, et peuvent déborder -
flex-wrap: wrap: les éléments passent à la ligne plutôt que de déborder -
flex-wrap: wrap-reverse: les éléments passent à la ligne… en inversant leur direction
Démonstration flex-wrap: wrap-reverse
Pour votre culture personnelle, sachez qu'il existe une propriété raccourcie flex-flow qui regroupe flex-direction et flex-wrap.
Ne vous étonnez donc pas de rencontrer tantôt la syntaxe .kiwi {flex-flow: column;}
/* affichage en ligne et passage à la ligne autorisé */
.kiwi {flex-flow: row wrap;}
Gérer les alignements horizontaux et verticaux
Flexbox propose de gérer très finement les alignements et centrages, en différenciant les deux axes d'affichage de cette manière :
-
Les alignements dans l'axe principal sont traités via la propriété
justify-contentet ses différentes valeurs :flex-start,flex-end,center,space-betweenetspace-around -
Les alignements dans l'axe secondaire sont gérés avec
align-itemset ses valeurs :flex-start,flex-end,center,baseline,stretch
Exemple de centrage horizontal et vertical :
.kiwi {
justify-content: center;
align-items: center;
}
Alignement : gérer les exceptions
La propriété align-self offre la possibilité de distinguer un élément particulier de ses frères en adoptant un alignement différent.
Attention toutefois, cette méthode peut dans certains cas causer des soucis d'accessibilité lorsque la feuille de style est désactivée (Cf Accessiweb 2.2 critère 10.3).
.kiwi > li:last-child {
align-self: flex-end;
}
Autre astuce, la propriété margin et sa valeur auto permettent de positionner un élément en dehors de la distribution de ses frères.
Il devient donc possible d'afficher un groupe d'élément à gauche du parent et d'en placer un à droite :
.kiwi {
justify-content: flex-start;
}
.kiwi > li:last-child {
margin-left: auto;
}
Jouer avec la flexibilité des éléments
Cela ne devrait étonner personne, la notion de flexibilité constitue le fondement du module de positionnement Flexbox, et c'est là qu'intervient l'indispensable propriété flex.
La propriété flex est un raccourci de trois propriétés, flex-grow, flex-shrink et flex-basis, dont les fonctions sont :
-
flex-grow: propension pour un élément à s'étirer dans l'espace restant -
flex-shrink: propension pour un élément à se contracter si besoin -
flex-basis: taille initiale de l'élément avant que l'espace restant ne soit distribué
Les particularités des propriétés de flexibilité étant assez nombreuses (et leurs spécifications assez alambiquées), je vous propose un petit résumé explicatif simplifié :
Pour rendre un élément flexible, il suffit de lui attribuer une valeur de flex-grow (ou flex en raccourci) supérieure à zéro.
Cet élément occupera alors l'espace restant au sein de son conteneur :
/* .salade occupera l'espace restant */
.salade {
flex: 1;
}
Plusieurs éléments peuvent être rendus flexibles et se répartir l'espace restant.
Dans l’exemple ci-dessous, l’espace total est découpé en 4 (1+2+1), puis partagé entre les trois éléments selon le "poids" attribué à chacun. En l’occurrence, le troisième occupera la moitié de l’espace (2/4), les deux autres se partageant le reste par parts égales.
.salade {
flex: 1;
}
.tomate {
flex: 2;
}
.oignons {
flex: 1;
}
En ajoutant une valeur supplémentaire, celle de flex-basis, il est possible d'indiquer une largeur minimale préférée qui sera appliquée tant qu'il n'y a pas d'espace superflu :
.salade {
flex: 1 200px;
}
.tomate {
flex: 2 400px;
}
.oignons {
flex: 1 200px;
}
Réordonner les éléments au sein de leur parent
L'une des fonctionnalités les plus avant-gardistes du modèle d'affichage Flexbox est de pouvoir réordonner à sa guise chacun des éléments indépendamment grâce à la propriété order.
Les valeurs de order agissent telles des pondérations : les éléments dont la valeur est la plus forte se trouveront en bas de la pile. La valeur initiale de order est 0.
/* le premier de la liste s'affichera en bas de pile */
li:first-child {
order: 1;
}
Pour aller plus loin
Voici quelques ressources externes pour en savoir plus sur ce positionnement très polyvalent :
Articles et tutoriels connexes
- W3C : Spécification Flexbox Module
- Opera : Flexbox — fast track to layout nirvana?
- Benfrain.com : Understanding the CSS3 Flexbox
- css-tricks.com : "Old" Flexbox and "New" Flexbox
- smashingmagazine.com : CSS3 Flexible Box Layout Explained
- net.tutsplus.com : An Introduction to the CSS Flexbox Module
Alternatives
Il existe un outil de type polyfill en JavaScript afin d'émuler le support de Flexbox sur les anciens navigateurs tels IE6-IE9 et Opera 10. Il s'agit de Flexie.js. Vous pouvez le tester sur Flexie Playground. Sachez cependant que cette alternative JavaScript ne semble plus mise à jour depuis une bonne année et se base sur la syntaxe désuette de 2009.
Signalons également l'existence d'un outil de test de Flexbox en ligne : Flexplorer (à tester sur un navigateur compatible).
Conclusion
Flexbox est une spécification vaste et complexe, nous n'en n'avons démontré que les parties les plus exploitables mais d'autres recoins restent à explorer et seront dévoilés au fur et à mesure de leur support avec les navigateurs. Quoi qu'il en soit, le positionnement Flexible Layout regroupe de nombreuses bonnes pratiques et attentes des webdesigners et intégrateurs depuis de longues années. Dans un avenir proche (ou dès maintenant selon votre cible), il constitue sans aucun doute la méthode de positionnement la plus pratique et polyvalente.
Remarque finale : cet article est publié conjointement sur les sites OpenWeb et Alsacréations
jQuery Mobile est un framework dont le but est de simplifier le développement d'applications web multi-plateformes (cross-devices), et plus spécifiquement sur les mobiles ou tablettes. Comme son nom l'indique, il est basé sur jQuery, ainsi que sur HTML5 et CSS3.
Pour la petite histoire, jQuery Mobile a été annoncé le 13 Août 2010. La version 1.0 stable est sortie le 16 Novembre 2011. Au moment de l'écriture de ce tutoriel, la dernière version stable est la 1.2.0 (sortie le 2 Octobre 2012).
Ses atouts sont très nombreux, en voici les principaux :
- Une documentation complète et bien mise à jour est disponible : jQuery Mobile Doc.
- Une très grande facilité d'utilisation et d'apprentissage : il n'y a pas besoin d'énormément de connaissances ni d'efforts pour en tirer la substantifique moelle.
- Il est testé et a un rendu optimal sur de nombreuses plateformes mobiles, comme iOS, Android, etc.
- Il permet de créer des sites adaptés aux tablettes et aux smartphones (en responsive).
- Même si les styles sont facilement bidouillables, on peut (presque) totalement s'en passer, la base est très complète et bien pensée.
- Le look de jQuery Mobile peut facilement être modifié.
- Histoire de ne pas oublier l'accessibilité, ARIA est compris dans le tout ! :)
Plutôt que de répéter intégralement toute la documentation, je vous propose un cas pratique : à l'occasion de la Kiwi Partÿ édition 2012, j'ai présenté une mini-conférence sur jQuery Mobile avec pour exemple le site de la Kiwi Partÿ revu à la sauce jQuery Mobile. Nous allons donc voir les possibilités de jQuery Mobile à travers ce cas pratique !
