Ah oui en effet, on ne peut pas faire ça directement en CSS, avec un sélécteur. Mais, question bête, ce paragraphe sous-entend qu’on pourait le faire autrement ? Comment donc ?
Si tu prends un exemple qui ne correspond à aucun besoin, évidemment. Il me semble pourtant que je donnes des exemples plus concrets, dont la structure même de CSS Zen Garden, qui recourt à un encodage spécifique justement pour réaliser ce genre d’effet :
— les classes "p1", "p2", "p3", "p4, "p5" pour différencier les paragraphes successifs, justement parce qu’il n’y a pas de sélecteur CSS permettant de le faire ;
— le recours à PHP, en amont, pour adapter le code au besoin graphique et parvenir à réaliser les effets directement avec les CSS (tu veux une lettrine « propre » ? alors tu fais passer ton texte par PHP, qui va isoler le premier caractère et regarder si c’est une lettre et, si ça n’est pas une lettre — un guillemet ouvrant, une parenthèse...—, aller prendre le second caractère pour le placer aussi dans la lettre ; systématiquement vérifier le caractère suivant, parce que si c’est une apostrophe, il faut aussi l’intégrer dans la lettre ; enfin, si tu veux une belle lettrine graphique comme dans l’exemple de CSS Zen Garden, tu passes le tout par une moulinette PHP) ; il s’agit de solutions de contournement des limites des CSS, qui font que le code n’est finalement pas réellement « portable ».
Autre exemple (déjà ancien) : SPIP fabrique des tableaux (à l’intérieur du texte) en insérant une classe différente une ligne sur deux, pour permettre aux webmestres de définir des rendus (généralement la couleur de fond) différents selon la ligne. Ce genre de choses devrait être réalisé directement par des sélecteurs CSS.
Dans tous les cas, ce genre de méthodes rendent caduques une réelle séparation du contenu et de la forme : si CSS change le contenu de sa page de démonstration, les feuilles de style devront être redessinées, ce qui est absolument l’inverse de l’intérêt des CSS ; si tu veux un graphisme une ligne sur trois, ou avoir des comportements qui dépendent de l’existence de lignes spécifiques (une ligne de « séparation »), bref un contrôle chiadé des tableaux, alors soit tu recodes le script de SPIP, soit tu codes entièrement à la main.
la critique va devenir que les CSS sont trop compliqués !
— Tout d’abord, c’est perdre de vue que les CSS sont déjà compliquées. Je te conseille l’excellente page QuirksMode CSS (déjà signalée dans l’article) pour voir une liste de sélecteurs et de pseudo-classes particulièrement cotons (un exemple est fourni dans l’article). Ne pas se tromper, hein : ces sélecteurs et ces pseudo-classes sont épatants ; simplement j’expose des limites.
— La complexité n’est pas en soit rédhibitoire si elle s’insère dans une courbe de progression continue. Les CSS et les exemples des QuirksMode l’illustrent : tu peux commencer les CSS de manière très basique et cela donnera déjà des contrôles typographiques sympathiques, et progressivement découvrir et comprendre des syntaxes nettement plus balaises.
Si tu prends un exemple qui ne correspond à aucun besoin, évidemment. Il me semble pourtant que je donnes des exemples plus concrets, dont la structure même de CSS Zen Garden, qui recourt à un encodage spécifique justement pour réaliser ce genre d’effet :
— les classes "p1", "p2", "p3", "p4, "p5" pour différencier les paragraphes successifs, justement parce qu’il n’y a pas de sélecteur CSS permettant de le faire ;
— le recours à PHP, en amont, pour adapter le code au besoin graphique et parvenir à réaliser les effets directement avec les CSS (tu veux une lettrine « propre » ? alors tu fais passer ton texte par PHP, qui va isoler le premier caractère et regarder si c’est une lettre et, si ça n’est pas une lettre — un guillemet ouvrant, une parenthèse...—, aller prendre le second caractère pour le placer aussi dans la lettre ; systématiquement vérifier le caractère suivant, parce que si c’est une apostrophe, il faut aussi l’intégrer dans la lettre ; enfin, si tu veux une belle lettrine graphique comme dans l’exemple de CSS Zen Garden, tu passes le tout par une moulinette PHP) ; il s’agit de solutions de contournement des limites des CSS, qui font que le code n’est finalement pas réellement « portable ».
Autre exemple (déjà ancien) : SPIP fabrique des tableaux (à l’intérieur du texte) en insérant une classe différente une ligne sur deux, pour permettre aux webmestres de définir des rendus (généralement la couleur de fond) différents selon la ligne. Ce genre de choses devrait être réalisé directement par des sélecteurs CSS.
Dans tous les cas, ce genre de méthodes rendent caduques une réelle séparation du contenu et de la forme : si CSS change le contenu de sa page de démonstration, les feuilles de style devront être redessinées, ce qui est absolument l’inverse de l’intérêt des CSS ; si tu veux un graphisme une ligne sur trois, ou avoir des comportements qui dépendent de l’existence de lignes spécifiques (une ligne de « séparation »), bref un contrôle chiadé des tableaux, alors soit tu recodes le script de SPIP, soit tu codes entièrement à la main.
— Tout d’abord, c’est perdre de vue que les CSS sont déjà compliquées. Je te conseille l’excellente page QuirksMode CSS (déjà signalée dans l’article) pour voir une liste de sélecteurs et de pseudo-classes particulièrement cotons (un exemple est fourni dans l’article). Ne pas se tromper, hein : ces sélecteurs et ces pseudo-classes sont épatants ; simplement j’expose des limites.
— La complexité n’est pas en soit rédhibitoire si elle s’insère dans une courbe de progression continue. Les CSS et les exemples des QuirksMode l’illustrent : tu peux commencer les CSS de manière très basique et cela donnera déjà des contrôles typographiques sympathiques, et progressivement découvrir et comprendre des syntaxes nettement plus balaises.