nanoum.net, intégration html/xhtml, css, javascript

css

derniers articles

archives

syndication rss

before et afterjeudi 21 octobre 2004

Les deux pseudos classes :after et :before permettent de générer du contenu avant ou après le contenu d'un élément (et non pas avant ou après l'élément en lui même).
Elles s'utilisent toujours avec la propriété content, je ne vais pas détailler ici les différentes valeurs possibles pour cette propriété mais plutôt voir l'utilisation pratique que l'on pourra faire des deux pseudos classes.


Automatiser certains éléments

Pour une liste de prix par exemple, au lieu de devoir à chaque fois indiquer la devise, on pourrait se contenter de ne donner que les chiffres et les faire suivre automatiquement par l'indication de devise.
Par exemple, pour un catalogue contenu dans un tableau, si tous les prix sont affichés dans la troisième colonne et dernière colonne, ajouter des guillemets dans les blocs de citation, ou encore simuler une bordure qui aura une taille indépendante de celle de l'élément :
td+td+td:after {
content: " euros";
}
cite:after {
content: open-quote;
}
cite:before {
content: close-quote;
}
Autre exemple, pour un pied de page présent sur tout le site, plutôt que le remettre à chaque page, il peut simplement être généré en css :
body:after {
content: "Tous droits réservés";
}On peut ici placer du texte mais pas de contenu html avec des balises pour y mettre un lien par exemple.


Les éléments flottants et le clear:both

Un des reproches souvent fait au positionnement à l'aide de flottants et l'utilisation fréquente d'élément ayant la propriété clear:both qui permet de restaurer le flux (pour que la couleur de fond de l'élément parent soit prise en compte par exemple), celle-ci engendrant l'utilisation d'une balise superflue.
Dans certains cas, :after, permettra de générer ce clear:both automatiquement et garder ainsi un code non surchargé par des balises destinées uniquement à la mise en forme de la page. Ceci ne fonctionnera pas forcément pour chaque cas d'utilisation des flottants, mais pourra par exemple convenir pour le cas ou le clear:both intervient pour que la hauteur des blocs flottants soient prise en compte par leur élément conteneur.
Pour ce code par exemple :
#global {
background-color:#CC3399;
}
div.flottant {
width: 150px;
height: 100px;
float: left;
}

.....

<div id="global">
<div class="flottant">bloc flottant</div>
<div class="flottant">bloc flottant</div>
<div style="clear:both"></div>
</div>Le clear:both sert à rétablir le flux, afin que les hauteurs des deux autres div soient prises en compte et que la hauteur du cadre s'y adapte. Mais hormis pour la mise en page, cet élément div est totalement inutile et superflus dans la page.

Avec :after et pour un même résultat, on aura le code suivant :
#global {
border: 1px #9b9b9b solid;
}
#global:after {
content: "";
display: block;
clear: both;
}
#global div {
width: 150px;
height: 100px;
float: left;
border: 1px #c06 solid;
}

.....

<div id="global">
<div>bloc flottant</div>
<div>bloc flottant</div>
</div>

Les cadres arrondis

Pour faire un cadre arrondi à hauteur variable, il faut soit insérer des images directement dans le bloc, soit utiliser par exemple les balises dl/dt/dd, soit jouer sur des balises imbriquées.
Ici, on peut directement inclure les images à l'aide des css et en n'utilisant qu'une balise div unique :
#cadre:before {
content:url(haut.png);
}
#cadre:after {
content:url(bas.png);
}
#cadre {
background-color:#b9b9b9;
width:200px;
}
Attention, si l'on applique un padding au bloc cadre, alors les images seront elles aussi décalées par ce padding, pour repositionner les images on pourra alors user de marges négatives par exemple.


Il y a évidemment beaucoup d'autres utilisations pour :after et :before et internet explorer ne les interprète pas encore mais ces exemples donnent déjà un aperçu des possibilités offertes. smiley

voir la page contenant les exemples

Commentaires momentanément fermés. Merci de votre compréhension.