Les Portes Coulissantes de CSS - Chapitre II

Par Douglas Bowman

Le Chapitre I des Portes Coulissantes de CSS vous a présenté une nouvelle technique pour créer des éléments d'interface visuellement percutants à base de simple balisage sémantique. Dans le Chapitre II, nous allons pousser la technique encore plus loin. Si vous n'aviez pas encore lu la première partie de cet article, il n'est pas trop tard.

Nous couvrirons dans ce chapitre un nouveau scénario où aucun onglet n'est actif, nous combinerons les Portes Coulissantes avec un rollover utilisant une seule image, nous fournirons un correctif pour la surface cliquable dans IE/Win, et nous suggérerons une méthode alternative de ciblage des onglets. Nous allons nous dispenser d'un récapitulatif de la technique de base (voyez le Chapitre I si besoin) pour sauter immédiatement dans l'action.

Pas d'onglet actif

Dans le Chapitre I, nous n'avons pas prévu le cas où aucun onglet ne serait actif. Un processus d'enregistrement par exemple, ou des pages contenant des informations légales, ne rentrent dans aucune des catégories représentées par les onglets. Si aucun d'entre eux n'est stylé en tant qu'onglet actif, la règle qui ajoute 1 pixel supplémentaire de padding-bottom ne sera pas utilisée. Du coup, les onglets cacheront la ligne courant le long de leur bord inférieur.

Le problème peut être facilement réglé en ajoutant un border-bottom de 1 pixel sous tous les onglets non actifs, puis en enlevant le border-bottom dans le cas ou un onglet actif existe :

#header li {
  float:left;
  background:url("left.gif")
    no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  border-bottom:1px solid #765;
  }
#header #current {
  background-image:url("left_on.gif");
  border-width:0;
  }

Le résultat de notre changement de style, quand le menu ne comporte aucun onglet actif, peut être vu dans l'exemple 7.

Rollovers à une seule image

Dans un souci de simplicité, nous avons intentionnellement écarté le sujet des rollovers du Chapitre I. Maintenant que la technique de base est maîtrisée, nous pouvons commencer à la combiner avec d'autres pour étendre l'utilité et le comportement de notre interface.

Jusqu'à récemment, implémenter n'importe quel effet de survol - que ce soit avec JavaScript ou CSS - revenait à créer deux jeux d'images : un pour l'état normal, et un autre pour l'état survolé. Pour éviter le délai causé par le téléchargement séparé de chaque images, de nombreuses méthodes existaient pour pré-charger les images nécessaires dans le cache du navigateur. Petr Stanicek (alias «Pixy ») nous montre dans «Rollovers rapides, sans pré-chargement » comment combiner les deux états (normal et survolé) en une seule image, éliminant le besoin d'un pré-chargement.

Dans notre exemple, empilons nos deux images de gauche l'une au-dessus de l'autre pour combiner l'état normal et l'état survolé en une nouvelle image. Effectuons le même travail pour l'image de droite. Les images de 150 pixels de haut à l'origine en font maintenant 300. Nous nous retrouvons avec left_both.gif et right_both.gif. Avec ces nouvelles images, nous pouvons profiter de la propriété CSS background-position pour rendre visible la bonne portion de l'image quand l'utilisateur survole un onglet.

[Quand la nouvelle image combinée est positionné en haut du passage, l'état normal est visible. Quand nous décalons l'image vers le haut, l'état survolé devient visible.]

Remplaçons par ces nouvelles images celles utilisées pour l'item de liste et l'ancre, en gardant les mêmes positions :

#header li {
  float:left;
  background:url("left_both.gif")
    no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  border-bottom:1px solid #765;
  }
#header a {
  float:left;
  display:block;
  background:url("right_both.gif")
    no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }

La propriété background-position doit se voir spécifier deux valeurs, horizontale et verticale, dans cet ordre exact. Nous ne pouvons pas combiner des mots-clé (left, right, top, etc.) comme nous l'avons fait avec les valeurs fixes ou en pourcentages. En spécifiant les positions de l'état survolé, nous éviterons donc entièrement les mots-clé. Utilisons 0% pour que le bord gauche de l'image de gauche soit positionné contre le côté gauche du «passage », et 100% pour que l'image de droite fasse l'inverse.

