Précisons d'emblée
que les pseudos-éléments ne sont pour l'instant implémentés
que par IE 5.5, Netscape 6.0 et Opera 5.0, ce qui réduit
leur portée. Ils représentent toutefois un effet intéressant.
Les pseudo-classes permettent d'affecter un
style à des éléments qui ne peuvent être représentés
par un autre type de sélecteur (balise, classe, identificateur), comme
les événements utilisateurs, les pseudo-éléments
permettent d'affecter un style à une partie d'un document qui
ne pourrait posséder son propre style en procédant d'une manière
différente. Les pseudos-éléments définis par le premier
niveau de spécifications CSS sont :first-line et :first-letter
et la syntaxe de leur utilisation rappelle celle des pseudo-classes. Prenons
un exemple. Déclarons, dans notre feuille de styles, les règles
suivantes (en fichier séparé, ou dans les balises <HEAD><STYLE
type="text/css"> et </STYLE></HEAD>):
P:first-line { font-weight: bold; }
P:first-letter { font-size: 300%; float: left; }
On comprend que la première ligne d'un paragraphe
(balise <P>) aura ainsi un style différent des lignes qui
suivront (un tel niveau de précision n'est pas possible sans utiliser
les pseudo-éléments, ou alors de manière détournée
et plus lourde), et, de même, la première lettre de la première
ligne aura également un style différent. Les pseudo-éléments
isolent donc des "éléments théoriques" pour leur
appliquer un style.
Il suffira alors d'écrire, pour appliquer ces règles, une ligne
HTML du type:
<P>Essai de texte<br>avec
une lettrine</P>
Voici le résultat (copie d'écran) sous
Netscape 6.0:
On le voit, il devient possible, avec un minimum de
lignes de code, de réaliser des effets typographiques tout ce qu'il y
a de plus professionnels. Gageons qu'avec la diffusion de la génération
la plus récente des principaux navigateurs, ce type d'effets deviendra
particulièrement populaire.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
[