La pseudo-classe :lang
La pseudo-classe :lang permet de couvrir les besoins liés à la typogra-
phie et à la syntaxe de chaque langue.
:lang(fr-CH) > Q { quotes: ’«’’»’’<’’>’} /*4 arguments*/
Les deux premières données concernent les guillemets et les deux
dernières désignent les guillemets à l’intérieur d’autres guillemets. Le
code se rpésente avec quatre arguments ou les deux premiers seulement..
En français de Suisse on utilise un double chevron – et un simple chevron
à l’intérieur des guillemets. Pour connaître les caractères de guillemets,
allez sur www.mus.ulaval.ca/roberge/gdrm/08-codes.htm.
m
Figure 4.29 : Langues et caractères
Relooker des formulaires
Double Poche CSS • 551
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Les pseudo-éléments
Le pseudo-élément :first-line
Le pseudo-élément :first−line s’applique à la première ligne affichée
dans un paragraphe. Cette ligne est celle qui s’affiche vraiment dans le
navigateur et sera donc différente selon le navigateur, la largeur affichée,
la taille de la police, l’interlettrage, etc. Ce pseudo-élément ne correspond
à aucune balise HTML. Pour des articles où l’auteur prévoit un chapeau
sans créer une nouvelle boîte spécifique, il est possible d’utiliser ce
pseudo-élément pour créer une première ligne en gras. La longueur de la
première ligne dépend de l’affichage du navigateur, de la taille de la
police, etc.
Pour la désigner précisément, il suffit de mettre un passage à la ligne juste
à la fin du chapeau avec un <br /> et d’insérer dans la feuille de style :
m
Figure 4.30 : Liens et langues
m

font-size: 210%;
margin-right: 10px;
}
Il reste à mettre les lettres restantes du mot en petites capitales.
font-variant: small-caps;
Relooker des formulaires
Double Poche CSS • 553
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Le résultat est peu harmonieux et approximatif pour beaucoup d’opéra-
tions. Si vous voulez absolument mettre des lettrines, insérez plutôt des
images dans une boîte flottante.
Les pseudo-éléments :before et :after
Les pseudo-éléments :before et :after servent à insérer un objet avant
ou après le contenu d’un élément. L’objet peut être un mot, une
image, etc. mais pas du code HTML.
Voici des pseudo-éléments très pratiques pour créer une FAQ (foire aux
questions). Ces pages sont faites de questions-réponses et ici la question
est surlignée en jaune avec des caractères bleus. Le problème est que
Internet Explorer n’accepte pas la génération de contenu avec la propriété
content.
p.QR
{
background-color: FFEDA6;
color: 003D6C;
font-family: Arial;
}
p.QR::before
{
content: "Question: ";
font-family: Arial;

Le filtre alpha crée dans l’image une transparence. Le paramètre
opacity, qui contrôle l’opacité, est obligatoire : 0 correspond à la
transparence maximale, et 100 à l’opacité maximale.
style permet de choisir les types de dégradés : 0 pour uniforme, 1 pour
linéaire et 2 pour radial.
Avec style=1, pour intégrer un dégradé, il faut nécessairement indiquer
une valeur de départ (startx et starty)etdefin(finishx et finishy)
en pixels ou en pourcentage.
<img style="filter: alpha(apacity=50, finishopacity=0, style=2,
startxX=20, starty=40, finishx=0, finishy=0)"
src="images/titre_ecoute_vrai_1.jpg">
shadow
Ce filtre comporte deux paramètres : la couleur en code hexadécimal et la
direction en degrés. L’ombre, contrairement à l’ombre portée de drops-
hadow, est diffuse.
filter: shadow (color=#CACACA, direction=45);
dropshadow
Ce filtre crée une ombre portée, comme si l’image ou le texte se tenaient
au-dessus d’une surface. Cet effet donne du relief.
m
Figure 4.34 : alpha
4
La réalisation du site
556 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Il accepte quatre paramètres :
¶ la couleur de l’ombre portée ;
¶ le décalage horizontal et le décalage vertical (offX et offY);
¶ la position, dont la valeur est un booléen : 1 pour une ombre à
l’extérieur, 0 pour une ombre à l’intérieur de l’élément.

électroniques. Le format est prévu pour des petits
écrans.
media="print" Ce format s’applique à l’imprimante quand
l’utilisateur désire imprimer.
media="projection" Ce format concerne les rétroprojecteurs et d’autres
projecteurs vidéo.
media="screen" C’est le format par défaut. Il s’applique aux écrans
d’ordinateur.
media="tty" Ce média concerne les sorties texte avec une largeur
invariable, comme les télex. Il est aussi intéressant
pour les navigateurs texte de type Lynx.
media="tv" Ce format est celui de l’audiovisuel, comme la
télévision, où le son et l’image se combinent. La
qualité visuelle n’a pas besoin d’être parfaite.
Pour les navigateurs qui n’implémentent pas CSS2, on emploie généra-
lement la règle @import, qui permet d’importer les feuilles de style. Elle
n’est pas reconnue par les anciens navigateurs.
<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
@import url(impression.css) print, embossed;
@import url(portable.css) handheld;
@import url(normal.css) screen;
-->
</style>
</head>
<body>
</body>

display: none;
}
#corps {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
.pied {
margin: 3% 10%;
Relooker des formulaires
Double Poche CSS • 559
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
}
a{
color: gray;
background: transparent;
font-weight: bold;
text-decoration: none;
}
a:link:after {
content: "(" attr(href) ")";
font-size: 90%;
}
a[href]:after {
content: " ( attr(href) ") ";
}

