Réduire le besoin de pseudoéléments —

Résumé rapide ↬

Pendant des années, les pseudo-éléments ont fidèlement aidé les développeurs front-end à mettre en œuvre des conceptions créatives. Bien qu'ils aient toujours une place importante, nous pouvons désormais laisser les pseudo-éléments de côté dans certains scénarios, grâce aux nouvelles propriétés CSS.

Selon la W3C spec"un pseudo-élément représente un élément qui n'est pas directement présent dans l'arbre du document". Ils existent depuis la version 1 de la spécification CSS, lorsque ::first-letter et ::first-line ont été introduits. Les populaires ::before et ::after pseudo-éléments ont été ajoutés dans la version 2 — ils représentent du contenu qui n'existe pas du tout dans le document source. Ils peuvent être considérés comme deux éléments supplémentaires sur lesquels vous pouvez « ajouter » leur élément d'origine. Lorsque les développeurs front-end entendent des « pseudo-éléments », nous pensons le plus souvent à ::before et ::aftercar nous les utilisons de différentes manières pour ajouter des décorations à nos éléments.

Il existe des pseudo-éléments supplémentaires au-delà de ceux-ci. Ils sont répertoriés dans la spécification dans trois catégories : typographichighlight et tree-abiding.

Fait intéressant, après des années de développement Web, je n'ai jamais Je me suis retrouvé à utiliser ::first-linemais c'est plutôt soigné et répond bien au redimensionnement de la fenêtre ! Découvrez-le.

