0

Les pseudo-éléments CSS

Salut les amis.

Cette fois, nous allons aborder les pseudo-éléments.

Les pseudo-éléments c’est quoi ?

Pour faire simple, un pseudo-élément est une entité que l’on ne pourrait sélectionner autrement qu’en ajoutant une balise dans le code HTML.

Démonstration par l’exemple

Comme un bon exemple vaut mieux qu’un long discours (et c’est moins gonflant), voici le pseudo-élément ::first-letter qui permet donc d’agir sur la première lettre d’un élément. Vous vous en doutez, cela n’aurait été possible qu’en créant un ‹span class= »first-letter »› entourant cette première lettre et en le ciblant en CSS.

Un pseudo-élément s’utilise de cette façon :

.exemple::first-letter {
    color: red;
}

« Taper sur les intés à coup de ::before »

Parmi la liste des pseudo-éléments existants, j’affectionne tout particulièrement les ::after et les ::before. Ils permettent de créer des éléments qui n’existent pas, de rajouter du texte hors du contenu HTML et surtout, ils me permettent de taper sur les intégrateurs aficionados des « Ce n’est pas possible de le faire sans image ». Une fois les explications comprises on commence à entendre les soupirs de contentement semblables à ceux de l’homme primaire découvrant le feu.

Cette méthode nous permet par exemple de signaler tous les liens externes au site, s’ouvrant dans un nouvel onglet (bonne pratique à respecter d’ailleurs) à l’aide d’un pictogramme tel que celui-ci : Google.

Illustration par l’exemple

Illustration par l’exemple

Ici, on rajoute deux (magnifiques…) carrés verts dans les coins supérieurs de notre (magnifique…) rectangle rouge.

Notre structure de base :

<div class="exemple">Illustration par l'exemple</div>
.exemple {
    background: #f45850;
    color: #fff;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-align: center;
    width: 100%;
}

Et maintenant, on rajoute nos éléments sans toucher au HTML ! (Magique, non ?)

.exemple::before, .exemple::after {
    background: #00CA73;
    content: ""; /* Obligatoire pour l'utilisation des ::before et ::after, sert à rajouter le contenu. Laisser vide dans le cas contraire. */
    height: 20px;
    position: absolute;
    top: 0;
    width: 20px;
}

.exemple::before {left: 0;}
.exemple::after{right: 0;}

Ces pseudo-éléments illustrent parfaitement l’idée de rajouter un élément sans toucher à la structure HTML du site. Ici, inutile donc d’utiliser une image pour générer cet élément. Le code ci-dessous va s’en occuper pour nous, nous faisant au passage économiser une requête HTTP ainsi que quelques octets.

Attention, un pseudo-élément n’est pas considéré comme contenu. Il n’apparait nulle part dans votre code HTML ! Veillez donc à ne JAMAIS les utiliser dans le but de véhiculer une information importante sous peine de nuire à l’accessibilité de votre site.

Oui mais IE dans tout ça ?!

Pas de soucis à avoir avec les pseudo-éléments en général. Certains étaient déjà présents en CSS2. La 3e version de CSS nous apporte de nouveaux sélecteurs mais aussi l’ajout des « : » supplémentaires qui nous permettent de les différencier d’une pseudo-classe (à voir dans un futur article). Si votre cahier des charges vous OBLIGE à assurer une compatibilité IE8, il vous faudra simplement enlever le « : » supplémentaire. Vous les utiliserez donc ainsi :

.exemple:before {}

Amusez-vous bien avec tout ça !

A bientôt les amis.

A propos de Gaëtan

Gaëtan a écrit 3 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.