Une page avec un code HTML correct est tout à fait utilisable sans CSS, comme l'a montré le 
premier exemple de mise en page sans CSS. L'emploi des propriétés CSS comme float, surtout avec margin, peut mener à un affichage erroné voire impossible avec d'anciens navigateurs comme Netscape 4. C'est pourquoi il est conseillé de n'atteindre avec les définitions CSS avancées que les navigateurs modernes. Pour ceci il existe la méthode de ne pas inscrire, comme dans les exemples de ce chapitre, les définitions CSS dans la partie <style> de chaque fichier, mais dans un fichier CSS séparé, puis d'incorporer celui-ci par la méthode @import. En indiquant le média de sortie, comme par exemple all, on excluerait aussi Internet Explorer pour Windows
Vous pouvez séparer les définitions CSS en deux fichiers: un fichier pour de simples indications de couleurs et de texte que même d'anciens navigateurs interprêtent sans problème, et un autre fichier pour la mise en page. Vous incorporerez le premier par un élément link, aussi pour d'anciens navigateurs. L'avantage est, entre autre, que lors du chargement du second fichier par @import, l'affichage avec Internet Explorer de la page sans les définitions de style, pendant un court laps de temps, sera évité.
Certaines définitions CSS nécessitent une feuille de style supplémentaire pour l'impression, par exemple lorsque vous avez indiqué un texte de couleur claire sur un fond foncé. Vous relierez ce fichier CSS - aussi pour tous les navigateurs - par un élélement link avec une indication de média. Vous pourrez en profiter pour cacher, par display:none, certaines parties peu importantes pour l'impression, comme le menu par exemple.
Un fichier HTML auquel sont incorporés plusieurs fichiers CSS aura cette allure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mise en page avec les CSS</title>
<link rel="stylesheet" type="text/css" href="base.css">
<style type="text/css">
@import url(moderne.css);
/* définitions CSS spécifiques à la page */
</style>
<link rel="stylesheet" type="text/css" media="print" href="impression.css">
</head>
<body>
<!-- code source HTML -->
</body>
</html>
Netscape 4 n'accepte, lors d'un fichier incorporé par un élément link, qu'un seul média de sortie, screen; vous pouvez donc l'exclure aussi en indiquant d'autres médias de sortie comme par exemple: all.
Les indications @import doivent impérativement être notées avant d'autres définitions CSS.
Pour rendre accessibles des fichiers CSS pour certains médias de sortie seulement aux navigateurs modernes y compris Internet Explorer, incorporez un fichier CSS muni de l'attribut media correspondant, par un élément link et référencez dans ce dernier un autre fichier CSS par @import. Vous pouvez aussi donner des instructions CSS par un fichier CSS muni de définitions de format pour différents médias de sortie et incorporé par @import.
Internet Explorer interprète certes la plupart des mises en page avec les feuilles de style, et n'a, par conséquent, pas besoin d'en être exclu comme d'autres, plus anciens navigateurs. L'interprétation est cependant souvent erronnée ou incomplète, et une correction ou bien des définitions alternatives peuvent devenir nécessaires. Une possibilité consiste à d'abord noter les instructions CSS d'après les recommandations du W3C, et à ensuite incorporer un fichier CSS spécial pour Internet Explorer. Heureusement, Microsoft offre une solution valide pour Internet Explorer sous Windows avec les 'commentaires conditionnels' (les versions pour Mac n'étant de toute façon pas comparables en ce qui concerne l'interprétation des feuilles de style). Il s'agit de commentaires spéciaux à noter dans le code HTML et contenant une condition, laquelle est interprété par Internet Explorer depuis la version 5 qui, ensuite, exécute ou non le code HTML contenu dans le commentaire conditionnel. Tous les autres navigateurs ignorent cette instruction comme s'il s'agissait d'un simple commentaire.
Les exemples suivants montrent l'incorporation d'un fichier CSS pour tous les navigateurs, d'un fichier uniquement pour navigauteurs modernes sauf Internet Explorer (la version 7 comprise), et, ensuite, quelques fichiers CSS incorporés dépendants d'une condition:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mise en page avec des CSS</title>
<link rel="stylesheet" type="text/css" href="base.css">
<style type="text/css">@import url(moderne_sans_ie.css) all;</style>
<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">@import url(ie6.css);</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">@import url(ie5-6.css);</style>
<![endif]-->
<!--[if lte IE 5.5999]>
<style type="text/css">@import url(ie55-.css);</style>
<![endif]-->
<!--[if gte IE 5.5]>
<style type="text/css">@import url(ie55+.css);</style>
<![endif]-->
</head>
<body>
<!-- code source HTML -->
</body>
</html>
Comme vous pouvez le voir dans ces exemples, on peut donner des instructions concernant les versions, qu'Internet Explorer compare avec le numéro de sa version inscrit dans le système Windows (si pour raisons de tests vous avez installé plusieurs versions de ce navigateur, il sera tenu compte de la version du système opérationnel tant que le registre de Windows n'aura pas été manipulé).
Les fichiers CSS incorporés par des commentaires conditionnels seront chargés par les versions suivantes d'Internet Explorer:
[if IE]: toutes les versions (depuis 5.0),
[if IE 6]: toutes les versions 6,
[if lt IE 7]: toutes les versions avant 7 (less-than = plus petit que),
[if lte IE 5.5999]: toutes les versions jusqu'à 5.5 (less-than or equal = plus petit ou égal à),
[if gte IE 5.5]: toutes les versions depuis 5.5 (greater-than or equal = plus grand ou égal à).
Dans la pratique, il suffit, la plupart du temps, de distinguer entre les versions à partir d'Internet Explorer 6 et les plus anciennes, car dans le mode conforme au standard, Internet Explorer depuis la version 6 ne commet plus certaines erreurs connues des précédentes versions. Il applique généralement de manière correcte les propriétés CSS, en particulier le modèle de boîte spécifié par le W3C. On peut se passer de différenciation lorsque l'Internet Explorer 6 est mis en quirks mode, mode non compatible aux standards mais compatible avec les versions descendantes; ceci peut être réalisé par un simple commentaire HTML (ou bien, avec XHTML, par l'indication d'une déclaration XML) dans la toute première ligne du code source car, cela empêche ce navigateur de reconnaître la déclaration doctype qui suit. Internet Explorer 7 reconnaît une déclaration XML, un commentaire HTML en première ligne le place cependant en mode non compatible aux standards. Tant que vous utilisez XHTML, et tant que seule la version 7 d'Internet Explorer atteint une présentation correcte dans le mode conforme au standard, cette déclaration XML se justifie.
Par principe, vous ne devriez pas placer Internet Explorer en mode non compatible par un aiguillage de type de document, car ceci influencerait aussi d'autres navigateurs négativement. Opera depuis la version 7, par exemple, utiliserait alors le modèle de boîte erroné de Microsoft.
De petites corrections suffisent souvent pour obtenir une interprétation uniforme d'une mise en page avec des CSS. La plupart du temps, il suffit de distinguer Internet Explorer des autres navigateurs par un aiguillage de navigateurs (aussi appelé "hack"). En effet beaucoup de définitions CSS ne sont pas interprétées par Internet Explorer selon les normes en vigueur. Les aiguillages de navigateurs utilisent des sélecterus spéciaux ou des manières d'écrire interprétées différemment, ou ignorées selon les navigateurs. L'exemple suivant montre un choix d'aiguillages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aiguillages CSS de navigateurs</title>
<style type="text/css">
body, p a {
color: white; background: black;
font-family: Helvetica, Arial, sans-serif;
}
p {
padding: 0.2em;
}
#attribut {
color: red;
}
p[id]#attribut {
color: lime;
}
p[id] {
border: 1px solid green;
}
#selecteurfilial {
color: red;
}
html>body #selecteurfilial {
color: lime;
}
#starhtml {
color: lime;
}
* html #starhtml {
color: red;
}
#starplushtml {
color: lime;
}
*:first-child+html #starplushtml {
color: red;
}
#commentaire {
color: red;
}
#commentaire/* */ {
color: lime;
}
#atmedia {
color: red;
}
@media all {
#atmedia {
color: lime;
}
}
#element {
color: red;
}
p#element {
color: lime;
}
#tanhack {
color: lime;
}
* html #tanhack {
color: red;
c\olor: lime;
}
</style>
<style type="text/css">
#tantek {
color: red;
}
#tantek {
voice-family: "\"}\"";
voice-family: inherit;
color: lime;
}
</style>
</head>
<body>
<h1>Aiguillages CSS de navigateurs</h1>
<p>Les exemples suivants seront affichés en vert avec une bordure selon le mode standard,
en rouge et sans bordure sinon.</p>
<p id="attribut">Sélecteur d'attribut:
ignoré par Internet Explorer, il définit toutes les bordures ici.</p>
<p id="selecteurfilial">Sélecteur filial:
ignoré par Internet Explorer jusqu'à la version 6 comprise.</p>
<p id="starhtml">'star HTML':
interprété par erreur par Internet Explorer jusqu'à la version 6 comprise.</p>
<p id="starplushtml">'star plus HTML':
interprété par erreur par Internet Explorer 7.</p>
<p id="commentaire">Sélecteur avec commentaire:
ignoré par Internet Explorer jusqu'à la version 5 comprise pour Windows et Mac.</p>
<p id="atmedia">Indication de média:
ignoré par Internet Explorer 4 pour Windows et les versions Mac.</p>
<p id="element">Sélecteur d'ID:
ignoré par Netscape 4.</p>
<p id="tantek">Hack 'tantek':
interprété correctement par Internet Explorer depuis la version 6<br>
- mène à des erreurs dans toute la partie style avec Netscape 4!</p>
<p id="tanhack">Hack 'tan':
influence seulement Internet Explorer avant la version 6<br>
- une combinaison de hacks 'star HTML' et de hacks HTML 'tantek' pour des définitions isolées.</p>
</body>
</html>
p[id] {
propriete:valeur;
}
Sélectionne un élément (ici <p>), qui comporte un attribut id avec une certaine valeur - et de la sorte, tous les exemples cités ici. Equivaut à l'indication #ID le rend en fait superflu, mais entraîne l'exclusion de tous les Internet Explorer pour Windows jusqu'à la version 6 ainsi que Netscape 4.
html>body #ID {
propriete:valeur;
}
Sélectionne un élément avec le ID "ID", qui se trouve à l'intérieur de body, lequel est un élément enfant direct de html. Indiquer ceci serait en soi superflu, mais cela exclut également tous les Internet Explorer pour Windows jusqu'à la version 6 et Netscape 4.
Attention: Le sélecteur body>#ID serait mal interprété par des versions plus anciennes de Internet Explorer.
* html #ID {
propriete:valeur;
}
Ceci est un sélecteur valide mais dépourvu de sens, car html n'a pas d'élément parent (le sélecteur universel * veut dire un élément quelconque). Tous les Internet Explorer pour Windows jusqu'à la version 6 acceptent pourtant cette notation et interprètent les déclarations notées.
Ce sélecteur exclut donc tous les autres navigateurs y compris Netscape 4.
*:first-child+html #ID {
propriete:valeur;
}
Ceci est aussi un sélecteur valide mais dépourvu de sens, accepté seulement par Internet Explorer 7 (et peut-être les versions futures). Opera tiendrait aussi compte de manière erronnée du sélecteur plus simple *+html. Faites bien attention que vous ne pouvez pas combiner ce sélecteur
avec le hack 'star HTML' dans une seule règle et que, en cas de besoin, vous devrez noter deux règles pour tenir compte de tous les Internet Explorer.
#ID/* */ {
propriete:valeur;
}
Un commentaire CSS juste après le sélecteur exclut Internet Explorer 4 et 5 pour Windows et Mac.
@media all {
#ID {
propriete:valeur;
}
}
Cette variante sélectionne, ici, un élément avec le ID "ID" pour tous les types de médias, ce qui exclut les anciens navigateurs: Internet Explorer 4 pour Windows et toutes les versions Mac ainsi que Netscape 4.
p#ID {
propriete:valeur;
}
Sélectionne un élément (ici <p>) avec le ID "ID", ce qui a comme conséquence l'exclusion de Netscape 4.
* html #id {
p\ropriete:valeur;
}
Cette notation annulle d'abord, pour Internet Explorer 6, les propriétés adaptées aux anciens Internet Explorer pour Windows à l'intérieur de l'aiguillage 'star HTML'. Placez le signe \ n'importe où à l'intérieur de la propriété, mais pas juste avant une des lettres comprises entre a et f, car il serait interprété alors comme une valeur hexadécimale. Cet aiguillage est aussi utile pour corriger le faux modèle de boîte pour les ancienes versions de Windows Internet Explorer, mais elle est un peu lourde à appliquer à cause de la triple indication de chaque valeur. La combinaison avec l'aiguillage 'star HTML' exclut des problèmes avec d'autres navigateurs. Le chapitre concernant l'utilisation du modèle de boîte contient un tel exemple.
sélecteur {
propriete:valeur; /* déclaration pour IE 5.x */
voice-family:"\"}\""; /* à partir de celle-ci, IE 5.x ignorera les déclarations qui vont suivre */
voice-family:inherit;
propriete:valeur; /* correction pour les autres navigateurs */
}
Cette méthode exploite une erreur chez Internet Explorer de la version 5.x. D'abord, la déclaration prévue pour Internet Explorer 5.x est notée, et ensuite on attribuera la valeur dépourvue de sens mais néanmoins valable "}" à la propriété de sortie vocale voice-family - les guillemets droits sont masqués conformément à la syntaxe CSS par des barres obliques inversées et font partie de la valeur attribuée à la propriété. Des navigateurs travaillant correctement n'en seront pas influencés négativement. Les anciennes versions d'Internet Explorer ne tiendront pas compte des indications qui suivent l'accolade "}", interprétant celle-ci comme l'accolade qui termine une déclaration. La déclaration définie à la première ligne sera acceptée par tous les navigateurs, et la correction pour les navigateurs conformes aux standards qui lui suit sera ignorée par IE 5.x. C'est pourquoi cet aiguillage est utile pour corriger les effets du mauvais modèle de boîte de Microsoft (voir l'exemple) dans des documents pour lesquels Internet Explorer 6 a été mis en mode conforme au standard par une déclaration de type de document. N'utilisez le hack 'Tantek' que dans un fichier CSS inaccessible à Netscape 4, car ce navigateur présenterait une grosse erreur dans l'interprétation de tout le domaine des styles.
Les aiguillages de navigateurs exploitant une implémentation insuffîsante ou erronnée des CSS peuvent causer des effets indésirables avec les navigateurs actuels. Il n'est pas non plus exclu que des navigateurs futurs présentent encore le défaut que vous corrigerez par un hack, mais que cela ne fonctionne plus, car la partie de la programmation qui justement permettait l'emploi de cet aiguillage aura été réparée. C'est pourquoi il est vivement conseillé de tester avec différents navigateurs le résultat obtenu par un aiguillage, et de répéter cette opération régulièrement lors de la sortie de nouvelles versions.
Le plus sûr est de renoncer aux aiguillages CSS dans la mesure du possible.
|
| |
 |
Introduction au XML
|
 |
Barres de menu avec des CSS
|
 SELFHTML/Aides à la navigation Feuilles de style CSS Mise en page avec des CSS |
|
© 2007 Redaktion SELFHTML / © 2007 Traduction Beate Niklewicz
selfhtml@fr.selfhtml.org