Loading... reload

En faisant à l'instant une recherche sur les pseudo-éléments, pour écrire mon antépénultième billet, je suis tombée sur ce tutoriel de Mammouthland, qui propose un usage intelligent des pseudo-classes, dans le but d'économiser du code et de s'épargner de la peine. Je m'empresse donc de mettre en pratique ce que j'ai appris.

Considérons donc ce fragment de code :

<img src="img/loading_bleu.gif" alt="Loading" align="middle" /> <small>Chargement en cours...</small>

Je l'ai utilisé, dans ce billet, pour afficher un gif animé, suivi d'un texte :

Loading Chargement en cours...

Si j'applique l'astuce indiquée par le tutoriel sus-mentionné, je peux grandement simplifier ce code en utilisant les pseudo-classes before: pour afficher l'image à gauche et :after pour afficher les points de suspension. Je vais donc créer dans ma CSS la classe loading, ainsi définie :

.loading {
font-size: 10px;
background-color: transparent;
}
.loading: before {content: url(img/loading.gif)}
.loading: after {content: "..."}

Dès lors, mon code HTML se réduira à :

<div class="loading"> Chargement en cours</div>

pour afficher ceci :

Loading Chargement en cours...

et :

<div class="loading"> Patience</div>

pour afficher cette variante :
Loading Patience...


Naturellement, cette transposition "CSStique" n'est rentable et l'économie de code réalisée n'est sensible que si le code est voué à être répété.

Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=2050 - [Version PDF]