Chez Jérémie - :before et :after, des pseudo-éléments qui ont du style - Commentaires

:before et :after, des pseudo-éléments qui ont du style - David Latapie

David Latapie — Mon, 13 Dec 2010 01:21:45 +0100

Bonjour,

Merci pour ce très bon article (j’aime particulièrement la concision de l’exemple des titres hiérarchisés - parmi les multiples exemples trouvés de parle web, celui-ci est le meilleur que je connaisse)

Quelques précisions :
- les bords arrondis se gèrent beaucoup plus proprement avec border-radius, une propriété CSS3 dédiée
- pour la tentation du remplacement de texte, j’avais pondu un article sur la question il y a quelques années (http://david.latapie.name/perso/?p=…)
- au sujet de “le texte du pseudo-éléments est visible mais littéralement inaccessible…”, il faut savoir qu’Opera a pris la décision que du texte auto-généré devait être sélectionnable (http://david.latapie.name/perso/?p=…). Je pense que ça encourage à des mauvaises pratiques (point sur lequel Laurent Denis, chantre de l’accessibilité, est en désaccord), même si l’on peut imaginer des applications pratiques, comme l’auto-génération de lien de source (attribut cite dans un élément blockquote ou autre, rendu cliquable par une fonction propriétaire d’Opera), gràce à la fonction de liens en cascade (CLinks (http://people.opera.com/howcome/200…) - un exemple sur mon blog (http://david.latapie.name/perso/?p=…) oui, je sais que les images n’apparaissent pas, je dois encore les récupérer, elles sont quelque part !)

:before et :after, des pseudo-éléments qui ont du style - Jeremie

Jeremie — Wed, 24 Nov 2010 15:55:44 +0100

@Stephane : Han ! Mais, mais, mais… c’est un coup sous la ceinture ça !

Effectivement, si tu part du principe que d’une part les lecteurs de mon blog le survol sans réfléchir et que d’autre part j’ai une quelconque influence sur eux, je vais avoir du mal à répondre là ! Aurai-je donc des super pouvoir inconnus qui me permettent de transformer un innocent lecteur en un zombi destructeur de site Web ? Suis-je donc si naïf d’avoir une si haute opinion de mes lecteurs ? Bon, ok, moi aussi j’en ai rencontré des intégrateurs qui m’ont fait ce genre de coup. C’est d’ailleurs bien pour ça que j’écris ce type d’article, pour leur dire “devenez intelligent et rusé, n’appliquez pas des trucs bêtement”. Le web design, c’est un peu comme la cuisine, même si tu suis la recette tu peux rater ton plat si tu ne comprend pas pourquoi tu fais chacune des étapes de la recette.

Ceci dit, l’argument est diablement valable et je vais donc modifier mon article pour recontextualiser un peu plus et être un chouilla plus claire (au revoir petite chausse-trape, bonjour didactisme).

Je crois qu’on appelle ça un KO technique

En conséquence, la prochaine fois qu’on vient te voir avec la question : “je l’ai vu chez Jérémie Patonnier donc qui a raison ?”, tu pourras souverainement répondre : “Stephane Deschamps” (Ceci dit, le jour ou tu entend parler de moi en ces termes, je te paye le champagne ).

Mon seigneur, l’humble larve que je suis s’en retourne fourrager la fange

(Note au lecteurs qui musardent : C’est vrai, mais on adore également se chercher des poux dans la tête pour faire avancer le schmilblick.)

:before et :after, des pseudo-éléments qui ont du style - Stéphane Deschamps

Stéphane Deschamps — Wed, 24 Nov 2010 11:14:36 +0100

Ha ha, la chausse-trappe.

Oui justement, ça dépend : c’est bien une question de contexte, mais tu sais comme moi que les gens qui consultent des articles en ligne vont vite à l’essentiel. Or ton article, en diagonale, se lit justement comme “bon pour les warning, vazydon mon Shadock, je les génère en CSS”.

Manquait une notion de contexte dans ton exemple, ou alors il est mal choisi.Tu m’aurais dit “un élément dont le rôle est de l’information simple pourra gagner à ce que je génère un :before pour ajouter par exemple un gros I”, je t’aurais dit OK, vendons la caravane.

Là je trouve que ton exemple est mal choisi et/ou parcellaire parce qu’en la forme il nuit potentiellement à l’accessibilité : tout FUD mis à part, je te fais le pari que dans six mois des gens m’objectent que “je l’ai vu chez Jérémie Patonnier donc qui a raison ?”

L’exemple du Warning est tout sauf neutre : si je veux attirer l’attention de mon lecteur sur un truc particulier de ma page, c’est réellement tout sauf neutre. Donc CSS ne doit pas générer ce contenu, il doit faire partie intégrante du contenu que je livre à mon lecteur, que la CSS soit chargée ou non.

Je maintiens donc que ton exemple est mal choisi et/ou mal contextualisé, et que c’est nocif et que dans six mois on verra des gens faire comme ça parce que “je l’ai vu chez Jérémie Patonnier”.

(quant au lecteur qui vient musarder ici, qu’il se rassure : Jérémie et moi on est copains comme larrons en foire, et pas trolleurs pour deux sous… nous argumentons pour l’avancement de la qualité globale du vouaibe)

:before et :after, des pseudo-éléments qui ont du style - Jeremie

Jeremie — Wed, 24 Nov 2010 10:43:30 +0100

@Stephane : En posant la chausse-trappe du “Warning” j’espérai bien secrètement que quelqu’un y tombe dedans. A mon plus grand consternement, il fallut que ce fut toi. Bon, en même temps, une petite passe d’armes sur ce sujet avec toi n’est pas pour me déplaire (tend donc l’autre chaussure que je te la cire également).

Déjà, au moins nous sommes d’accord sur le fond et quand tu dis ce qui décore : css-generated, ce qui est pertinent : dans le code pour de bon, cela au moins ne fera pas débat entre nous.

Mais le diable se cache dans les détails (si, si) et lorsque tu affirmes que le WARNING a du sens je me vois contraint d’objecter respectueusement, mais néanmoins fermement. Je vais donc objecter en rétorquant que : ça dépend. Et c’est bien dans ce ça dépend que tout ce joue. Oui, j’affirme que le sens dépend du contexte. Tu semble sous-entendre (je te laisse confirmer ou bien me renvoyer à ma médiocrité) que rajouter via CSS un mot ou une phrase intelligible cela est une erreur d’accessibilité. Ne serait-ce pas aller un peu vite en besogne ? En effet, seul le contexte de la page dans son entier permettra de déterminer si ce mot ou cette phrase à une vocation décorative ou sémantique. Si les messages d’erreur sont identifié par d’autres éléments (un titre, des rôles ARIA, que sais-je…), le rajout d’un préfixe décoratif via CSS n’altère en rien l’accessibilité du contenu effectif. En fait, c’est exactement la même chose que de faire attention à ne pas véhiculer une information uniquement via la couleur par exemple. La question du mot généré ici, c’est la même chose. Il y aurai la même faute d’accessibilité si je n’avais signalé les erreurs qu’en les mettant sur fond rouge sans aucun élément de contexte qui signale qu’il s’agit d’erreur.

On voit donc que le problème sous tendu par la génération de contenu, c’est qu’on peut avoir l’illusion de croire que le texte généré rajoute du contexte. Bien sur, cela est faux au même titre que mettre le texte en rouge ne signifie rien en soit. L’erreur n’est donc pas de générer du texte avec CSS, mais bien de croire que CSS donne du contexte. Seul HTML donne du contexte. Ainsi, il ne peut pas y avoir de raccourcis rapide comme tu le fait sur la génération de contenu CSS, le problème se situe à un autre niveau. En l’état je ne peut pas te laisser condamner l’exemple que j’ai donné ici. Il est neutre et selon le contexte, il sera bon ou non… c’est d’ailleurs pour cela que dans l’exemple, j’ai bien précisé qu’il s’agissait d’un choix de design. C’est cette notion de choix qui fait la faute ou non. D’ailleurs je le redis à la fin de l’article, les pseudo-éléments, qui donne un grand pouvoir, impliquent une grande responsabilité (et oui, tout les web designers sont des Machiavel en herbe ).

:before et :after, des pseudo-éléments qui ont du style - Stéphane Deschamps

Stéphane Deschamps — Tue, 23 Nov 2010 22:22:48 +0100

@Jérémie : La flatterie ne vous mènera à rien, mon bon Blaze. Mais continuez un peu pour voir ?

(bon en fait au lieu de râler ici je devrais écrire un article “Du bon et du mauvais usage des contenus générés en HTML”, mais là je suis occupé)

Alors, en vrac :
- justement le WARNING a du sens : si je fais porter une mention “Attention” en début de paragraphe, c’est bien pour y attirer mon attention. Se dire que pour éviter d’enquiquiner les pauv’z’handicapés je ne vais pas le mettre est en réalité contre-productif
- les trucs de déco, genre les guillemets autour des blockquotes, toutes les choses qui font que STPo a plus de talent d’intégrateur que moi, OK, pas de souci.

Bref comme d’habitude (comme les sprites, tiens, j’y pense), ce qui décore : css-generated, ce qui est pertinent : dans le code pour de bon.

Mon avis à deux balles, parce que je les vaux bien.

:before et :after, des pseudo-éléments qui ont du style - Jeremie

Jeremie — Tue, 23 Nov 2010 13:43:13 +0100

@Sunny : La lecture de ce rapport de bug est très éclairante à ce sujet : http://code.google.com/p/fbug/issues/detail?id=537

:before et :after, des pseudo-éléments qui ont du style - Sunny

Sunny — Tue, 23 Nov 2010 12:26:37 +0100

Yabon ! Par contre c’est dommage que les outils de développement comme Firebug ne permettent toujours pas de les trifouiller. :/

:before et :after, des pseudo-éléments qui ont du style - Jeremie

Jeremie — Mon, 22 Nov 2010 18:34:26 +0100

@Stephane : Allons mon roudoudou d’amour, tu sait bien que tu n’est pas comme tout ces petits pisse-froid de l’accessibilité qui s’arrêtent à un sommaire et sentencieux “:before et :after, c’est mal.”. Toi, tu est le Gandhi de l’accessibilité, l’apôtre de l’intelligence des web designers. Tu n’est pas du genre à condamner sans contexte, hein ! Non, je sais que tu n’est pas comme ça. Permet que ton humble serviteur se prosterne à tes pieds et implore ton pardon pour t’avoir laissé entendre que j’aurai pu, par une erreur incroyable, t’associer à ces médiocres. Milles excuses

:before et :after, des pseudo-éléments qui ont du style - Stéphane Deschamps

Stéphane Deschamps — Mon, 22 Nov 2010 15:31:39 +0100

Oui mais alors non. Moi je stigmatise :before et :after à bon escient, tu es vache : si c’est à bon escient alors ce n’est pas de l’ayatollisme, mmmh?

:before et :after, des pseudo-éléments qui ont du style - NicoGaudin

NicoGaudin — Mon, 22 Nov 2010 14:55:23 +0100

Très très bon article, à mettre entre toutes les mains comme on dit !

:before et :after, des pseudo-éléments qui ont du style - STPo

STPo — Mon, 22 Nov 2010 14:22:24 +0100

Chouette article qui tombe bien, j’utilise de plus en plus massivement before, after et content dans mes intés, persos ou pros.
La pilule de la dégradation gracieuse IE6-7 reste assez difficile à faire avaler au client, mais je me refuse à bidouiller en JS pour pallier à ce défaut (quelle hérésie !).

(miam la belle typo énorme de ton blog =)