Tous les articles

Quoi de neuf du côté des mises en page CSS (CSS Layouts) ?

Par Eric Le Bihan

Vous avez certainement lu comme moi, que tout ce que vous saviez sur les css étaient faux en lisant l’article de Digital Web par Rachel Andrew. Je n’ai pas lu le livre, mais à la lecture de l’article j’ai voulu tester une nouvelle manière de mettre en page mon code html. Avec l’arrivée d’IE8, on va pouvoir enfin utiliser les propriétés CSS display:table, display:table-row et autres display:cell. Et je me pose la question suivante : à quoi servent réellement ces propriétés ? Parce que si on a bataillé, argumenté et convaincu des dizaines de personnes que les tableaux c’est mal, c’est pas pour simuler des tableaux en CSS ! Justement l’auteure nous réponds à ce sujet :

L’élément table en HTML est une structure sémantique, il décrit des données. Par conséquent, l’élément table est à utiliser uniquement pour des données tabulaires, par exemple un tableau mettant en forme des informations financières. Ces informations seraient normalement stockées dans une feuille de calcul sur votre ordinateur, il faudrait probablement un tableau pour les présenter en HTML.

La valeur table de la propriété display, d’un autre côté est simplement une indication de la présentation à afficher dans le navigateur – elle n’a pas de signification sémantique. Utiliser un élément table pour votre mise en page donne l’information suivante au user-agent : ces données sont tabulaires. Utiliser plusieurs divs qui ont la propriété display avec les valeurs table ou table cell, ne dit rien de plus au user agent que demander de les rendre visuellement d’une certaine façon, s’il en a la capacité.

Donc pas de problème, du moment que notre code html reste sémantique, on peut y aller ?

Quels sont actuellement les moyens dont nous disposons pour mettre notre code html en forme ?

  1. Mise en forme à l’ancienne

    Il y a quelques années (au temps de netscape 4 et IE 5.5), j’aurais fait (à peu près) une mise en forme de ce style :

    Mise en page en tableau

  2. Mise en page avec des éléments flottants *

    Pour moi la façon la plus fluide de mettre une page en forme, et qui permet beaucoup de flexibilité.

    Mise en page avec des divs flottants

  3. Mise en page avec des éléments en absolu *

    Pratique dans certains cas mais je ne la conseillerais pas, trop figée pour des sites qui évoluent en permanence.

    Mise en page avec des éléments en absolu

  4. Mise en page avec des display:table

    L’article de Digital web présente cette façon de faire. En lisant l’article, ça a l’air simple. Bon sang, mais c’est bien sur ! Pourquoi n’avions nous pas pensé à cette façon de faire plus tôt ? Bon, ok, on l’oublie à cause d’IE6, mais parfois on aime bien se projeter dans le futur et essayer de nouvelles choses, juste pour le sport… Je reprends donc mon design minimaliste : un header, une colonne de gauche, une colonne de droite et un footer. Simple. Je me base sur mon intégration old school et essaie d’appliquer la méthode vue dans l’article cité ci-dessus. Pas besoin de reprendre l’intégralité du code des tableaux (thead, tbody, tfoot, tr, etc…) puisque les éléments manquants sont créés virtuellement par le navigateur.

    Une esquisse de résultat…

Essayons maintenant de faire un colspan… hum, comment fait-on ? Puisque les propriétés du tableau sont définies en CSS et pas en HTML ? Après maintes recherches je déclare forfait. Avez-vous la réponse ?

En reprenant l’article, je me rends compte que ce n’est pas évoqué. Les seuls cas envisagés sont simples voire simplistes. Ok pour un site perso, mais ce n’est vraiment pas adapté pour un environnement professionnel. Loin de révolutionner notre façon d’utiliser les CSS, cette démonstration reste pour moi rien de plus qu’un exercice de styles…

On devra certainement attendre longtemps avant de voir arriver des CSS spécialement dédiés à la mise en forme de page web, en attendant vous pouvez toujours aller voir le document de travail Advanced Layout du W3C.

* Des tas d’exemples de mise en page sur les sites suivants :

http://layouts.ironmyers.com/100_percent_Layouts/
http://blog.html.it/layoutgala/
http://sherina.blogsome.com/2008/07/29/10-css-layout-demos/
http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates
http://css-discuss.incutio.com/?page=CssLayouts
http://www.free-css.com/free-css-layouts/page1.php
http://www.code-sucks.com/css%20layouts/faux-css-layouts/
http://www.free-css.com/free-css-layouts/page1.php

