Perspectives de mise en page css avec des tables
Billet initialement publié sur le blog de Clever Age : Perspectives de mise en page css avec des tables.
Derrière ce titre accrocheur se cache une propriété CSS qui fait beaucoup parler d’elle ces derniers temps, et pour cause, on va bientôt pouvoir l’utiliser pour de vrai : display:table;.
Historique de la mise en page
Il y a encore de cela quelques années, la grande majorité des sites web qui sortaient des agences étaient mis en pages avec des <table>. Cette balise HTML a l’avantage de grandement faciliter la conception de site en plusieurs colonnes, plusieurs parties, et ont des propriétés difficiles à reproduire avec des div flottantes.
On faisait des sites, ils fonctionnaient bien. Mais cette solution avait quand même ses défauts :
- même pour un design simple, il était souvent nécessaire d’imbriquer plusieurs tableaux
- le code devenait vite illisible, au vu du nombre de balises html nécessaires(des
<table>,<tr>,<td>, ou encore<thead>,<th>…) - beaucoup de code signifie aussi beaucoup de bande passante
Mais le vrai problème, ce sont les standards et la sémantique. Un beau jour on s’est rendu compte qu’une table, ça ne servait pas à mettre en page, mais à présenter des données tabulaires. On s’est alors démené pour changer nos habitudes, et concevoir des sites accessibles, standards et à la sémantique cohérente [1].
La solution la plus souvent utilisée (ici même par exemple) pour concevoir un site en colonne (un menu, un contenu et un autre menu optionnel) se nomment le float et son ami le clear.
Technique éprouvée, mais franchement pas idéale, elle montre ses limites en de nombreuses circonstances : qui ne connait pas le Three Pixel Text Jog [2] ou le Doubled Float Margin [3] ? (Des combos uniquement disponibles sous IE)
Cette technique nous oblige aussi à ruser pour avoir visuellement des colonnes de même hauteur. En réalité, les colonnes de ce type site ne sont pas aussi longue que le contenu, on a mis une image en fond pour vous le faire croire [4] !
Elle a aussi la fâcheuse tendance à ne pas être à toute épreuve (si un contenu venait à être plus large que son conteneur, bonjour les dégâts).
Citons aussi la technique « position:absolute », moins problématique mais beaucoup moins souple (il y a aussi cette technique mais je ne la conseille pas :P).
Bref, avec les tables, c’était mieux et c’est là que display:table; intervient.
La propriété display:table;
Apparu dans la première version de CSS2 [5] (c’était il y a 10 ans au moins !), avec tous ces petits amis (inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, mais on ne les verra pas en détails ici), l’implémentation de cette propriété dans les navigateurs web s’est faite très tard, et le couple IE6/IE7 ne la supporte pas [6] (46% de part de marché en octobre 2008 [7], on ne peux pas passer outre).
La bonne nouvelle, c’est le support complet de cette propriété dans IE8 beta 2 (en mode IE8). Si si bonne nouvelle, parce que d’ici trois ans on pourra peut-être enfin l’utiliser à tout va :D
En attendant, petit rappel du fonctionnement global de la propriété.
On va prendre l’exemple le plus utile, un layout en 3 colonnes avec un footer.
La solution à base de flottant est simple et rapide à coder, cependant si je veux que mes colonnes aillent toucher le footer, je suis obligé de tricher (image de fond à la place du fond gris clair) ou d’utiliser du Javascript.
Alors qu’en reprenant exactement le même code HTML, et en changeant juste un peu de CSS (on remplace les float:left; par des display:table-cell;) on est bon !
Pour visualiser ces pages web, cliquez sur les images (et utilisez un navigateur respectueux des standards).
Ce qui est magique avec ces propriétés c’est que nous ne somme pas obligés d’utiliser le display:table; et le display:row; avant d’avoir un display:table-cell;, en effet un tableau « anonyme » se place en parent des table-cell automatiquement. Ce dernier se charge d’englober les cellules qui se suivent dans la même ligne, les lignes qui se suivent dans le même tableau.
On pourrait trouver encore de nombreuses applications, les tableaux ont des propriétés vraiment intéressante (le vertical-align qui permet d’aligner n’importe quoi verticalement par exemple).
Est-ce vraiment utile et pouvons-nous l’utiliser ?
Comme je le disais en introduction, ces propriétés ne fonctionnent pas sous IE<8, bien sûr il existe des alternatives à base de hack mais elles sont complexes et difficiles à mettre en place, KISS [8].
Utiliser la magie des propriétés de table est techniquement envisageable (on peut tout à fait imaginer utiliser les floats pour IE, et garder les display:table; pour les navigateurs récents, mon code HTML est strictement le même pour les deux cas), mais cela relève plus d’un exercice de style pour site personnel que d’un choix pertinent. Utiliser cette technique à l’heure actuelle sur un site professionnel serait une perte de temps (et d’argent). En effet, le gain de temps acquis grâce à la souplesse de cette solution serait aussitôt perdu dans les tentatives de compatibilité avec IE en versions inférieures à la version 8.
En attendant la mort complète et définitive d’IE6 et d’IE7, ne changez pas vos habitudes : la mise en page reste un casse tête :D et la solution à base de floats (ou d’absolute, selon les gouts) a encore de beaux jours devant elle.
La vraie révolution de la mise en page en CSS pointera le bout de son nez avec CSS3, et permettra de définir nos layouts en ASCII !
[1] Pas convaincu ? shouldiusetablesforlayout
[2] Le bug du Three Pixel Text Jog
[3] Le bug du Doubled Float Margin
[4] Technique du Faux Columns
[5] La spécification W3C
[6] Détails de la compatibilité
[7] Les statistiques de W3schools