deux équipes indépendantes, qui ont donc produit deux logiciels
différents.
Le sélecteur * html (révélé à Internet Explorer PC
seulement)
Ce sélecteur représente la balise html comme descendant d’un élément
quelconque, ce qui est une sélection impossible car la balise html est
l’élément racine des pages HTML. Un navigateur normal ignore ce
sélecteur car il ne correspond à rien. Internet Explorer lui en tient compte.
div#corps {
position: absolute;
max-width: 600px;
margin: 0 250px;
padding: 0 20px 20px 20px;
background-color: #E2EA8A;
}
* html div#corps {
width: 600px;
}
Relooker des formulaires
Double Poche CSS • 561
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Le problème avec Internet Explorer est que, si la propriété width n’est pas
présente, la largeur n’a plus de limites. Ici le sélecteur * html div#corps
n’est reconnu que par lui.
Le sélecteur enfant, adjacent ou le sélecteur
d’attribut (caché à Internet Explorer PC seulement)
Pour cacher certaines règles à Internet Explorer PC, il suffit d’utiliser le
sélecteur enfant qu’il ne reconnaît pas.
html>body div#corps {
max-width: 600px;

nav a une largeur de 150 px, sauf pour Internet Explorer Mac qui affiche
une largeur de 200 px.
Le commentaire (révélé à Internet Explorer Mac
seulement)
Internet Explorer pour Mac ne voit pas l’astérisque masqué par un
antislash et qui ferme le commentaire pour tous les autres navigateurs.
.nav {width:200px}
/*IE Mac ne voit pas l’astérisque qui suit l’antislash \*//*/
.nav {width:250px}
/**/
nav a une largeur de 200 px, sauf pour Internet Explorer Mac qui voit une
largeur de 250 px.
Le blanc souligné (révélé à Internet Explorer PC
seulement)
Internet Explorer PC ignore le blanc souligné apposé devant une pro-
priété. Les autres navigateurs ne le prennent pas en compte et le voient
comme une erreur de code.
.nav {_width:250px;width:200px}
nav a une largeur de 200 px, sauf pour Internet Explorer PC qui voit une
largeur de 250 px.
min-height et min-width (cachés à Internet Explorer
PC et Mac)
min−height et min−width, max−height et max−width sont des propriétés
indispensables pour des conteneurs dont on ne connaît pas la taille du
contenu et surtout dans un contexte où l’architecture de la page est
Relooker des formulaires
Double Poche CSS • 563
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
extensible selon la définition de l’écran de l’internaute. Or Internet
Explorer les ignore, ce qui pose des problèmes pour la mise en page avec

}
</style>
<body>
<div id="out-min-height">
<div id="in-min-height">
Votre contenu ici, long ou court à votre guise.
</div>
</div>
</body>
4
La réalisation du site
564 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
margin et padding
Les marges internes et externes sont gérées différemment par les naviga-
teurs. Chacun fait sa "cuisine" pour définir les marges des éléments. C’est
pourquoi, dès l’entrée, il est préférable de remettre tout à 0.
body {
margin: 0;
padding: 0;
}
Cette portion de code aide à positionner des éléments dans une page de
manière plus précise en mettant tous les navigateurs sur le même réglage.
Sinon les marges par défaut des différents navigateurs vont fausser
l’affichage.
Internet Explorer 7
Internet Explorer 7 est un projet dirigé par Dean Edwards, qui consiste en
une bibliothèque JavaScript compensant les manques d’Internet Explorer.
Ces caractéristiques sont les suivantes :
¶ Il répond aux sélecteurs CSS suivants :

