CSS ne cesse d'évoluer et il serait difficile d'écrire un article à chaque fois que le World Wide Web Contortium (W3C) annonce des nouveautés candidates à la recommandation. Mais dans certains cas, les propriétés CSS qui découlent des propositions peuvent vraiment intéresser les intégrateurs et web designers. En ce 22 décembre 2020, le W3C a décidé de proposer trois mises à jour de candidats : le CSS Text Module Level 3, le CSS Backgrounds and Borders Module Level 3 et le CSS Box Model Module Level 3 (à ne pas confondre avec CSS 3, car il n'y a pas de versioning réel en CSS !).
Qu'est-ce qui se cache derrière ces deux modules CSS ?
Les deux blocs présentés à la recommandation ne sont pas des nouveautés à proprement parler, mais plutôt des mises à jour de blocs existants, avec de nouvelles propriétés ou valeurs de propriétés CSS. Si j'écris ces lignes, c'est surtout parce qu'il s'agit de deux modules utilisés couramment, et que certaines nouvelles propriétés pourraient vous intéresser. Pour résumer :
- Le module CSS Box Model Level 3 s'intéresse essentiellement à la gestion des boites, avec les propriétés margin, padding et border. Ici, les nouveautés sont plus rares donc nous nous y intéresserons peu dans la suite de cet article. Pour faire court, la dernière mouture du module permet de mieux adapter l'écriture verticale (sans déformation), possibilité de ne pas appliquer de margin, padding (...) et ajout de nouvelles références de bordures de boîtes (en gros des points d'accroches ou de référence pour des propriétés comme transform-box ou background-clip).
- Le module CSS Backgrounds and Borders Level 3 n'apporte pas beaucoup de changements en ce qui concerne la gestion des fonds et des bordures de blocs. On note par exemple l'inversion de l'ordre des informations dans les propriétés text-shadow ou drop-shadow, ou encore des clarifications sur la couleur choisie dans ces propriétés lorsque cette dernière n'est pas définie (normalement, la couleur courante sera prise en compte). En gros, pas de quoi fouetter un chat ici... ;-)
- Le module CSS Text Module Level 3 se focalise sur toutes les propriétés relatives à la gestion des contenus textuelles, telles que white-space, text-transform, text-align, etc. Ici, beaucoup de nouvelles propriétés (ou en cours de déploiement) devraient vous intéresser...
C'est essentiellement dans le dernier module présenté que nous allons nous plonger, avec quelques innovations alléchantes. ;-)
De nouvelles propriétés CSS pour la gestion des textes
Cet article n'a pas la prétention de faire le tour de la question, mais certaines nouvelles propriétés CSS me semblent intéressantes à vous faire partager. Si certains navigateurs ont déjà commencé à implémenter quelques-unes d'entre elles, restez vigilants en termes de rétrocompatibilité (n'hésitez pas à vérifier sur Caniuse par exemple), n'utilisez donc que ces propriétés avec certitude pendant encore quelques temps. Dès lors que les modules seront inscrits à la recommandation, les navigateurs auront tout loisir de peaufiner l'intégration des nouveautés.
Voici une petite liste de propriétés CSS qui me semblent intéressantes à voir ou à revoir :
- Text-align-last : cette propriété permet de gérer l'alignement de la dernière ligne d'un bloc de texte. Par défaut, cette dernière reste alignée à gauche mais vous pouvez sans problème modifier son comportement avec les mêmes valeurs que pour text-align (hormis la nouvelle justify-all présentée ci-dessous). Il n'y a pas eu beaucoup de changements depuis la dernière version du module, mais sachez que cette propriété n'est pas forcément bien lue par l'ensemble des navigateurs.
- Text-align (nouvelles valeurs) : l'alignement des textes va encore s'améliorer avec les valeurs justify-all (permet de cumuler le comportement des propriétés text-align-all et text-align-last pour justifier l'ensemble des lignes d'un blocs, de la première à la dernière) ou match-parent (déjà existant mais peu connu : ressemble à inherit mais permet de s'aligner en fonction de la direction du texte du bloc parent). Pour rappel, si vous croisez la propriété text-align-all, il s'agit de la version longue de la propriété text-align mais qui n'est pas forcément recommandée à utilisée.
- Text-justify : cette propriété a pour but de gérer la forme de l'alignement à appliquer quand un bloc de texte est justifié avec text-align:justify. Il faut bien avouer que souvent, la justification de texte peut avoir un comportement assez peu approprié (rappelons qu'elle est déconseillée sur le Web, hormis en cas de multi-colonnage en règle générale). En effet, il est fréquent de voir des lignes très correctement alignées et d'autres avec des "trous béants". Avec la propriété CSS text-justify, vous allez pouvoir modifier ce comportement du mieux possible (sur la valeur auto par défaut), soit en optant pour la valeur inter-word (réparti l'espace vide équitablement entre les mots), soit pour inter-character (ajuste le plus équitablement l'espace libre entre les lettres, en prenant soin de distinguer les espaces entre les mots). Sachez aussi qu'il existe une valeur none qui désactive la justification.
- Hanging-punctuation : cette propriété permet d'indiquer si la ponctuation doit être prise en compte ou non dans la zone de la boite qui contient le contenu. En d'autres termes, la propriété CSS permet de faire sortir du cadre du texte un alinéa ou une ponctuation. Comme les mots ne remplacent jamais les visuels, voici une capture d'écran qui résume les alignements de blocs qu'il est possible de faire avec hanging-punctuation.
- Text-indent (nouvelles valeurs) : vous connaissez déjà la propriété mais sachez que de nouvelles valeurs comme each-line (pour créer des alinéas à chaque début de paragraphe d'un bloc parent), ou hanging (permet de faire un alinéa sur toutes les lignes autres que la première, ou sur d'autres lignes que la première...) peuvent vraiment vous plaire. ;-)
- Tab-size : il s'agit ici plutôt d'un rappel car cette propriété est déjà implémentée dans les navigateurs récents notamment, mais cette propriété vous permet de gérer la taille des tabulations et alinéas dans les textes.
Nous n'avons pas fait le tour de l'ensemble des nouveautés, notamment celles qui concernent les caractères japonais (kana ou kanji) ou la gestion des langues, mais quoi qu'il en soit, le CSS va encore s'améliorer avec ces propriétés et valeurs. Espérons juste que tout soit validé comme prévu, et que les navigateurs les implantent, car au fond, c'est ce qui détermine la réussite ou non des propriétés CSS...