Empyrée Le site qui déswappe

Les CSS3 sont les premières à être modularisées (Tout comme l’est le HTML depuis XHTML 1.1). La modularisation à de nombreux avantages, notamment pour la mise à l’échelle et pour gérer plus facilement la profusion de nouveaux styles.

Car profusion est le terme. Profusion de styles et profusion de modules. Il est encore beaucoup trop tôt pour dire si les CSS3 changeront beaucoup la manière d’utiliser le Web mais jugez plutôt les modules en cours :

1. Backgrounds
2. Basic User Interface
3. Borders
4. Box model
5. Cascading and inheritance
6. Color
7. Fonts
8. Generated and Replaced Content
9. Hyperlink Presentation
10. Line
11. Lists
12. Paged Media
13. Presentation Levels
14. Ruby
15. Selectors
16. Speech
17. Syntax
18. Text
19. Values and units
20. Web fonts

Ça fait beaucoup, n’est-ce pas ? Notons cependant que, si les CSS3 apportent leur (gros) lot de nouveautés, une bonne partie est une simple modularisation des CSS2. Un peu comme pour le XHTML 1.1, sauf que ce dernier n’apportait rien de nouveau (à part des ennuis supplémentaires ☻).

Je n’ai pas eu le courage de tout éplucher, mais voyons quand même d’ores et déjà quelques une des propositions¹. Je ne note pas tout, uniquement ce qui m’intéresse actuellement. Enfin, je rappelle à ce propos que ce sont des brouillons (drafts), donc susceptible de changer à n’importe quel moment.

Bordure

border-radius

Enfin, il sera possible d’avoir des coins arrondis sans avoir à passer par des images (vous pouvez toujours, si vous voulez mais c’est désormais plus propre)… Si vous utilisez Mozilla, vous pouvez voir un exemple chez Virtual Elvis (grâce aux extensions propriétaires).

border-break

Permet aux médias paginés de ne pas briser les tableaux de manière inélégante (certains tableaux ou autre éléments à bordure étant plus grands qu’une page, page-break n’est qu’une demi-solution et border-break est nécessaire).

Un petit dessin vaut mieux qu’un long discours.

box-shadow

Extension du text-shadow, box-shadow permet des effets d’ombres sur des boîtes et ça, c’est bien (surtout associé à border-radius)

Contenu auto-généré ou remplacé

:before et :after deviennent ::before et ::after. Je n’ai pas vraiment compris pourquoi. Le reste me passe un peu au-dessus de la tête.

Tout le passage sur l’insertion de guillemets est intéressant, bien que pas nouveau. Ce qui n’est pas nouveau non plus, c’est que personne ne l’implémente. Voir mes différents billets pour pester contre la chose (pareil pour counter-increment et counter-reset, qui ne sont supportés que par Opera).

Couleurs

• On passe au HSL, plus intuitif et moins orienté CRT que le RGB. Il y a du HSLA

Polices

Il est possible de désactiver l’anticrénelage. J’ai déjà une idée de style :

code {font-smooth:never}

En effet, le code n’est pas fait pour être joli, mais fonctionnel. Et avec l’anticrénelage, le premier prend parfois le pas sur le second (et puis du code, ça doit avoir l’air austère ☻).

Sélecteurs

Je vois un usage direct pour au moins quatres sélecteurs :

• :nth-last-child [spéc]
• :not [spéc]
• [att~=val] [spéc]
• [foo$="bar"] [spéc]

:nth-last-child

Ce sélecteur peut, entres autres choses, prendre les valeurs even (pair) et odd (impair). Il servira à faire des tables à couleurs alternées, très répandues, mais jusqu’ici impossibles à faire proprement en XHTML (c’est-à-dire autrement qu’à la main, avec tous les risques que cela comporte).

Voici un exemple de code :

Je vous conseille de fusionner les bordures de cellules pour un meilleur effet :

Comme un petit dessin vaut mieux qu’un long discours, allez faire un tour dans la comparaison de tables de A list Apart.

:not

Mots étrangers

Je parle plus avant d’un usage de ce sélecteur dans la recette pour les mots étrangers (voir Recettes de code). Ses usages sont potentiellement énormes.

[att~=val]

Pour signaler les liens vers la Wikipédia (l’idée étant que les lecteurs sachent que je les dirige vers une définition). a[href~=wikipedia.org]:after { background:transparent color:maroon; content:"\\a0[WK]"; display:marker; font-size:.8em; font-weight:bolder }

[foo$="bar"]

Pour signaler les liens vers des PDF. Évidemment, ça ne marche pas si l’on a fait en sorte (ce qui est conseillé) que les URL sympas ne changent pas. a[foo$="bar"]:after { background:transparent color:navy; content:"\\a0[PDF]"; display:marker; font-size:.8em; font-weight:bolder }

Texte

Apparition de nouveaux types de justification, de meilleure qualité mais plus gourmand en CPU :

• text-justify:distribute
• text-justify:newspaper (plus lent, mais pas forcément meilleur)

Autres liens

• Un site de présentation et de test des CSS3 : CSS3:The New Frontier. Il compare notamment le niveau de support CSS3 d’Internet Explorer (ne riez pas trop fort ☻), Firefox 0.8, Mozilla 1.7 RC 1, Safari 1.2 et Opera 7.50. Aux dernières nouvelles (12 avril 2004), Safari est le meilleur, devant même Mozilla (Il faudrait cependant comparer avec Tasman, très prometteur lui aussi).

1. J’ai volontairement fait l’impasse sur tout ce qui touche à la mise en style non européenne, grands gagnants de cette nouvelle mouture ainsi que sur le média oral, vu que je n’y connais rien.