 SELFHTML actuel Articles spécialisés Feuilles de style CSS |
|
 |
René Maroufi: |
|
|
 | |
| Adresse électronique: |  kontakt@maroufi.de |
| Présence Internet: |  http://www.maroufi.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!
 |
Quand on entend parler de boutons dynamiques, on pense tout de suite à ces graphiques de navigation interchangés au passage de la souris à l'aide de JavaScript - tels qu'ils sont par exemple décrits dans l'un des exemples d'application de SELFHTML: 
Boutons graphiques dynamiques. Dans cet article, je voudrais vous présenter des façons de réaliser de tels boutons sans faire appel à JavaScript, en utilisant uniquement les possibilités offertes par les feuilles de style.
C'est naturellement la commande CSS a:hover qui vient à l'esprit lorsque l'on associe "passage de la souris" et "feuilles de style". Seulement, cette commande ne fonctionne que lors de formatages de texte, pas avec des graphiques. Comment alors formater du texte de sorte à ce que cela ressemble à un bouton graphique? Par bonheur, la syntaxe CSS offre une instrumentation judicieuse pour le formatage de texte: non seulement les couleurs, les tailles des polices d'écriture, etc. peuvent être réglées, mais aussi les cadres, les bordures peuvent se voir attribuer des effets de relief (effets 3D). Le nombre croissant de navigateurs étant en mesure d'interpréter cette syntaxe permet de surmonter l'obstacle et donc d'utiliser également ces commandes.
| |
Quel est le truc dans l'histoire? Le secret se trouve dans la définition du lien en un "bloc paragraphe", obtenu avec la commande: display:block;. De plus, un cadre permet une représentation semblable à un bouton. Reste encore à attribuer des mentions pour la taille des éléments, et le tout pourrait ensuite ressembler á ceci:
a.menu { display:block; margin-top:5px; text-align:center; width:16ex;
border-style:ridge; border-width:3px; padding:2px; }
a.menu:link { color:#0000FF; text-decoration:none; }
a.menu:visited { color:#0000FF; text-decoration:none; }
a.menu:hover { color:#FFFF00; background-color:#0000FF; text-decoration:none; }
a.menu:active { color:#FFFF00; background-color:#AA0033; text-decoration:none; }
|
Avec a.menu sont définies toutes les mentions style devant être appliquées sur les liens, entre autres pour la formation de bloc paragraphe avec display:block;, pour le cadre et pour la largeur de l'élément. Ensuite peuvent être notées avec les différents pseudo-formats les mentions concernant les actions au passage de la souris, par exemple une couleur d'arrière-plan pour a:hover.
Remarques: Le formatage s'applique uniquement à la sous-classe menu. Cela vous donne la possibilité de donner un aspect différent aux liens rencontrés dans le cours de votre texte. Dans a.menu, n'utilisez pour espacer les boutons que la mention margin-top:...; et jamais margin-bottom:...;, l'Explorer Internet MS ayant eu quelques problèmes de représentation lors de mes tests d'exemples.
Pour attribuer un cadre extérieur à la rangée de boutons de navigation, les liens peuvent être déclarés à l'intérieur d'un élément <div></div>. Dans le code HTML, cela pourrait être:
<div class="menu" align="center"> <a class="menu" href="index.htm">Accueil</a><br> <a class="menu" href="articles/index.htm">Articles</a><br> <a class="menu" href="liens/index.htm">Liens</a><br> <a class="menu" href="mailto:name@domain.de">Écrire</a><br> </div> |
Pour la rangée de boutons complète est également définie une sous-classe menu. Celle-ci permet d'attribuer d'autres formatages s'appliquant à toute la partie pour la navigation, comme par exemple une police de taille plus grande, une couleur d'arrière-plan différente ou des marges par rapport au reste du document.
Expérimentez à votre gré avec mentions et valeurs et essayez différents effets. La rangée de boutons de navigation peut être positionnée à votre goût: dans un cadre, dans un tableau sans quadrillage ou également à l'aide de CSS.
| |
La méthode présentée ici fonctionne parfaitement avec l'Explorer Internet MS à partir de la version 5.0, avec Netscape 6 et avec Opera 5. Netscape 4.x crée des problèmes, car il n'interprète pas la commande a:hover. D'autre part, à cause de son implémentation très imparfaite des feuilles de style, il peut arriver que ce navigateur représente les liens d'une si mauvaise façon que ceux-ci soient inutilisables.
Comment alors éviter ce problème? Si l'on accepte que Netscape ne montre pas les effets survenant au passage de la souris et que l'on désire simplement obtenir une rangée de navigation fonctionnant correctement, on peut faire appel à un tuyau judicieux pour que Netscape n'interprète que les mentions qu'il est en mesure d'assumer.
Le truc réside dans le fait que Netscape 4, à l'inverse des autres navigateurs plus récents, ne connaît pas la syntaxe de la méthode @import pour incorporer les fichiers CSS externes. Il suffit donc tout simplement de noter toutes les mentions que Netscape n'interprète pas dans un fichier incorporé de la sorte. Toutes les autres mentions connues de Netscape peuvent alors être définies autrement, que ce soit directement dans le fichier HTML ou dans un second fichier externe, lequel sera incorporé grâce à la syntaxe HTML habituelle. Cela pourrait ressembler à ceci:
<link rel="stylesheet" href="style1.css" type="text/css"> <style type="text/css"> <!-- @import url(style2.css); --> </style> |
L'exemple montre le code correspondant contenu dans l'entête (head) d'un fichier HTML. On remarque que deux fichiers externes de feuilles de style y sont incorporés. style1.css contient les mentions interprétées sans défaut par Netscape 4. Ce fichier est incorporé à l'aide de la syntaxe HTML pour les fichiers externes. style2.css, le fichier contenant les mentions non compatibles à Netscape 4, est lui incorporé par la syntaxe CSS en utilisant la méthode @import. De ce fait, toutes les mentions définies dans ce fichier style2.css seront ignorées par Netscape 4.
Vous pouvez utiliser ce tuyau à tout moment où il sera question d'employer des mentions de feuilles de style que Netscape 4 n'interprète pas ou dont l'interprétation est insuffisante.
| |
Les boutons réalisés de la sorte ont l'avantage de ne pas faire appel à JavaScript, ce qui devrait réjouir tous ceux qui n'aiment pas et de ce fait ont déactivé JavaScript, ou ceux qui ne savent pas programmer en JavaScript. D'autre part, des boutons constitués de rien d'autre que du texte diminuent considérablement le temps de chargement d'une page Web et facilitent également d'éventuelles modifications de mise en page sur toutes les pages d'un site: il n'y a qu'un fichier de feuilles de style à modifier. Même la différenciation entre cibles visitées et non encore visitées est possible, comme pour les liens dans le texte courant.
Cependant, cette méthode a également des inconvénients: comme déjà indiqué, Netscape 4 n'interprète pas toutes les mentions CSS. La part des internautes utilisant régulièrement Netscape 4 devrait tourner en ce moment dans les environs de 5 à 8 %.
D'autre part, la réalisation de boutons à l'aide de CSS est assez limitée. Il n'est pas possible de créer des boutons elliptiques. Il n'est pas possible non plus d'utiliser des polices d'écritures "exotiques". Il n'est pas possible d'obtenir de douces transitions comme avec l'anti-aliasing. Dans un bouton graphique, la police est incorporée dans le graphique, et de ce fait, cela ne joue aucun rôle que celle-ci soit installée sur le système de l'utilisateur ou non. Pour un bouton défini uniquement avec du texte, la police choisie ne pourra être uniquement affichée que si elle est installée sur le système de votre visiteur.
| |
En plus de 
l'exemple 1 déjà présenté, voici trois autres exemples de réalisation de boutons de navigation à l'aide de feuilles de style:
|
|
| SELFHTML actuel Articles spécialisés Feuilles de style CSS |