Comme nous connaissons exactement la hauteur à laquelle commence chaque état de la nouvelle image, nous pouvons précisément positionner les images de fond en pixels. Les 150 pixels supérieurs de ces images contiennent l'état normal, et les 150 pixels inférieurs l'état survolé. Donc, pour les deux rollovers, repoussons simplement les images de fond vers le haut en appliquant une valeur négative de 150px. Doublons aussi les sélecteurs de la première règle pour n'avoir à spécifier la couleur de texte qu'une seule fois :

#header li:hover, #header li:hover a {
  background-position:0% -150px;
  color:#333;
  }
#header li:hover a {
  background-position:100% -150px;
  }

Nous pouvons utiliser le même principe d'images combinées pour l'onglet actif. Au lieu de spécifier une nouvelle image comme auparavant, utilisons simplement les mêmes valeurs décalées de l'état survolé :

#header #current {
  background-position:0% -150px;
  border-width:0;
  }
#header #current a {
  background-position:100% -150px;

  padding-bottom:5px;
  color:#333;
  }

Implémenter des rollovers n'est pas plus difficile que ça. Admirez-les en action dans l'exemple 8. Nous avons réduit le nombre total d'images utilisées de 5 (2 de gauche, 2 de droite, et 1 d'arrière-plan derrière les onglets) à 3 (1 de gauche, 1 de droite, 1 arrière-plan), en ayant éliminé le besoin d'un pré-chargement.

