Certes nous avons une position qui est peu favorable au petites astuces propriétaires liées au browser Internet Explorer de Microsoft (ou à un autre d'ailleurs), comme nous l'avons vu dans les technodicée, mais pour satisfaire des clients peu rompus aux questions de portabilité, il y a quelques effets qui peuvent être adoptés pour fournir de petits plus visuels. Ils reposent souvent sur la deuxième version des feuilles de style. Ils sont prévus pour Internet explorer 6 et nous indiquerons si ces astuces fonctionnent aussi avec Netscape/Mozzila. C'est juste une petite référence des effets les plus classiques et peu documentés. Nous n'aimons pas cela mais le client est roi tant que cela n'altère pas la compatibilité descendante.
Les CSS2 permettent, quelque soit le browser, de modifier l'aspect du curseur. On utilisera ce paramètre dans la feuille de style, par exemple dans une section A:Hover pour modifier l'aspect du curseur au dessus d'un lien. Ainsi, sur habett.com, nous avons modifié le curseur sur les liens en remplacant la main par une flêche avec un point d'interrogation. Pour ce faire, nous avons simplement mis un petit cursor: help; dans la section A:Hover. Pour modifier le curseur par défaut dans la page pour adopter une petite croix, nous avons mis cursor: crosshair; dans la section BODY.
Différents curseurs sont disponibles en standard, mais la valeur par défaut est auto qui passe de la flêche à la main en passant sur les liens. Les autres valeurs sont:
| Code | Forme | Support NN/MOZ |
|---|---|---|
default | Flêche | Oui |
crosshair | Croix | Oui |
text | Curseur texte | Oui |
vertical-text | Curseur texte horizontal | Non |
wait | Sablier | Oui |
progress | Flêche avec sablier | Non |
help | Curseur avec un point d'interrogation | Oui |
pointer | Main | Oui |
hand | Main | Non |
move | Flêche quadri-directionnelle | Oui |
all-scroll | Pointeur de défilement multidirectionnel | Non |
col-resize | Ajusteur horizontal | Non |
row-resize | Ajusteur vertical | Non |
not-allowed | Sens interdit | Non |
no-drop | Main et sens interdit | Non |
Au delà de ces formes particulières, il est possible de garder la flêche standard et de la réorienter en utilisant les différents attributs resize :
nw-resize |
n-resize |
ne-resize |
w-resize |
e-resize |
|
sw-resize |
s-resize |
se-resize |
Enfin, il est possible (uniquement avec Internet explorer sous windows) de définir soi même un curseur en effectuant un lien vers un fichier .CUR en utilisant la syntaxe cursor: url("mycursor.cur") en passant ainsi l'uri de l'image en question. Au delà des fichier .CUR qui sont en fait des dérivés de fichiers au format BMP, il est possible d'utiliser des .ANI pour obtenir des résultats animés mais il s'agit encore d'un format propriétaire propre à Windows. Malheureusement, il n'est pas possible à ce stade d'utiliser les formats classiques d'internet, tels JPEG, GIF ou surtout PNG.
Nous voilà avec une modification propre à Internet explorer car seul microsoft a pour l'instant la main sur ces aspects du système d'exploitation. Il s'agit de modifier les couleurs des ascenseurs de la fenêtre du browser, remplacant par la même les réglages du système. Ici, deux approches sont possibles :
La plus simple conciste à rajouter simplement scrollbar-base-color: #00aa88; comme ci-dessous. Le paramètre couleur passé à l'instruction de feuille de style dans la section BODY donne la dominante qui est par la suite déclinée automatiquement pour obtenir un résultat dans une même tonalité :
Si l'on veut aller plus loin et pouvoir déterminer chacune des couleurs qui composent la barre d'ascenseur, il faut avoir recours à une multitude de paramètres qui l'on passe à nouveau dans la feuille de style, dans la section BODY:
Pour obtenir ce résultat, on passe 7 paramètres qui définissent précisément la couleur de chaque élément. Ainsi, scrollbar-track-color définit la couleur de la piste de l'ascenseur, scrollbar-arrow-color les flêches haut et bas, scrollbar-face-color le fond de l'ascenseur, scrollbar-highlight-color sa bordure nord-ouest intérieure, scrollbar-3dlight-color sa bordure nord-ouest extérieure, scrollbar-shadow-color sa bordure sud-est intérieure et scrollbar-dark-shadow-color sa bordure sur-est extérieure. Vous avez un contrôle total.
A noter que pour bien s'y retrouver, il est important de ne pas combiner l'approche scrollbar-base-color avec l'approche détaillée en second.
L'Internet explorer de microsoft permet de définir des effets de transition entre pages html. Pour en profiter, cela est simple: Il suffit d'ajouter dans la section <head> de votre page la meta-balise suivante: <meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)"> pour obtenir, lors du chargement de la page, un effet de fondu dont la durée sera de 2 secondes :
Une fois cet effet obtenu, il est possible d'en effectuer de nombreuses déclinaisons. Tout d'abord, il est possible de définir l'effet qui sera appliqué en sortie de page en remplacant Page-Enter par Page-Exit. Il est bien évidement aussi possible de modifier la durée de l'effet qui se mesure en secondes, par le paramètre Duration, en étant bien conscient que ces effets peuvent demander pas mal de temps processeur et donc qu'une opération demandée avec un délai trop réduit ne pourra pas s'effectuer comme il faut.
Ensuite, il est possible d'adopter d'autres transitions qu'un fondu en remplacant le blendTrans(Duration=2.0) par un revealTrans(Duration=3.0,Transition=5), ce qui nous donne un mouvement d'une durée de 3 secondes selon l'effet 5. Il y a 24 effets différents en plus du fondu, détaillés dans le tableau suivant :
| 0 | Box In |
| 1 | Box Out |
| 2 | Circle In |
| 3 | Circle Out |
| 4 | Wipe Up |
| 5 | Wipe Down |
| 6 | Wipe Right |
| 7 | Wipe Left |
| 8 | Vertical Blinds |
| 9 | Horizontal Blinds |
| 10 | Checkerboard Across |
| 11 | Checkerboard Down |
| 12 | Random Dissolve |
| 13 | Split Vertical In |
| 14 | Split Vertical Out |
| 15 | Split Horizontal In |
| 16 | Split Horizontal Out |
| 17 | Strips Left Down |
| 18 | Strips Left Up |
| 19 | Strips Right Down |
| 20 | Strips Right Up |
| 21 | Random Bars Horizontal |
| 22 | Random Bars Vertical |
| 23 | Random |
Ici, le principe est identique à celui que nous venons de voir, mais il s'applique uniquement à une image lors d'un rollover (fait de changer une image quand le curseur passe dessus en utilisant les évèvements onmouseover et onmouseout du javascript). Pratiquement, on ajoute au tag <img> de l'image sur laquelle il y a un rollover une instruction du type style="FILTER: revealTrans(Duration=1,Transition=12)" et le tour est joué. Les paramètres sont ici identiques à ceux des metas du paragraphe précédent et donc ne s'appliquent qu'à Internet explorer.
Vous savez qu'il est possible de définir l'image de fond d'une page en utilisant l'instruction background-image:url("image.jpg"); dans votre feuille de style. Par défaut, cela produit le même effet que l'attribut background="image.jpg" de votre balise <head>. Cependant, si vous avez recours au feuilles de style, vous accédez à d'autres attributs tels le fait que le fond ne doit pas bouger avec le contenu de la page en ajoutant un petit background-attachment: fixed;:
Pour reproduire le comportement standard, on utilisera background-attachment: scroll;.
Un autre attribut de votre fond est relatif au fait qu'il se répète ou non pour couvrir toute la surface en question. Bien utilisé, il permet de mettre un logo en position en fond et de laisser le reste de la page de la couleur de fond définie, qui devra s'accorder avec celle du logo pour un meilleur effet. Pour ce faire, on utilise l'instruction background-repeat: qui prends 4 valeurs différentes: repeat pour le comportement standard, no-repeat pour le l'avoir qu'une seule fois, repeat-x et repeat-y pour obtenir une répétition uniquement horizontale ou verticale. Il est à noter que si l'on opte pour no-repeat, alors on peut aussi utiliser la propriété background-position:top,center pour positionner à souhait l'image en question.
Ces astuces marchent aussi avec Netscape/Mozzila.
Ces effets peuvent être mignons mais ils alourdissent visuellement les pages pour les browser qui en supportent l'affichage et textuellement pour les browser qui les ignorent. Quitte à surcharger une feuille de style, autant la rendre extérieure à la page en question (<link rel="stylesheet" href="style.css" type="text/css">) pour épargner les vieux browsers. Ces trucs visuels ne posent pas de problèmes en soi, si ce n'est que vous n'êtes jamais sûrs qu'ils seront admis par le browser de votre visiteur. Utilisez-les donc avec parcimonie et style.