Bert Bos | CSS : hier, aujourd’hui et demain
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Un atelier pour
Sud Web 2012
Toulouse (France)
9 May 2012
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Partie 1
Le navigateur que j'avais implementé moi-même, ainsi que tous les logiciels capables d'analyser du SGML (et donc du HTML) que je connaissait, modelaient HTML comme un arbre. Le code de Netscape (que je ne connaissait évidemment pas) n'était pas du tout comme ça: les programmeurs ne connaissaient pas SGML. Tout ce que nous pensions être facile (des éléments qui héritent de leur parent, pas de différence entre du HTML avec des balises implicites et des balises explicites, etc.) était soit très dur, soit impossible.
C'était Microsoft, en tant que challenger, qui implémentait CSS1 en premier.
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Partie 2
CSS: extensible, backward-compatible (on ajoute des fonctions, on ne supprime rien) tests
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Partie 3
Historically, the first time this was proposed, the outcome was absolute positioning. Not quite what the inventors (Dave Raggett, Håkon Lie and myself) wanted, but the only possibility in those days of browser wars and immature browser technology.
In 2004, the Device Independence Working Group was looking for a standard way to easily create layouts for different screen sizes: varying the number of columns, creating designs that resemble “stacks of cards”, and capturing the idea of a “portal” (several independently authored mini-documents assembled into a single layout).
Its members had been relying on proprietary HTML postprocessors, but because those had to run on the server, what went over the “wire” was non-semantic HTML. They were hoping the layout could be done with CSS instead. And so we revived the old idea of templates (originally called “frames,” before Netscape adopted that name for something else).
Discussions in the CSS WG led to dropping (for now) the stack-of-cards idea, for lack of immediate interest from members of the CSS WG. (In 2012, a solution for card deck layout is still missing…)
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
A demo by Jina Bolton
(Prototype par César Acebal.)
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Au lieu de créer des régions avec un gabarit, on peut aussi considérer que les colonnes qui existent déjà dans CSS créent suffisamment de régions et il suffit de peu d'extensions pour pouvoir positionner les éléments relatives aux colonnes. Dans GCPM, des mots clés nouveaux pour 'float' permettent justement de positionner un élément en haut d'une colonne.
Par contre, il est moins évident comment aligner les quatre photos, qui sont de taille différentes.
Si on pense que trouver des solutions dans CSS serait trop difficile sans transformer le code HTML d'abord, on peut prendre XSLT, par exemple, et réorganiser le document pour qu'il ait quatre éléments correspondants aux quatre colonnes avec à l'intérieur les éléments déjà dans le bon ordre. Ensuite, un modèle de mis en page simple, comme les flexbox, suffit.
Pour aligner le dernier paragraphe en bas, le groupe de travail CSS pense maintenant qu'il est possible de introduire quelque chose comme le 'margin: auto', mais pour la direction verticale…
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
L'inversion de couleur au dessus de la photo sera peut-être possible avec les filtres graphiques qui sont en étude.
L'article en haut à droite peut être vu comme une seule zone avec trois colonnes à l'intérieur. Dans ce cas, la photo doit s'étendre sur deux colonnes ('column-span: 2'). C'est une possibilité qui est à l'étude dans le groupe CSS.
On peut aussi y voir quatre zones, dont trois sont enchaînées pour former un seule flux: la 2ème prend le trop-plein de la 1ère, la 3ème le trop-plein de la 2ème. La 4ème zone est réservée à la photo.
Si on ne sais pas à l'avance quelle fonte sera utilisé, on ne peut pas créer une bande avec la hauteur exacte d'un chiffre dans cette fonte. Par contre, avec les WebFonts, on peut faire télécharger une fonte précise.
Le crénage dans le titre courant entre « actualités » et « temps » ne peut pas être automatiques, sauf si nous donnons à CSS la possibilité des créer des éléments qui ne sont pas rectangulaire, mais ont la forme exacte de leur contenu.
Four que le texte remplit la dernière colonne jusqu'au bout, il faut qu'il y de la flexibilité quelque part: dans l'espace entre les paragraphes, dans la hauteur de la photo, dans l'espace entre les mots… (Par exemple, TEX a la possibilité de créer des espaces élastiques.)
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
float: top
next-column?) ✔?
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
::slot(a) {writing-mode: vertical-rl}
::slot(b) {writing-mode: horizontal}
Difficile à modeler avec des colonnes, mais faisable avec des chaines de régions.
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Manuscrit du 13ème siècle
"aaaaaa.bbbbb" "aa.........b" "aa.c.d.e.f.b" "aa.c.d.e.f.b" "aa.c.d.e.f.b" "aa.........b" "aaaaaa.bbbbb" "aaaaaa.bbbbb"
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
@page p15 {
grid: "ABBCCC"
"ABBCCC"
"ABBCCC"
"DEEFFF"
"DEEFFF"}
}
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
http://www.w3.org/Talks/2012/0526-CSS-SudWeb
Pour Développer le potentiel du Web
Pour Anticiper les évolutions technologiques
Pour Augmenter la valeur et visibilité de votre organisation
Rejoigner le W3C
http://www.w3.org/Consortium/join
ou contacter : Bernard Gidon <bgidon@w3.org>
Bert Bos <bert@w3.org>
GPG fingerprint:
7744 0204 52A5 14D9 147D
2A13 2D7A E420 184B 5BA4
Robert Cailliau écrivait dans la préface du livre de Håkon et moi combien c'était libérateur de ne plus avoir à penser à la mise en page, grâce à HTML, et de se concentrer seulement sur la structure. Les designers évidemment ne se sentaient pas si libérés par HTML. Et probablement il y avait aussi des lecteurs qui se sentaient perdus avec du texte pur pour lequel il fallait trouver une forme soi-même.
Séparer le style (CSS) et la structure (HTML) offre le meilleur des deux mondes: l'auteur peut proposer un style (ou même plusieurs) s'il le souhaite, mais le lecteur n'est pas obligé de l'utiliser. Et, en fait, comme lecteur, je supprime assez souvent le style.