CSS 3 : des templates pour structurer vos pages web

Voilà une annonce qui risque de faire grand bruit : le W3C vient de publier une nouvelle version de travail des spécifications des CSS 3 dédiées à la mise en page : CSS3 Advanced Layout Module. La grande nouveauté vient du principe de construction de page reposant sur des gabarits (template en anglais).

Le principe consiste à découper une page en grandes zones qui vont accueilir du contenu. Dans l’exemple qui suit, 4 zones sont identifiées : en-tête (a), colonne de gauche (b), corps de page (c) et colonne de droite (d) :

Le principe de gabarit des CSS 3

La structure générale de la page sera construite selon un modèle de grille à l’aide de la propriété display-model qui s’apparente à la construction d’un tableau. Une fois cette structure générale définie, les différents éléments qui la constitue vont venir s’incruster dans ces zones à l’aide de la propriété position (ex : h1 {position: a;}).

Révolution ? Oui, ça a tout l’air d’une révolution dans la mesure où les propriétés CSS se substituent au travail des outils de gestion de contenu qui jusqu’alors avaient en charge la gestion des gabarits.

Je ne sais pas comment tout ceci va être accueilli par la communauté des développeurs mais je suis sûr d’une chose : les mises en page à l’aide de tableaux sont condamnées, la sentence vient de tomber aujourd’hui.