Si vous avez suivi l'avancement des travaux sur Internet Explorer (Windows ou Mac), vous aurez sûrement noté que les effets de rollover, comme implémentés ci-dessus, ne fonctionnent pas. IE n'applique la pseudo-classe :hover qu'aux éléments d'ancre, et à rien d'autre. Pour pouvoir changer les deux images de la technique des Portes Coulissantes, nous devrions insérer un élément supplémentaire (comme un span) à l'intérieur de l'ancre, et descendre toutes nos règles de style d'un élément (les règles d'item de liste passeraient à l'ancre, et les règles de l'ancre passeraient au span).

Nous n'analyserons pas en détail les ajustements nécessaires pour faire marcher l'effet de rollover dans IE. Mais afin de prouver qu'ils sont possibles, ces changements ont été démontrés dans l'exemple 8a. Comme vous le voyez, déplacer le rôle de chaque élément élimine aussi le petit espace mort mentionné dans le Chapitre I, parce que l'ancre contient maintenant l'intégralité de l'onglet.

Les rollovers ont généralement une fonction (plus ou moins) décorative. Certains d'entre vous décideront peut-être que les avantages d'un rollover fonctionnel dans Internet Explorer ne valent pas un surcroît de balisage. D'autres penseront que les span supplémentaires sont un maigre prix à payer pour obtenir des rollovers qui fonctionnent dans tous les navigateurs populaires, et pour éliminer l'espace mort des exemples précédents. À vous de choisir.

Correctif de surface cliquable

Comme dans le cas de nos exemples d'onglets du Chapitre I, les liens de navigation peuvent devenir des éléments de type bloc et recevoir un padding supplémentaire pour augmenter la surface cliquable du lien. La surface visuelle est le plus souvent remplie d'une couleur de fond (ou d'une image dans notre cas) impliquant que l'utilisateur peut cliquer n'importe où dans cette zone, et pas juste sur le contenu du lien. Dans la plupart des navigateurs, quand un élément ancre est changé en élément de type bloc (via CSS) et qu'un padding supplémentaire y est ajouté, ses surfaces visuelles et cliquables augmentent simultanément pour couvrir le contenu et le padding du lien. Malheureusement, IE/Win étend uniquement la surface visuelle, confinant la surface cliquable au contenu de l'ancre, sans inclure son padding :

[Dans la plupart des navigateurs la surface cliquable s'étend à toute la zone visible de l'onglet, mais Internet Explorer pour Windows ne rend cliquable que le texte.]

Dans le Chapitre I (et juste après l'exemple 8 ci-dessus), nous avons brièvement mentionné une petite quantité d'espace mort sur le côté gauche de l'onglet, causée par la transition vers les images de coins transparents. Nous avons aussi noté les conditions requises pour éviter cet espace mort. Toutefois, le Chapitre I évitait le sujet de la surface cliquable réduite dans IE/Win. Ce navigateur (versions 6.02 et inférieures) souffre de plusieurs bugs dans son implémentation de CSS. L'un de ces bugs produit des problèmes inattendus - et parfois inaperçus - dans l'ergonomie et l'accessibilité des navigations basées sur CSS.

Spécifier une largeur ou une hauteur pour l'ancre forcera magiquement IE à étendre aussi la surface cliquable. Mais procéder ainsi inhibe la taille flexible de notre «passage » dans d'autres navigateurs. Pour notre exemple d'onglets, vous pourriez penser que les unités en 'ems' sont envisageables pour spécifier largeur ou hauteur. Cela baserait la taille de nos onglets sur celle déjà héritée par le texte qu'ils contiennent. Mais spécifier une hauteur à une ancre rend IE/Win maboul. Et à moins d'utiliser une fonte monospace pour notre texte d'onglets, une largeur en ems brisera l'équilibre entre la largeur des onglets et le texte lors de redimensionnement (sans parler de la difficulté à déterminer une largeur appropriée pour chaque morceau de texte, puis à re-spécifier la largeur chaque fois que le texte est modifié).

Heureusement pour nous, nous pouvons exploiter une faille différente dans l'implémentation de CSS par IE, pour forcer l'extension de la surface cliquable dans ce navigateur sans devoir assumer une largeur arbitraire. Il suffit de spécifier une petite largeur pour l'ancre. La plupart des navigateurs prendront en compte - et respecteront - la valeur de width pour un élément de type bloc, même si le contenu de cet élément ne tient pas dans la largeur spécifiée. L'élément rétrécira à la largeur demandée, même si le texte à l'intérieur doit pour cela en déborder. Mais IE/Win ne contractera l'élément que jusqu'à la longueur du morceau de texte insécable le plus long.

Donc, même si nous donnons une largeur à l'ancre (comme 0.1em), IE/Win permettra toujours à celle-ci d'être aussi large que le texte qu'elle contient. parallèlement, IE étendra aussi la surface cliquable pour qu'elle remplisse tout l'onglet :

#header a {
  float:left;
  display:block;
  width:.1em;
  background:url("right.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }

Cette manipulation ne répond à aucune logique, les deux concepts étant directement contradictoires. Mais cela fonctionne, et corrige la surface cliquable pour IE/Win. Nous devons garder à l'esprit que les autres navigateurs honorent la valeur de width, et tenteront de contracter la largeur de chaque onglet à 0.1em + padding. Heureusement, IE/Win (6.0 et moins) ne comprend pas non plus le sélecteur CSS d'enfant - nous pouvons donc en utiliser un pour réinitialiser la largeur de l'ancre à "auto" pour tous les autres navigateurs, permettant aux onglets de s'étendre et de se contracter normalement :

#header > ul a {width:auto;}

L'exemple 9 corrige le problème de surface cliquable dans IE/Win, et son triste petit hack reste invisible aux autres navigateurs.

Cibler des onglets

Tous les exemples du Chapitre I utilisaient un id appliqué à un item de liste pour altérer l'apparence de l'onglet actif. La conséquence du déplacement de l'id d'un item de liste à un autre est un concept facile à appréhender, même pour quelqu'un de nouveau aux CSS. Mais un moyen différent de cibler l'onglet actif pourrait s'avérer plus efficace dans de nombreux cas, même s'il faut pour cela rajouter un petit peu de balisage.

Au lieu d'utiliser un unique id="current"pour identifier l'onglet actif dans le balisage, nous pouvons appliquer des id uniques à chaque item de liste, comme ceci :

<div id="header">
  <ul>
    <li id="nav-home"><a href="/traduction/portescoulissantes2#">Home</a>

		</li>
    <li id="nav-news"><a href="/traduction/portescoulissantes2#">News</a>
		</li>
    <li id="nav-products"><a href="/traduction/portescoulissantes2#">Products</a>

		</li>
    <li id="nav-about"><a href="/traduction/portescoulissantes2#">About</a>
		</li>
    <li id="nav-contact"><a href="/traduction/portescoulissantes2#">Contact</a>

		</li>
  </ul>
</div>

Nous pouvons aussi appliquer un id à un élément conteneur (comme body). La valeur de l'identifiant correspond à une rubrique à laquelle appartient la page. Cet id de body peut aussi être utilisé pour ajouter des styles spécifiques à la rubrique dans d'autres parties de la page. Avec des id aux deux endroits, nous pouvons altérer l'apparence d'un onglet, en particulier s'il satisfait aux conditions des sélecteurs descendants. Plutôt que d'utiliser #current dans notre sélecteur, combinons les id de body et des items de liste pour établir les conditions dans lesquelles un onglet est considéré comme actif :

#home #nav-home, #news #nav-news,
#products #nav-products,
#about #nav-about,
#contact #nav-contact {
  background-position:0% -150px;
  border-width:0;
  }
#home #nav-home a, 
#news #nav-news a,
#products #nav-products a, 
#about #nav-about a,
#contact #nav-contact a {
  background-position:100% -150px;
  color:#333;
  padding-bottom:5px;
  }

L'exemple 10 présente les effets de l'application d'un id="news" au body et l'exemple 10a montre ce qui arrive quand body utilise id="products".

Notes additionnelles

Têtes de boîtes : Vous avez peut-être sur vos pages des cartouches extensibles qui dessinent une boîte autour d'un titre et de son contenu associé. En assumant que vous utilisez un conteneur (comme un div) pour englober le titre du cartouche et son contenu, cela vous donne déjà les deux éléments pour chaque image de fond (le div et le titre). Dans ce cas, vous préférerez probablement placer l'image la plus étroite à droite, comme dans l'exemple 2. Cela vous donnera un contrôle total sur le point de départ à gauche du titre. Pour donner l'illusion que le cartouche est fait d'un seul bloc, dégradez le bas de chaque image vers la couleur de fond du conteneur.

Pivotements : Si vous pouvez prédire approximativement la hauteur d'un élément d'interface (ou si vous créez une image assez grande pour permettre une expansion verticale), vous pouvez retourner le «passage » sur le côté, en vous servant d'une image pour le haut et d'une autre pour le bas (au lieu de gauche et droite). Rappelez-vous de prendre en compte les cas extrêmes de césures, possibles avec les fenêtres de navigateurs étroites ou les textes agrandis.

Clignotement d'IE : Si vous remarquez un clignotement des images en survolant les onglets dans IE/Win, vérifiez les réglages du cache pour les fichiers Internet temporaires (Outils > Options Internet > onglet Général > bouton Paramètres). Il se pourrait que vous ayez changé le réglage par défaut pour être sûr de voir la version la plus récente à chaque rafraîchissement de page. IE/Win a des difficultés à maintenir les images d'arrière-plan sur les ancres si vous avez choisi "À chaque visite de la page". Le réglage par défaut est "Automatiquement", ce qui permet au navigateur de récupérer instantanément l'image dans le cache, et d'éviter tout clignotement. La plupart des utilisateurs ne changent jamais ce réglage ; les , ils ne connaissent même pas son existence.

Onglets multi-mots : Si le texte de vos onglets contient plus d'un seul mot, ce qui arrive souvent, n'hésitez pas à ajouter une déclaration white-space:nowrap à la règle de l'ancre, empêchant toute césure du texte d'onglets dans certains navigateurs.

Il se pourrait que d'autres problèmes, altérations, et variations de cette technique existent déjà, ou surgissent à terme. Mais nous nous en tiendrons là pour l'instant. Nous espérons avoir déjà comblé quelques lacunes, et dissipé quelques doutes sur l'utilité et la flexibilité des Portes Coulissantes. Faisons mieux, faisons plus.


Translated with the permission of A List Apart and the author[s].

Fiche technique

À propos de l'auteur

Fondateur et manager de Stopdesign, Douglas Bowman est un spécialiste du design simple, propre, et tourné vers l’avenir. Il repousse en permanence les limites du possible en matière d’utilisation des standards web. Douglas a été le grand architecte de la fameuse refonte de Wired News en 2003, mais il promet de ne pas se reposer sur ces lauriers pendant trop longtemps.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Confirmé

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site