Article rédigé par , publié le dans la catégorie Front-end. Vous pouvez suivre les commentaires de cet article en utilisant le flux RSS dédié. Les commentaires sont fermés sur cet article.

Tags :

5 commentaires

Flux RSS des commentaires de cet article

Pour ma part, j’utilise principalement les flottants pour la mise en page, avec quelque fois des positionnements absolus à l’intérieur de certains blocs positionnés en relatif.

Comme je m’attache principalement à utiliser des fonctionnalités qui passent partout, je ne me suis pas encore vraiment penché sur ces nouvelles options de display.

Amha, ça ser(vira) surtout à équilibrer des colonnes entre elles… Enfin, dans quelques années ^^

Le 13 Nov. 2008 à 15h31 par bruno bichet

Un des intérêts de « display:table / display:table-row / display:table-cell » c’est de pouvoir se passer de l’astuce des Faux Columns.
Cela permet aussi de centrer verticalement les éléménts d’un bloc avec une grande facilité.

Le 17 Nov. 2008 à 17h59 par ellm

«Pour ma part, j’utilise principalement les flottants pour la mise en page, avec quelque fois des positionnements absolus à l’intérieur de certains blocs positionnés en relatif.»

On en est tous là et c’est relativement robuste en faisant les choses bien. Satisfaisant, mais parfois limité ou posant trop de contraintes sur l’agencement du code HTML. Ceci dit, je me tiens aussi éloigné que possible des techniques ayant un air de «black magic», telle que le One True Layout. J’arrive plus ou moins à les comprendre et à les appliquer, mais la plupart des personnes qui seraient amenées à intervenir sur mon code n’ont pas mon expertise, qu’ils soient designers ou développeurs. Et même pour les intégrateurs un peu pointus, ça peut être casse-gueule.

C’est cet aspect «magie noire», qui a bizarrement fait recette parmi les webdesigners anglosaxons, qui sert de base à l’argumentation des auteurs de «Everything You Know About CSS Is Wrong!» pour nous vendre leur bouquin présentant une technique ô combien plus simple et naturelle que l’existant (c’est à dire que ce qui est possible avec IE 6-7).

Pour moi (et vous aurez remarqué l’habile transition du précédent paragraphe), le titre de ce bouquin et au moins son introduction (pas pu lire le reste, qui est sans doute très correct) est putassier.

display:table et compagnie, c’est très bien, c’est génial, et ça manque. Ça a des applications intéressantes, car ça permet d’obtenir deux choses difficiles ou impossibles autrement:

1. Une répartition automatique des contenus ou au contraire une adaptation du conteneur au contenu (comportement des tableaux et cellules de tableaux), illustrée par exemple ici: http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Adapter-legende-largeur

2. Des blocs adjacents de même hauteur.

Mais, au moins dans leur présentation et leur marketing, les auteurs de ce livre:
1. exagèrent la difficulté d’emploi des outils actuels (flottants notamment), en faisant référence à la «black magic» de certaines techniques au lieu d’évaluer correctement les usages «normaux» (opération le passé c’est de la merde);
2. annoncent display:table comme quelque chose de radicalement nouveau (alors que c’est spécifié en 1998 et que ça peut être expérimenté depuis des années… dix ans de retard, hé!);
3. passent sous silence les problèmes posés par le rendu de type tableau (contenu qui fait exploser les «cellules», problème de performance du table-layout:auto, imprécision du table-layout:auto, et bien sûr disposition inféodée à l’ordre des éléments dans le flux.

Donc rien de révolutionnaire ni dans l’existence de display: table(-*) (1998!), ni même dans sa future disponibilité.
(En passant, display:inline-block n’est pas inintéressant non plus. Ce mode de rendu permet de résoudre un certain nombre de cas d’école.)

Enfin, le titre «Everything You Know About CSS Is Wrong!» démontre un bon sens marketing mais une grosse méconnaissance d’un des fondements de CSS: le fonctionnement par niveau et l’ajout de couches de fonctionnalités. Même Advanced Layout (qui, s’il tient ses promesses, sera effectivement un grand changement) n’annule pas l’existant, au contraire! À mon avis, les auteurs n’ignorent pas cet aspect fondamental, mais ont préféré le titre marketeux. D’où le choix de mon adjectif, «putassier».

Le 09 Déc. 2008 à 22h10 par Florent V.

Les commentaires sont fermés sur cet article.