Un commentaire sur “CSS 3 : des templates pour structurer vos pages web

  1. Ha oui je te confirme que c’est génial. Les CSS 3 vont ouvrir un nombre de possibilités tout simplement gigantesque. Les développeurs s’étant investis dans cette technologie vont enfin voir leurs efforts récompensés car avec la complexification des propriétés, le développement de CSS va devenir un vrai métier reconnu. /Fred

  2. C’est vrai que je prends de plus en plus de plaisir à faire mes sites web et tout ce qui est en train d’être fait par le W3C a l’air super. Même si Firefox permet quelques petites choses avec CSS3, il va falloir attendre encore longtemps avant que tous les modules de CSS3 soient des spécifications terminées et qu’on puisse les utiliser.

  3. Oui enfin bon il serait peut-être temps qu’ils se bougent le c… chez W3C parce que ça fait des années qu’on a ce genre de gestionnaire de layout dans les API graphiques côté client (cette spécification ressemble à une pale copie du GridBagLayout de Java/Swing), et surtout on trouve ce genre de possibilité dans la plupart des frameworks de développement d’interfaces enrichies (OpenLaszlo pour citer un exemple que je connais un peu). Enfin pour moi ils ne vont ni assez loin, ni assez vite (vous avez dit lenteur et conservatisme des standardisations et des processus de comités ?) : notamment on n’a toujours pas la possibilité de définir des variables ou des constantes globales dans les styles (pour éviter d’avoir à recopier une valeur de couleur dans 36 classes par exemple) et surtout, le plus grave, on mélange encore et toujours le layout et le style. Bref, je reste sur ma position : le CSS c’est encore la moins pire des solutions, mais c’est bien loin d’être la meilleure.

  4. tant que les navigateurs ne gèrent pas le CSS3 à quoi bon ! Dîtes-moi si je me trompe ! Quels sont les navigateurs capables de gèrer actuellement ce genre de truc ! Ne risque-t’on pas de complexifier la création de site internet ? N’oublions pas que plus c’est simple plus c’est utilisé regardez le tire bouchon :-)

  5. D’accord avec toi Elucubrations, mais il y a d’autres méthodes de simplification que le tout textuel. Rien n’empêche d’enrichir et de complexifier un peu la syntaxe si dans le même temps on propose les bons outils pour manipuler ça dans une forme un peu plus intuitive. Et c’est le problème de trop nombreux langages liés au Web à mon goût. On a voulu faire le plus simple possible en partant du principe qu’il fallait que ça soit éditable dans le bloc-notes. Du coup on a démarré avec un truc simple même si c’était pas très riche, et maintenant à chaque fois qu’on veut enrichir les possibilités, on souffre du choix initial et on bafoue complètement l’objectif de simplicité. Perso, pour faire la mise en page de mes sites, je préfèrerais un bel outil WYSIWYG qui me permet de disposer mes éléments visuellement avec des possibilités très riches, même si le langage pour représenter tout ça dans un fichier texte est complètement illisible par un oeil humain. Bref, à quand un vrai langage de layout-ing en XML avec un bon éditeur visuel ? Ah ben non je suis bête : c’est pas standard ! :P

  6. Bonsoir, Je ne sais pas si quelqu’un pourra comprendre mon message écrit grace à une technologie xhtml 10.1 et css5 mais en tout cas sachez que aujourd’hui tous les navigateurs comprennent ce nouveau code : IE 12, FIREFOX 10, … C’est génial. Allez je vous laisse en espérant que Fred Cavazza à toujours son Blog ( je sais qu’il est tjrs au courant des derniers trucs en matière de technologie web) Au fait, de nos jours le web est gratuit pour toute la galaxie. Philippe, Terre, le 16 décembre 2014 Merci pour cette info Fred

  7. Sebastion : « et surtout, le plus grave, on mélange encore et toujours le layout et le style. » corrige : TU mélanges encore et toujours le layout et le style. Il suffit juste d’un peu d’organisation dans tes feuilles CSS, et de profiter au maximum de la « cascade ». Qui t’obliges à ne pas mettre dans une CSS uniquement les propriétés CSS pour le layout, et dans une autre, uniquement les propriétés CSS pour le design ? Et puis, c’est bien beau de raler sur les défauts de CSS, mais il ne me semble pas avoir vu tes propositions sur la mailing-list publique de CSS ;-) Les specifications, c’est pas seulement 3-4 ingénieurs qui les font dans leur coin, c’est aussi grâce aussi aux utilisateurs quand ils proposent des évolutions, font part de leur problème etc…

  8. À noter qu’il y a déjà des trucs de cette spec qui sont en parti implémenté dans dans Firefox comme les stacks, box-align, box-flex, box-sizing, box-flex. Qui fait du XUL utilise déjà tout ça ;-) (-moz-box-flex, -moz-box-align etc..voir http://xulfr.org/wiki/Reference/Css ) Par contre, l’histoire des templates, la façon dont c’est présenté, je trouve ça trés bof, et je doute de la facilité à implementer ceci. J’ai l’impression que le type qui a pondu les templates n’a pas pensé à l’implementation…

  9. Mais LaurentJ, je persiste et signe : CSS en tant que langage propose la même syntaxe pour la layout et le style. Alors après bien sur, rien n’empêche de séparer tout ça dans deux feuilles de style, mais ça n’améliore en rien le fait que (1) CSS n’est vraiment adapté ni à l’un ni à l’autre et (2) avec quelques bricolages volontaires et beaucoup d’huile de coude, on peut tout faire, même des soit-disant superbes designs CSS (j’avais fait un billet là-dessus à propos de l’arnaque de CSSZenGarden). Quand à tenter de réformer le système de l’intérieur en passant par la mailing-liste, ça me fait doucement sourire : dans W3C il y a consortium, et le jour où les développeurs dans leur coin auront ne serait-ce qu’un tout petit peu d’impact sur ces comités, on le saura. Celà étant dit, je vais y aller jeter un oeil sur cette mailing-liste tiens, ne serait-ce que par curiosité… (je ne savais même pas qu’elle existait :oP)

  10. sebastien, je trouve cette remarque On a voulu faire le plus simple possible en partant du principe qu’il fallait que ça soit éditable dans le bloc-notes. Du coup on a démarré avec un truc simple même si c’était pas très riche, et maintenant à chaque fois qu’on veut enrichir les possibilités, on souffre du choix initial et on bafoue complètement l’objectif de simplicité. très interessante! Je suis même d’accord avec toi, sauf sur le fait de bafouer la simplicité. Les css restent un moyen facile, accessible à beaucoup de monde…On ne peut pas les comparer à des frameworks de développement d’interfaces enrichies.. C’est une question de public cible… Je vois les standards comme un outil accessible à un bon nombre de personnes… et c’est normal de se réjouir de l’arriver de nouveaux outils même si on sait que c’était déjà fesable ailleurs avec un peu plus de connaissance… Au passage très chouette ce blog, ==> bookmarks

  11. > Quand à tenter de réformer le système de l’intérieur en passant par la mailing-liste, ça me fait doucement sourire : dans W3C il y a consortium, et le jour où les développeurs dans leur coin auront ne serait-ce qu’un tout petit peu d’impact sur ces comités, on le saura. Tu avoues toi même que tu ne connaissais pas ces mailing-list, et tu oses dire une chose pareil ? Quand on ne sait pas, on se tait, on ne critique pas, et on se renseigne (par exemple, sur le fonctionnement du W3C parce que tu sembles ne pas y connaître grand chose apparement) Bien sûr que oui que les développeurs externes peuvent influencer (et note que je n’ai pas dit « reformer », tu as déformé mes propos). Donner son avis ne coûte rien, juste un peu de temps. Mais bien sûr, il faut proposer des choses concretes, argumentées, montrer que l’on sait de quoi on parle, bien avoir lu les WD ou les specs existantes etc.. Et aussi ne pas critiquer sans expliquer pourquoi. Parce que là, tu critiques CSS, mais tu proposes quoi à la place ? Qu’est ce qu’il faudrait faire pour séparer le layout et le style ? et d’abord pourquoi il faudrait séparer le layout et le style ? Ces deux choses sont intimement liées, et je doute que les séparer apporterait quelque chose de mieux.

  12. Bon eh LaurentJ on se calme d’accord ! Les redresseurs de torts donneurs de leçons ça va aller. Oui je critique, non je n’ai rien de mieux de concret et d’argumenté à proposer, et ce n’est pas à moi de le faire de toute façon. Quand tu as un problème avec ta voiture, tu appelles le constructeur pour qu’il modifie la conception du véhicule ? Non. Bon ben là c’est pareil : je me place du point de vue de l’utilisateur de CSS, c’est-à-dire du modeste développeur Web, et je dis « c’est pas génial ! » Point barre. Et pour ce qui est de l’état d’esprit participatif à la « arrête de raler et propose », il faut aussi savoir rester humble et reconnaitre que je manque carrément et d’expérience, et de temps, et de connaissances pour proposer. Mais ça ne m’empêche pas d’avoir mon opinion d’utilisateur. Et puis si je devais participer aussi activement à l’élaboration de tous les outils logiciels que j’utilise, je n’aurais pas fini, d’autant que ça semble très à la mode en ce moment cette technique douteuse qui consiste à mettre en place des processus collaboratifs volontaires pour concevoir des outils à moindre coût tout en masquant sous couvert de démagogie une incapacité notoire à s’adapter aux évolutions de la technique (cf. JCP pour Java par exemple). J’en viendrais presque à regretter le bon vieux temps où l’innovation prenait le pas sur la standardisation, parce que je préfère encore perdre du temps à m’adapter à des technologies différentes mais qui progressent, que de participer à des processus d’élaboration de standards illisibles et sclérosés où je n’ai qu’une influence minime. Et pour finir sur une affirmation dénuée de fondement comme je semble en avoir le secret en paraphrasant une vieille pub : « les standards c’est bien, en abuser ça craint ! »

  13. Du calme du calme, ne nous fâchons pas ! Je suis fermement convaincu que ce principe de template est une très bonne idée… qui doit mûrir et suivre les avis de ces futurs utilisateurs. En gros, vous avez tout les deux raison ! Pour ce qui est des petits commentaires cyniques sur la date de « mise en service » de ces CSS 3, je répondrais que à l’époque où les premières spécifications des CSS 2 ont été publiées, les commentaires devait être à peut près les même. Moralité : il faut bien commencer un jour. /Fred

  14. > Bon eh LaurentJ on se calme d’accord ! Mais je n’étais pas faché, je soulignais juste l’incohérence et l’inexactitude de tes propos et attaques injustifiées… C’est toujours si facile de râler et de critiquer… a+

  15. Technologie d’avance (grâce aux retardataires ?) – On va pouvoir remercier microsoft de nous laisser un peu de temps d’apprendre le css3. Et oui, son prochain navigateur va peut être commencer à considérer le css2 et nous permettre d’utiliser des fonctions pratiques. Non, ne jettez pas de tomates ! En gros, grâce à Bill, on va devoir encore attendre avant d’utiliser le tant attendu css3. A moins d’un changement de mentalité soudain : tous avec firefox !

Laisser un commentaire