aux problèmes avec les bidouillages proposés. Enfin, si certaines erreurs
sont rédhibitoires, utilisez Internet Explorer 7 pour les gommer. Il faut
quand même prendre en compte le fait que certains internautes ont
désactivé la fonction JavaScript sur leur navigateur.
Ce genre d’application est un gain de temps et permet d’utiliser par
exemple les pseudo-éléments :before et :after pour créer des cadres,
ou du moins de placer un haut pour les coiffer et un bas pour les chausser.
#cadre:before {
content:url(haut.png);
}
#cadre:after {
content:url(bas.png);
}
#cadre {
background-color:#b9b9b9;
border: 1px solid #555;
width:200px;
}
Ce genre de code est infaisable habituellement car Internet Explorer
n’accepte pas ces pseudo-éléments.
On trouve Internet Explorer 7 sur le site de Dean Edwards
(e/IE7/).
4
La réalisation du site
566 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
hr
<hr /> est la balise utilisée pour figurer une ligne de séparation. Elle est
peu employée. Mais avec les CSS, elle reprend du service.
Pour avoir un trait de séparation simple avec une CSS, il faut un code

Double Poche CSS • 567
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
display: block et une marge négative de 7 pixels, le trait est affiché
correctement sur Internet Explorer.
<style type="text/css">
hr {
display:block;
height: 1px;
margin: 0;
_margin: -7px 0;
padding: 0;
color: #03A;
background-color: #03A;
border: 0;
}
</style>
<body>
<div>Premier contenu</div>
<hr />
<div>Second contenu</div>
</body>
Le blanc souligné devant margin rend cette propriété invisible à tout autre
navigateur que Internet Explorer.
Ici les deux contenus sont séparés d’une ligne bleue de 1 pixel d’épaisseur
sans aucune marge. Une fois les marges à 0, tout ce que le développeur
ajoute comme marge dans les div ou dans le hr – en plus des 7 pixels de
marge négative – .est comptabilisé, par exemple margin: 6px appose une
marge d’1 px.
4.7
Conclusion

Les quelques sites présentés ont été choisis dans des domaines différents,
pour leur charte graphique harmonieuse et leur approche originale du code
ou d’une partie du code CSS.
Un site communicant
Le premier site communique beaucoup et bien autour de ses choix de code
CSS et de leurs conséquences (peu importe le code relatif aux menus
dynamiques). L’auteur a une volonté de partager ses trouvailles, de
bénéficier de l’écho des webmasters qui l’utilisent et ainsi de l’améliorer.
C’est exactement la philosophie des applications distribuées sous des
licences "open source".
L’auteur désigne les éléments invariables du code et les éléments qui
peuvent être modifiés sans interférer avec la fonctionnalité du menu. C’est
une vraie documentation, qui fournit des indications concrètes sur la page,
ainsi que sur des classes ou des identifiants.
5
Études de terrain
570 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.