 SELFHTML actuel Articles spécialisés Feuilles de style CSS |
|
 |
Roland Skop: |
|
|
 |
|
| Homepage-URL: |  http://skop.net/ |
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
 |
Lors de l'établissement d'une mise en page complexe avec les CSS, on est fréquemment confronté à des problèmes dus à l'implémentation insuffisante de la spécification CSS dans différents navigateurs. Il est possible d'éviter ces difficultés en employant certaines définitions. Pour ce faire, les propriétés qui posent problème sont remisées dans des passages qui ne sont pas compris par les navigateurs et qui sont ainsi sautés lors du rendu de la page.
Avant tout dans la version 4 du navigateur Netscape que l'on rencontre toujours encore fréquemment, l'implémentation des CSS est très insuffisante et de nombreuses définitions provoquent des résultats inattendus. Dans le premier exemple, il est expliqué comment vous pouvez protéger N4.x de telles feuilles de style.
Cependant même des navigateurs actuels, tout particulièrement l'Explorer Internet de Microsoft ne sont pas en mesure d'interpréter toutes les propriétés correctement. Le deuxième exemple explique comment contourner ce problème.
 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
@media all {
a { border: 1px solid #f00; }
}
-->
</style>
</head>
<body>
<p>Ce <a href="#">lien</a> est représenté avec un cadre rouge par les navigateurs qui interprètent @media .</p>
</body>
</html>
|
Pour Netscape 4.x, les liens auxquels a été affecté un cadre avec border: ne sont pas cliquables. Étant donné que ce navigateur n'interprète pas la
définition de formats pour différents médias de sortie
- dans l'exemple @media all -, a { border: 1px solid #f00; } est ignoré. Écrivez donc toutes les mentions qui posent problème dans ce passage.
Il est également possible de tenir Netscape 4.x à l'écart de vos feuilles de style en employant les modes d'incorporation ci-après:
<link href="style.css" rel="stylesheet" type="text/css" media="(média de sortie)"> dans l'entête de page (syntaxe HTML)@import url("style.css"); à l'intérieur des feuilles de style (syntaxe CSS)Pour mettre ce bogue à profit, établissez une feuille de style de base et incorporez-la dans vos pages comme d'habitude. Dans le fichier
style.css, que vous incorporez en plus comme il est mentionné ci-dessus, vous pouvez maintenant définir d'autres mentions sans „surmener“ pour autant Netscape 4.x.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
#contenu {
position: absolute;
width: 200px;
z-index: 1;
/* usw. */
}
#nav {
position: absolute;
top: 30px;
left: 150px;
width: 200px;
z-index: 2;
/* etc... */
}
#nav[id] {
position:fixed;
}
-->
</style>
</head>
<body>
<div id="nav">
<p>Ce passage est fixe avec Mozilla, Opera et Konqueror.</p>
<p>Avec les navigateurs qui ne comprennent pas le sélecteur d'attribut [id],
ce passage est positionné de façon absolue et, de ce fait, défile avec l'écran.</p>
</div>
<div id="contenu">
<p>Texte plein</p>
<!-- etc.... -->
</div>
</body>
</html>
|
Le mode de positionnement
au moyen de position:fixed conduit l'Explorer Internet à une représentation erronée.
C'est pourquoi, dans la feuille de style, le DIV est tout d'abord positionné de façon absolue avec l'ID nav. Ensuite, la propriété position:fixed est affectée à ce passage à l'aide du sélecteur d'attribut [id]. La spécification sur les 
sélecteurs CSS2 stipule: E[foo] Correspond à tout élément E avec l'attribut "foo" (quelles qu'en soient les valeurs)..
Cela veut dire dans l'exemple que le sélecteur d'attribut utilisé #nav[id] a un effet sur l'élément nav, si ce dernier possède un attribut id, indépendamment de son contenu. L'Explorer Internet n'interprète pas de sélecteurs d'attribut, et par l'emploi de ceux-ci il est donc possible de lui cacher les feuilles de style qui le „surmèneraient“.
Cette méthode est également bien appropriée pour contourner le problème occasionné par le modèle des boîtes. Positionnez tout d'abord les éléments de telle façon qu'ils soient représentés correctement par le MSIE et modifiez ensuite les tailles en leur donnant les valeurs correctes en mettant cette astuce en pratique.
L'exempe contient quelques paragraphes de plein texte pour augmenter la taille de la page. Il est ainsi possible de constater la fixation du passage #nav avec les navigateurs Mozilla, Opera et Konqueror lorsque vous faites défiler la page.
| |
Les adresses qui suivent sont recommandées pour mieux comprendre les exemples ci-dessus ou pour approfondir et apprendre d'autres possiblités.
SELFHTML: Définition de formats pour différents médias de sortie
SELFHTML: Diverses feuilles de style séparées pour différents médias de sortie
Traduction du W3C: Les sélecteurs d'attribut dans les CSS2
How to hide CSS from buggy browsers
|
| SELFHTML actuel Articles spécialisés Feuilles de style CSS |