[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Faire un site compatible IE et FF > Faire un site compatible IE et FF > CSS partie 1 > Lecture du tutoriel

CSS partie 1

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Sommaire du chapitre :

Les Hacks CSS
Pseudo-classes hover, active et focus
Border : inset et outset
Bug de la boîte fantôme
Une histoire de HR

Les Hacks CSS

Vous avez certainement déjà entendu, ou lu des articles qui parlent des hacks CSS. Mais au fond, c´est quoi un hack ?

Oui, c´est quoi ?

Eh ben un hack CSS, c´est tout simplement l´exploitation d´une carence dans la gestion des CSS d´un navigateur. Les hacks ne s´appliquent pas nécessairement à Internet Explorer.

Beaucoup de gens disent d´utiliser les hacks. Mais le gros problème des hacks, est qu'ils reposent sur une déficience d'une version de navigateur qui peut être corrigée du jour au lendemain. Cela est tout à fait vrai dans le cas d´IE 7, qui corrige certaines défaillances (cf http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx).

Moi, je ne vais pas trop vous en parler, car je suis un peu contre, et il est difficile pour quelqu´un qui est contre quelque chose d´en parler positivement :lol:

. En plus, un tutorial complet sur l´utilisation des hacks serait quelque chose de très important à concevoir, car des hacks, il y en a pas mal

Donc, essayez d´éviter d´utiliser des hacks. Il vaut mieux vous tourniez vers la solution des instructions conditionnelles. Mais je suis quand même gentil, et je vais vous proposer une liste de liens pouvant vous être utile :

Pseudo-classes hover, active et focus

Comme vous le savez (ou devriez le savoir), un navigateur dit "aux normes" peut appliquer les pseudo-classes hover et focus sur n?importe quelle balise.

Bref rappel

:hover

Souvenez-vous, la pseudo-classe hover, c?est ceci :

Code : CSS

h1 {
   color: #000000;
}
h1:hover { /* Pseudo-classe */
   color: #FF0000;
}

Test du code

Donc, au passage de la souris sur la balise H1, le texte, qui était noir d?origine, devient rouge.

C?est un bref rappel, tout cela est expliqué dans le cours XHTML/CSS de M@teo.

Le problème avec IE, c?est qu?il ne reconnaît cette fameuse pseudo-classe que pour les balises A (les liens hypertextes (ou hyperliens)).

:active

Code : CSS

h1 {
   color: #000000;
}
h1:active { /* Pseudo-classe */
   color: #FF0000;
}

Test du code

Dans cet exemple, si vous cliquez sur l?élément H1, le texte se colorera en rouge. Bien évidemment ça ne marche pas avec le pauvre IE

:focus

Code : CSS

textarea {
        background: #999999;
}
textarea:focus {
        background: #FFFFFF;
}

Test du code

Dans cet exemple, la couleur de fond de l?élément TEXTAREA deviendra blanche si le curseur d?écriture s?y trouve. Internet Explorer ne gère pas cette pseudo-classe.

Passons au script

Merci, tu nous informes que ça ne va pas, et alors ?

Alors ? Eh ben, à tout problème il y a une solution ne dit-on pas ?

La solution, n?est pas de moi, mais je vous la donne quand même (en citant la source, évidemment

Place au Javascript !

Créez un fichier dénommé csshover.htc, avec un éditeur de texte (Bloc-notes) ou un éditeur HTML quelconque. Dans ce fichier fraîchement créé, copiez-collez le code ci-dessous.

Un fichier HTC est une sorte de fichier Javascript externe qui permet d?agir sur le comportement des éléments XHTML, tout cela, dans Internet Explorer.

Citation : Thunderseb

En raison de problème avec les balises de code, j'ai placé le fichier csshover.htc sur mon FTP. Il est exactement ici.

Le script vient de ce site : CSSHover

Personnellement, je ne saurais pas vous l?expliquer, donc, je ne vais pas le faire, de peur de dire des bêtises. De toute façon, l?important, c?est que cela marche

Maintenant, il s?agit de lier csshover.htc à la page qui contient les pseudo-classes. Pour cela, il y a 2 manières de procéder :

Via la propriété CSS behavior qui rendra invalide votre page CSS, mais est simple et courte
Via un petit script Javascript intégré dans la page. C?est valide, mais il faut le mettre sur toutes vos pages. Cette deuxième méthode m'a été proposée par Steven. Merci à lui

Utilisation invalide avec les CSS

Dans votre feuille CSS, pour la balise body, faites comme ceci :

Code : CSS

1
2
3

body { 
   behavior:url("csshover.htc"); 
}

Behavior signifie comportement. C?est en fait une propriété, créée par Microsoft, et qui permet d?attacher un fichier HTC. Cette propriété n'est pas valide W3C.

Et voilà, ça devrait marcher

Test du code

Petite note

La propriété behavior pose un problème. En effet, elle n?est pas valide ! Et pour cause, c?est une propriété propriétaire de Microsoft. Personnellement, enfin, on va peut-être m?engueuler ou me taper sur les doigts, mais la validité d?une page CSS n?est pas ma préoccupation première. Ce que je cherche, c?est une validation complète du code HTML, une bonne sémantique et un code bien propre. Dans mon optique, les CSS sont accessoires (on s?en sortait bien sans avant, non ? ). C?est un très beau langage, qu'il faut utiliser (à la poubelle des balises font

), mais je ne pense pas que la non-validité d?une page CSS à cause d?une seule petite propriété, qui nous permet de résoudre des problèmes de navigateur, puisse poser un réel problème. Mais c?est mon avis, et comme tous les avis, il est discutable

Spécification de behavior

Utilisation valide avec les CSS

Si le fait d?avoir une page CSS invalide vous fait devenir chauve, voici une autre solution, valide : utiliser behaviors via une expression conditionnelle, comme ceci :

Code : Autre - HTML

1	<!--[if IE]><style type="text/css">body{ behavior: url("csshover.htc") }</style><![endif]-->

Utilisation valide avec Javascript

Pour cette méthode, nous n?allons pas utiliser un fichier .htc, mais un fichier .js (Javascript). Renommez simplement votre fichier csshover.htc en csshover.js. Cela dit, il faut apporter quelques modifications au fichier. En effet, dans le .htc il y a 2 balises : ATTACH et SCRIPT. Supprimez la balise ATTACH et supprimez les balises SCRIPT d?ouverture et de fermeture sans supprimer le contenu. Je ne vais pas afficher la source ici, mais vous pouvez la voir derrière ce lien : http://nayi.free.fr/dev/xhtml-css/csshover.js

.

Dans votre HEAD, placez ceci :

Code : HTML

1	<script type="text/javascript" src="csshover.js"></script>

C?est le script qui fera le lien entre la page en cours et le fichier .js.

Maintenant, il s?agit d?associer l?événement onload pour « actionner » le script au chargement de la page. Faites comme ceci :

Code : HTML

1	<body onLoad="parseStylesheets()">

Au chargement de la page (événement onload), la fonction parseStylesheets() va être appelée. C?est cette fonction qui est contenue dans le fichier csshover.js.

Test du code

Que ce soit avec le fichier .htc ou .js, si le Javascript est désactivé, ça ne fonctionnera pas ! Je n?ai qu?une chose à dire sur ça : temps pis pour ceux qui le désactivent

Pour finir, voici un petit exemple de menu déroulant en full-CSS : http://www.xs4all.nl/~peterned/examples/cssmenu.html.

Border : inset et outset

Arthas231 m'a fait remarqué une différence d'affichage entre Firefox-Netscape et Internet Explorer-Opera. Cette différence touche en fait les valeurs inset et outset de la propriété CSS border.

Par exemple, ce code ne produit pas la même chose avec le couple IE-Opera et avec le couple FF-NN (Firefox-NetscapeNavigator) :

Code : CSS

1
2
3

div {
        border: 2px inset blue;
}

Le résultat, c'est ceci :

Il est à noter que ce n?est pas, à ce que l?on pourrait croire, un bug de la part IE et d?Opera. Je suis allé voir la doc du W3C, et il y est juste marqué que inset marque un effet renfoncement, et outset un effet ressortant :

inset : The border makes the box look as though it were embedded in the canvas.
outset : The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.

Et le W3C ajoute que les navigateurs sont libres d?utiliser leur propre algorithme de coloration. Le W3C n?impose pas la façon de colorer les bordures :

Citation : W3C - Box Model

All borders are drawn on top of the box's background. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.

La façon de rendre compatible inset et outset pour tous les navigateurs est de spécifier la couleur de chaque bordure (haut et gauche vont ensemble, ainsi que droite et bas), comme ceci :

Code : CSS

div {
        border-top: 2px solid #00008D;
        border-left: 2px solid #00008D;
        border-bottom: 2px solid #B2B2FF;
        border-right: 2px solid #B2B2FF;
}

Evidemment, vous devrez tester avec Firefox en utilisant inset, de façon à faire une capture d?écran, et ainsi pouvoir, avec un éditeur d?image, retrouver le nom de la couleur de chaque bordure.

Arthas231 s?est amusé à tester les différences avec les couleurs habituelles. L?image est divisée en 2 colonnes, elles même divisées en 2. A gauche se trouve le rendu avec Internet Explorer, et à droite, avec Firefox. Dans chaque cadre de droite, les 2 couleurs hexadécimales sont données de façon à rendre compatible avec tous les navigateurs :

Ah, au fait, une dernière petite chose : apparemment, dans Internet Explorer 7, la différence d?interprétation a été modifiée. IE7 fait maintenant comme Firefox.

Bug de la boîte fantôme

Le bug de « la boite fantôme » est en rapport avec la propriété CSS white-space.

Un élément, un paragraphe par exemple (#p), se voit attribuer la propriétés white-space avec comme valeur nowrap, comme ceci :

Code : CSS

#p {
        white-space: nowrap;
        margin: 0;
}

Code : HTML

1	<div id="boite"><p id="p">Lorem ipsum [...] imperdiet consectetuer.</p></div>

Ce #p est placé dans un élément conteneur, ici, un div (#boite). Cet élément se voit attribuer toutes sortes de propriétés, en en particulier la propriété width, comme cela :

Code : CSS

#boite {
        border: 5px  solid #FF0000;
        width: 500px;
        margin: 20px; 
        font-family: Arial, Helvetica, sans-serif;             
}

