Bert Bos | CSS :
hier, aujourd’hui et demain
CSS : hier, aujourd’hui et demain
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Bert Bos (W3C) <bert@w3.org>
Un atelier pour
Sud Web 2012
Toulouse (France)
9 May 2012
Le programme de l'atelier
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- 1ère partie : le passé
- L'histoire de CSS
- La place de CSS dans l'architecture du Web
- Le champ d'application
- 2ème partie : le présent
- Le groupe de travail du W3C
- Les différentes façon de participer
- Développement et validation de technologies
- 3ème partie : l'avenir (discussion)
- Les priorités à court terme
- Quel sera la typographie de demain ?
- Développer, ajouter des compléments, remplacer ?
1993–1996 : les ambitions (1/2)
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
À partir de 1993, plusieurs personnes proposent que
l'auteur du HTML (et pas seulement le lecteur)
peut avoir besoin d'influencer la mise en page.
Robert Raisch, Pei Wei (ViolaWWW)…
Le navigateur Mosaic (fin 1994) offre moins de styles
aux lecteurs que les navigateurs précédents.
(Voir Cascading Style Sheets (2005) par Håkon Wium
Lie; et chapitre 20 de Cascading Style Sheets, designing for the Web (1999)
par Håkon Wium Lie & Bert Bos)
1993–1996 : les ambitions (2/2)
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
À partir de 1995, Netscape ajoute des éléments & attributs
stylistique propriétaires (font, bgcolor, center…)
En partie pour parer à cette tendance dangereuse pour le Web
sémantique, W3C organise en octobre 1995 un workshop à Paris
autour des feuilles de styles.
Le groupe de travail HTML commence à travailler sur CSS.
(Le groupe de travail CSS est séparé du groupe
HTML en février 1997.)
Les origines de CSS
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
CSS est basé sur CHSS (Håkon Lie, octobre 1994) et SSP (Bert
Bos, mars 1995)
- Équilibre auteur/lecteur (CHSS)
- Affichage progressif (incremental
rendering)
- Sélecteurs contextuels (SSP)
- Valeurs importés de l'environnement (CHSS)
- Hypertexte (SSP)
- Généralisation vers « SGML-lite » (SSP)
- Modularité (« cascading »)
Les deux niveaux de CSS
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
CSS niveau 1:
- un tout petit noyau de CSS,
- avec tous ce que Netscape pouvait déjà faire*
- plus quelques petits cadeaux (
background-image
,
background-attachment
…)
- afin de faire adopter CSS au plus vite.
CSS niveau 2 était le CSS que voulions réellement…
Les plans pour CSS2 (1/2)
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
L'ambition pour CSS (niveau 2) était à la fois modeste et trop
avancée pour l'époque :
- Typographie jusqu'à un niveau élevé :
césures, lettrines, veuves et
orphelins, reliure, grilles et maquettes
de pages*, téléchargement de polices,
ombres, « run-in, »
« compact »…
- Types de support : synthèse vocale, papier…
- Assez pour des documents de type HTML (« SGML-lite »)
Les plans pour CSS2 (2/2)
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Assez performant pour tenir dix ans (le temps de
développer un successeur)
- Compréhensible pour tout le monde (au moins tous les auteurs
de HTML).
- Mais pas pour des livres/documents complexes :
sommaire, index, spreadsheet, filtres & transformations
graphiques… (pour ça, nous attendions quelque chose comme
DSSSL, l'ancêtre de XSL)
- ni pour des GUIs (Java suffisait…)
Les groupes de travail
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Les normes W3C sont écrits par des groupes de travail
- Les organisations membres de W3C y envoient des ingénieurs
- Possibilité d'inviter des experts (Invited Experts)
- Listes de diffusion publiques
- Plusieurs autres types de groupes
- coordination, préparation, support…
- Community Group, Business Group, Coordination Group, Interest Group
le « Roadmap »
« roadmap » (feuille de route)
- Statut actuel des modules CSS
- Organisé plus ou moins par priorité
(mais les priorités peuvent changer…)
Hypothèse
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Pourvu que CSS offre un modèle et une syntaxe
simple, il est plus facile pour un auteur de
sauter la transformation (XSLT
ou autre)
L'idée de « gabarit » dans CSS
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Pas d'éléments correspondant aux régions de la page ?
→ créer des pseudo-éléments
- Ordre visuel ≠ ordre logique ?
→ utiliser une
propriété flow
L'histoire de « gabarit » dans CSS
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
1996 :
- Un seul gabarit par document (@-rule)
- Plusieurs classes de gabarit (grille, spirale, pile, positions x/y…)
2004 :
- Un gabarit par element + un gabarit pour les pages imprimée
- Un seul type : la grille (régions alignées en lignes et colonnes)
Utilisation alternative des gabarits
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Grid Layout propose deux autres idées :
- Les noms des régions d'un gabarit peuvent remplacer les
coordonnées x/y pour positionner (« absolute
positioning »)
- Un « meta-gabarit » qui ajoute automatiquement des lignes et
des colonnes à un gabarit si nécessaire peut fonctionner comme une
généralisation des tableaux
(Dans un tableau en HTML, un TD ajoute
automatiquement une colonne si nécessaire. Ainsi une règle CSS
comme 'SPAN {grid-column: 7}' peut automatiquement créer la
colonne 7 si le gabarit n'en avait que 6 auparavant.)
Challenge 1 : un simple quadrillage ?
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Quatre colonnes, deux lignes ✔
- Paragraphe aligné en bas ✘
- Signature attachée au dernier paragraphe ✘
- Titres courants complexes ✔?
Challenge 1 : code source HTML
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
<H1>Guide</H1> ← titre courant
<H2>Livres</H2> ← titre courant
<H3 ID=jacquemart>Un florilège français</H3>
<P><IMG SRC="..." ALT="..."> ← déplacer avant le H3
<P>Directrice de recherche...
...
<P CLASS=signature>G. B. ← attacher au para
<P CLASS=info>Le musée Ja... ← aligner en bas
<H3 ID=versailles>Versailles...
<P><IMG SRC="..." ALT="...">
...
Challenge 1 : règles CSS
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
BODY {grid: "aceg"
"bdfh"}
#jacquemart + P {flow: a} ← image
#jacquemart {flow: b} ← titre
#jacquemart ~ * {flow: b} ← autres paragraphes
#versailles + P {flow: c}
#versailles ~ * {flow: d}
#versailles ~ * {flow: d}
#hittorf + P {flow: e}
#hittorf {flow: f}
#hittorf ~ * {flow: f}
#planque + P {flow: g}
#planque {flow: h}
#planque ~ * {flow: h}
Challenge 1: autres solutions ?
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Avec multicol/GCPM :
H3 {break-before: always}
H3 + P {float: column-top; height: 12em}
Avec XSLT & flexbox
DIV.container1, DIV.container2,
DIV.container3, DIV.container4,
DIV.container5... {display: flexbox}
...
Challenge 2 : photo sur 2 colonnes
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Couleur invertie ✘ ?
- Photo s'étendant sur deux colonnes ✔ ?
- Bande grise de la taille d'un chiffre ✔ ?
- Crénage dans le titre courant ✔ ?
- Chaque colonne remplie à 100% ✘
- Des lignes horizontales et verticales ✔
Challenge 2 : autres solutions ?
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Multicol étendu :
::slot(p) {columns: 3}
::slot(q) {columns: 2}
#maquette img {float: top-corner;
column-span: 2}
#broderies {column-span: all}
Challenge 3 : flottant dans une colonne
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Trois colonnes et une image flottante (
float: top
next-column
?) ✔?
- … ou avec une chaîne de régions ✔
- Image dépasse le haut des colonnes ✔?
Challenge 4 : images flottantes centrées
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Des images flottantes centrées verticalement; possible avec un
gabarit avec des chaines de régions ✔
- Peut-être aussi avec de la positionnement absolue et des zones
d'exclusion.
Challenge 5 : melange de texte vertical et horizontal
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Des emplacement horizontals et verticals, dont un avec 6
colonnes et une exclusion non-rectangulaire ✔
::slot(a) {writing-mode: vertical-rl}
::slot(b) {writing-mode: horizontal}
Challenge 6 : manuscrit ☺
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Lettrine qui s'introduit dans une autre flux de texte ✘
- Région non-reactangulaire ✘?
"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"
Challenge 7 : sept gabarits sur une même grille
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Sept pages avec des gabarits differents ✘?
@page p15 {
grid: "ABBCCC"
"ABBCCC"
"ABBCCC"
"DEEFFF"
"DEEFFF"}
}
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.