Aller au menu - Aller au contenu

Icône CSS partie 1

Par Avatar Sébastien de la Marck (Thunderseb)
Mise à jour : 12/05/2009
1 531 visites depuis 7 jours, dont 190 sur ce chapitre classé 85/786
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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 que vous 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 utiles :

Retour en haut

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
1
2
3
4
5
6
h1 {
   color: #000000;
}
h1:hover { /* Pseudo-classe */
   color: #FF0000;
}


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
1
2
3
4
5
6
h1 {
   color: #000000;
}
h1:active { /* Pseudo-classe */
   color: #FF0000;
}


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 :D

:focus



Code : CSS
1
2
3
4
5
6
textarea {
        background: #999999;
}
textarea:focus {
        background: #FFFFFF;
}


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 :D ).

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 :D

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 :

  1. Via la propriété CSS behavior qui rendra invalide votre page CSS, mais est simple et courte
  2. 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 ;)


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 ;)



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.



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.
Retour en haut

Border : inset et outset

Arthas231 m'a fait remarquer 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 :

Image utilisateur


Image utilisateur
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
1
2
3
4
5
6
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êmes-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 :

Image utilisateur


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.
Retour en haut

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é white-space avec comme valeur nowrap, comme ceci :

Code : CSS
1
2
3
4
#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
1
2
3
4
5
6
#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.

Retour en haut

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
1
2
3
4
5
hr {
        color: #FF0000;
        background-color: #FF0000;
        height: 1px;
}


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
1
2
3
4
5
6
hr {
        color: #FF0000;
        background-color: #FF0000;
        height: 1px;
        border: #FF0000;
}


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

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 :D )

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

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
1
2
3
4
div.hr {
        height: 15px;
        background: #FFFFFF url(balise_hr_bg-image.gif) no-repeat scroll center;
}


Code : HTML
1
<div class="hr"></div>


Au fait, je me suis inspiré de cet article
Retour en haut
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
8 commentaires pour "CSS partie 1"
Note moyenne : 3.58 / 4 (26 votes)
Pseudo Commentaire
Hors ligne Anonyme # Posté le 02/07/2007 à 10:09:38

Génial ce tuto, super.
mais pour l'extension IE TAB, ça ne marche que sous Windows. et je ne suis pas sous Windows (heureusement, manquerait plus que ça! :troll:)

pour ceux qui on des systeme basé Unix, il y a Wine + ie4linux. Mais pour moi qui fait du php, je n'arrive pas à configurer IE pour accepter les cookies. Dommage.

sinon, la solution Js des méta-propriétés avec IE un problème: l'utilisateur peut avoir désactivé Javascript!

la solution que je préfère est le behavior en conditionnel juste pour IE

sinon, pour hr, pour respecter la sémentique(je pense aussi aux navigateurs en texte(w3m), qui sont pratiques lors d'un crash du serveur X), un border:1px solid black ou border:none ne ferai-t-il pas l'affaire ? (j'ai pas IE ou Opera sous la main, désolé)
Hors ligne ppff # Posté le 20/08/2007 à 21:53:28
Vive les Zér0s!

 Bravo c'est génial ton tuto est super utile mais quand même fais attention aux fautes car dans ce mini-tuto-là en particulier il y en a beaucoup. ;)
Allez visiter mon site! ==>Image utilisateurEn conctruction.
 
Hors ligne sharo # Posté le 08/10/2008 à 14:12:31

euh... oui, très bon tutoriel, en effet, mais notez éventuellement que le hack whateverhover ne permet pas le fonctionnement de la pseudo-classe :focus sous IE7.

Exemple de solution : http://htmldog.com/articles/suckerfish/focus/

Merci.
Hors ligne hbishida # Posté le 19/05/2009 à 09:53:11

salut,

je ne comprend pas trop la partie "behaviors via une expression conditionnelle" il faut le mettre directement dans le html ? car moi j'ai un fichier php avec du html dedans et cela ne marche pas c'est surement aussi du a un probleme d'adressage mais deja je ne comprend pas trop ca :

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

voila si qlq'un pouvait m'eclairer merci
Hors ligne Cryde # Posté le 10/12/2009 à 23:00:21
Mouhahahahaha
Avatar
close

Études : Université Libre de Bruxelles (ULB)

 Pour compléter la liste de hack : http://paulirish.com/2009/browser-specific-css-hacks/
Découvrez Music-All, n'hésitez pas à commenter le projet ici : topic du project
 

Voir tous les commentaires