Voir le stylo [`::first-line`](https://codepen.io/smashingmag/pen/gORgXxN) par Marcel.

::selection est un autre pseudo-élément auquel beaucoup accèdent. Lorsqu'un utilisateur surligne du texte, la couleur de surbrillance sera une couleur que vous spécifiez.

Voir le stylo [`::selection`](https://codepen.io/smashingmag/pen/rNwjYGz) de Marcel.

Quick Tip

Les pseudo-éléments utilisaient un deux-points dans les versions 1 et 2 de la spécification CSS, mais ont utilisé deux deux-points de la version 3. Cela les différencie des pseudo-classes, qui décrivent l'état d'un élément. Les pseudo-classes utilisent un deux-points.

• Utilisez deux deux-points pour les pseudo-éléments (par exemple ::before::after::marker).
• Utilisez un deux-points pour pseudo-classes (par exemple :hover:focus).

Les pseudo-éléments ne sont pas toujours nécessaires

Les pseudo-éléments ont toujours leur place. Cet article n'est pas « ne jamais utiliser de pseudo-éléments » mais plutôt « nous n'avons plus autant à utiliser de pseudo-éléments ». Nous pouvons styliser un certain nombre d'éléments d'interface utilisateur populaires sans avoir besoin de pseudo-éléments. En comptant moins sur les pseudo-éléments, nous pouvons écrire moins de CSS, éliminer les éléments imbriqués, ignorer les problèmes de contexte d'empilement et oublier le positionnement.

Regardez à nouveau les techniques de confiance avec les nouvelles propriétés CSS

Pendant des années, nous avons attendu patiemment que les navigateurs adoptent la technologie CSS plus rapidement. Un tournant pour de nombreux développeurs front-end est survenu lorsque certains acteurs majeurs ont annoncé qu'ils cesseraient de prendre en charge Internet Explorer (IE11) :

• Toutes les applications Web Microsoft 365 ont cessé de prendre en charge IE11 le 21 août 2021.
• Google Workspace (GmailCalendarDriveetc) a arrêté la prise en charge d'IE11 le le 15 mars 2021.

Cela a permis à beaucoup d'entre nous d'explorer plus librement les nouvelles technologies CSS : CSS Grid, clamp()background-blend-modeet plus. L'état de la prise en charge des propriétés CSS est excellent. Et avec les navigateurs pouvant être mis à jour, la prise en charge s'accélère.

Apportez les exemples !

Boutons angulaires

De nombreux développeurs front-end sont habitués à utiliser ::before et ::after pseudo-éléments et règles de bordure CSS pour créer des formes. Il existe de nombreux outils générateurs dédiés à cette fin – c'est un que j'ai mis en signet. Ces outils vous guident dans le choix d'une forme (souvent des triangles), vous donnant les règles CSS appropriées.

Ces outils sauvent la vie lors de la création de boutons inclinés. Pour les boutons angulaires, ils ne sont plus nécessaires.

Version pseudo-élément

Beaucoup d'entre vous qui lisez ceci seront habitués à une version pseudo-élément :

• Nous utilisons un élément d'emballage relativement positionné avec un grand rembourrage à droite pour s'adapter à notre angle – c'est notre  ;
• Beaucoup d'entre nous, étudiants de la technique des portes coulissantessont habitués à l'imbrication un élément à prendre sur la couleur de fond du bouton;
• Enfin, nous positionnons absolument un pseudo-élément avec ses règles de bordure dans l'espace vide de remplissage à droite de notre – nous utilisons ::before pour cela.

En dehors de ces étapes, nos styles de survol doivent tenir compte à la fois de notre élément imbriqué et de notre pseudo-élément. Cela peut sembler gérable pour vous, mais plus nos conceptions de boutons sont compliquées, plus nous avons de surcharge avec les styles de survol. De plus, avec cette version, les boutons avec habillage de mots échouent tout simplement.

Voir le stylo [Button angle with pseudo-element](https://codepen.io/smashingmag/pen/xxrgPpj) de Marcel.

Version sans pseudo-élément

Ceci est beaucoup plus facile sans pseudo-élément.

• Nous utilisons un élément wrapper – notre .
• Nous atteignons la propriété clip-path pour afficher uniquement les parties de notre bouton que nous voulons, en utilisant calc() ainsi qu'une propriété CSS personnalisée pour dimensionner notre angle — ces ensembles de points correspondent à en haut à gauche, en haut à droite, au milieu à droite, en bas à droite et en bas à gauche : polygon(0% 0%, calc(100% - var(--angle-width)) 0%, 100% 50%, calc(100% - var(--angle-width)) 100%, 0% 100%)

Dans l'exemple CodePen, vous modifiez la propriété personnalisée --angle-width de 2rem à une autre valeur pour voir l'angle de notre bouton s'ajuster en conséquence.

Nos styles de survol ne doivent tenir compte que d'un élément : notre bouton. De plus, les boutons avec habillage de mots agissent de manière plus gracieuse.

Voir le stylo [Button angle with NO pseudo-element](https://codepen.io/smashingmag/pen/PojWOQY) de Marcel.

Plus de styles de boutons inclinés dans la vitrine

Visitez la vitrine finale pour voir ces autres styles de boutons simplifiés sans pseudo-éléments. En particulier, la version pseudo-élément du bouton biseauté bleu est assez brutale. La quantité de travail globale est considérablement réduite grâce à clip-path.

Button Wipes

Un effet d'essuyage est un style de bouton populaire. J'ai inclus des lingettes de gauche à droite et de haut en bas.

Version pseudo-élément

Cela peut être réalisé en transition une transformation d'un pseudo-élément.

• Nous positionnons absolument un pseudo-élément ::before et lui donnons une transform: scaleX(0) pour qu'il ne soit pas visible.
• Nous devons également définir explicitement son transform-origin: 0 0 pour s'assurer que l'effacement vient de la gauche plutôt que du centre (transform-origin est par défaut au centre).
• Nous avons configuré transitions sur le transform pour un survol marche/arrêt d'une animation jazz fluide.
• Comme notre pseudo-élément est absolument positionné, nous avons besoin d'un élément imbriqué pour contenir le texte du bouton, position : relative sur cet élément imbriqué crée un nouveau contexte d'empilement afin que notre texte reste au-dessus de notre pseudo-élément d'effacement.
• En survol, nous pouvons cibler notre pseudo-élément et transition son ​​scaleX pour être désormais 1 (transformer : scaleX(1)).

Voir le stylo [Button wipe with pseudo-element](https://codepen.io/smashingm ag/pen/KKqayGW) par Marcel.

Pas de version Pseudo-Element

Pourquoi s'inquiéter des éléments imbriqués, du positionnement des pseudo-éléments, des contextes d'empilement et des règles de survol tentaculaires si nous n'avons pas à le faire ?

Nous pouvons atteindre linear-gradient() et ]background-size pour résoudre ce problème.

• Nous donnons à notre un background-color pour son état par défaut, tout en configurant également un linear-gradient via background-image — mais le background-size sera 0donc nous ne verrons rien par défaut.
• En survol, nous passons le background-size à 100% 100% ce qui nous donne notre effet d'effacement !

Rappelez-vous, linear-gradient() utilise la propriété background-image et background- image remplace background-colorc'est donc ce qui prévaut en survol.

C'est tout. Aucun élément imbriqué requis. Envie d'un essuyage vertical ? Modifiez simplement la direction linear-gradient et les valeurs background-size. Je les ai modifiés via les propriétés personnalisées CSS.

Voir le stylo [Button wipe with NO pseudo-element](https://codepen.io/smashingmag/pen/MWoJOVo) par Marcel.

Mosettes avec superpositions de couleurs d'écran

Il s'agit d'un motif courant où une couleur semi-transparente recouvre un carreau/une carte. La tuile de notre exemple a également une image de fond. Il est souvent important dans ce modèle de conserver un rapport hauteur/largeur défini afin que les tuiles aient l'air uniformes si plusieurs apparaissent dans un ensemble.

Pseudo Version

Certaines des mêmes choses entrent en jeu avec notre version pseudo-élément :

• Nous utilisons le « astuce de remplissage » du rapport d'aspect en définissant une valeur de remplissage supérieur à 60 % (rapport 5 : 3) pour notre tuile.
• Nous devons positionner notre pseudo-superposition de couleur d'écran. -element, en lui donnant 100 % width et height pour remplir la tuile — nous ciblons ce pseudo-élément au survol pour changer sa background-color.[19659033]En raison du positionnement absolu du pseudo-élément, nous devons utiliser un élément imbriqué pour notre contenu de texte, lui donnant également position : absolue afin qu'il apparaisse au-dessus de notre couleur d'écran superposition dans l'ordre d'empilement et pour s'assurer qu'il apparaît là où il devrait dans la tuile.

Voir le stylo [Tile screen color overlay with pseudo-element](https://codepen.io/smashingmag/pen/YzQNEOM) par Marcel.

Pas de version de pseudo-élément

Cela peut être beaucoup plus simple merci aux propriétés aspect-ratio et background-blend-mode.

Remarque : aspect-ratio ne fonctionne pas dans Safari 14.x, mais le sera dans la version 15.

Cela dit, au moment d'écrire ces lignes, caniuse le répertorie avec une prise en charge globale de 70 %+.

• Le "remplissage-astuce" est remplacé par aspect-ratio : 400/240 (nous pourrions utiliser n'importe quelle valeur basée sur 5:3 ici).
• Nous utilisons les deux background- image et background-color en conjonction avec background-blend-mode — modifiez simplement la background-color de notre élément de tuile au survol.[19659104]Background-blend-mode

  background-blend-mode mélange une background-color avec la background-image d'un élément. Tous les utilisateurs de Photoshop qui lisent ceci trouveront background-blend-mode qui rappelle les modes de fusion de Photoshop. Contrairement à mix-blend-modebackground-blend-mode ne crée pas de nouveau contexte d'empilement ! Donc pas d'enfer z-index !

  Voir le stylo [Tile screen color overlay with NO pseudo-element](https://codepen.io/smashingmag/pen/mdwRqjN) de Marcel.