CSS + IE6 : comportement hover sur tous élements HTML
Internet Explorer 6, version fournie avec Windows XP est LA plaie de tout webmaster. Et quand j'emploie le mot "plaie", je suis même plutôt gentil... Ce navigateur devrait même être banni tellement il ne respecte pas les standards d'affichage et de codage...
Si vous utilisez le comportement :hover sur autre chose qu'une balise de lien (a) avec IE6, ça ne marche tout simplement pas (ou du moins ça bug énormément). Le "hover" permet de définir un comportement lorsque vous survolez l'élément avec la souris.
Sous IE6, pour pouvoir faire du :hover sur autre chose qu'une balise A, vous devez utiliser un "hack".
- Télécharger le fichier csshover3.htc que vous trouverez sur http://www.xs4all.nl/~peterned/csshover.html
- Le copier dans le dossier que vous utilisez pour vos feuilles de style.
- Rajouter dans la partie head de vos fichiers .html le code suivant :
<!--[if IE 6]> <link rel="stylesheet" href="css/ie6.css" /> <![endif]-->
(ce code permet de définir de nouvelles règles spécifiques pour IE6. Ces règles seront définies dans la feuille de style ie6.css)
Dans ie6.css :
body {
behavior: url("csshover3.htc");
}
Maintenant vous pouvez faire un hover avec d'autres balises que le A (exemple des images ou des div).
Améliorer la présentation de son wiki Mediawiki avec des CSS
Les thèmes fournis avec Mediawiki sont plutôt pauvres et ressemblent à l'interface de Wikipedia. Sans rentrer dans la création d'un thème complet pour Mediawiki (je m'en fou de l'aspect global, c'est qu'un wiki local que j'ai installé et dont je suis le seul à consulter), j'ai quand même envie de rajouter des fonctionnalité d'affichage. Par exemple pour des paragraphes importants, j'aime qu'ils soient mise en valeur.
En tenant compte des possibilités de CSS, le code HTML directement à insérer dans une page wiki doit ressembler à ceci :
<p class="important">
<strong>NOTE</strong> : Pour garder une compatibilité avec la version 4 de PHP, il est possible de déclarer l'attribut avec le mot-clé
var, qui est équivalent au nouveau mot-clé public. L'utilisation de la syntaxe PHP 4 provoquera une erreur de niveau E_STRICT
pour avertissement.
</p>
Pour afficher de manière très visibles ce paragraphe avec le style "important", il faut que Mediawiki en tienne compte. Pour cela on doit insérer le contenu de la feuille de style directement dans la page du Wiki à l'adresse /MediaWiki:Common.css. Ainsi mon fichier /MediaWiki:Common.css ressemble à ceci :
/* Le CSS placé ici sera appliqué à tous les habillages. */
.important {
border: 2px solid black;
background: #F60;
color: white;
padding: 20px;
font-size: 110%;
}
Comment empêcher <pre> de faire dépasser le texte de la page ?
En HTML, la balise pre dit "pré formatée" permet de conserver la mise en page d'un texte sans aucune interprétation. C'est très utile pour conserver les espaces ou les caractères spéciaux normalement interpretés par HTML (comme < ou >). Mais cette balise a un gros défaut, c'est que si la ligne est très longue, elle va dépasser de la page.
Recommandée dans la rédaction d'articles de wiki de leur intranet, beaucoup d'employés recourent à la balise pre pour un peu tout et n'importe quoi. Puis lorsque les employés impriment certaines documentations, le texte est tronqué. Pas très sérieux tout ça...
La solution est de recourir à un ajout de code CSS, directement dans le fichier main.css stocké dans le répertoire du thème utilisé par MediaWiki (par défaut /skins/monobook). Ce hack permet les retours à la ligne automatiques :
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
(hack pris sur labnol.blogspot.com)