En toute logique, si le contenu de #p occupe plus de largeur que celle définie par #boite, ce contenu va alors sortir de #boite. C?est comme cela que ça doit se dérouler. Mais le moteur de rendu d?Internet Explorer 5.x et 6 (et Opera 7) ne l?entend pas de cette façon. En effet, le contenu de #p va pousser la bordure droite de #boite, de façon à adapter ledit conteneur à la largeur du contenu de #p.

Test du code

Une histoire de HR

Parlons un peu de la balise hr. Rappelez-vous, c?est la balise qui permet de placer une ligne horizontale (aussi appelée règle). Encore une fois, nous mettons les pieds en plein dans l?harmonie du rendu des navigateurs :lol:

Le problème avec hr, c?est pour leur donner un style. Par exemple, si vous voulez les colorer, vous devez utiliser background-color. Ce qui est un peu logique. Cela marchera? sous tous les Gecko, pas sous IE, car pour celui-ci, vous devez passer par la propriété color.

Jusque-là, ça ne pose pas beaucoup de problèmes. Le problème, cette fois ci, vient d?Opera. Pour que votre hr soit colorée avec Opera, vous devez attribuer une hauteur. Voici le petit code :

Code : CSS

hr {
        color: #FF0000;
        background-color: #FF0000;
        height: 1px;
}

Test du code

Mais ce n?est pas tout. Le rendu qu?Opera offre est bizarre, l?hr est foncée au dessus, et rouge (dans l?exemple) en dessous. Pour cela, il vous faut encore définir la couleur de la bordure, ce qu?il n?y a pas besoin de faire sous les Gecko et IE :

Code : CSS

hr {
        color: #FF0000;
        background-color: #FF0000;
        height: 1px;
        border: #FF0000;
}

Test du code

Voilà, heureusement que IE est le plus problématique hein

Evidemment, vous pouvez bien sur appliquer des background-image, une hauteur plus grande, un style de bordure?

Oui, parlons-en de l?image d?arrière-plan ! (Quelle rime remarquable

)

Essayez, avec background-image, de placer une image d?arrière-plan. Spécifiez bien une hauteur.

Test du code

Sous Firefox et les Gecko, pas de problème. Mais sous IE et Opera, ça ce corse

En effet ceux-ci affichent une bordure en relief. On ne sait pas y remédier en jouant simplement avec la balise hr. Il faut faire intervenir un div :

Code : CSS

div.hr {
        height: 15px;
        background: #FFFFFF url(balise_hr_bg-image.gif) no-repeat scroll center;
}