Direction de l'environnement barre de navigation »Blog Interface utilisateur Yahoo! (YUIBlog)

Direction de l'environnement barre de navigation

25 avril 2011 à 9:12 am par Thierry Coblence | En CSS 101 et de développement | Les 4 Commentaires

Je suis récemment tombé sur un menu horizontal de navigation avec liens alignés à droite. Comme on pouvait s'y attendre, c'était un élément de la liste avec float:right et les éléments de la liste avec float:left . Même si il n'y a rien de mal avec cette approche, il m'a inspiré pour profiter de cette occasion pour discuter de la directionnalité de mise en page.

Le coût des éléments flottants

Flotteurs n'ont aucune idée de la directionnalité, ils ne fonctionnent pas comme des éléments en ligne ou des colonnes de table (pour lesquels la dir attribut est un miracle). Avec flotteurs, les auteurs doivent mettre en œuvre un mécanisme de "swap" valeurs chaque fois que les modifications de l'interface ( ltr vs rtl ).

Donc, au lieu d'utiliser float , les auteurs peuvent favoriser inline-block . Voici un exemple simple:

 ul { text-align: end; text-align: right\9; *text-align: right; } li { display: inline; } a { display: inline-block; padding: 5px 15px; margin: 0 5px; }

Notez que l'utilisation " \ 0 "(sans espace) au lieu de" \9 "prendrait soin de l'Opéra, mais peut-être pas aussi la preuve que l'avenir" \9 "(IE seulement).

Comme cette page de démonstration montre, dans Chrome, Safari et Firefox, le inline-block technique permet la mise en page d'écriture en mode charge (la direction de l'écoulement correspond à la valeur de la dir attribut ou la valeur initiale si aucune direction n'est spécifiée). Pour les autres UC s, et en raison du manque d'IE de soutien pour l'attribut (c.-à-sélecteur html[dir="rtl"] ), les auteurs ont besoin d'ajouter un crochet dans le balisage pour répondre au changement de direction. Par exemple, pour plein de grade compatibilité:

Pour la technique float:

 .rtl ul { float: left; } .rtl ul li { float: right; }

Pour la technique inline-block:

 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ }

`text-align: start | end`

Contrairement à left et right , start et end sont écrit en mode mots-clés à charge. En anglais, start cartes pour left et end des cartes à right . S'appuyant sur start et de end plutôt que de left et de right permet à certains navigateurs de faire la permutation ( ltr / rtl ) automatiquement.

Les différences entre les navigateurs et les techniques

Dans les navigateurs qui ne supportent pas " start / end "(IE, Opera): flottent technique: direction permutation ne change rien; inline-block technique: échange de la direction ne change pas l'alignement du menu, mais les liens sont affichés dans le bon ordre
Dans les navigateurs qui prennent en charge " start / end "(Chrome, Safari, Firefox): flottent technique: direction permutation ne change rien; inline-block technique: échange de la direction est suffisant pour échanger la direction à la fois le menu et les liens

Ça y est! La prochaine fois que vous avez à des éléments de style horizontalement, n'oubliez pas de donner display:inline-block ou display:table un essai.

À propos de l'auteur: Thierry Coblence est un ingénieur avant-end à Yahoo! Il possède TJK Conception , ez-css.org et css-101.org . Vous pouvez suivre Thierry sur Twitter à @ thierrykoblentz .

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

4 commentaires

Thierry,
Cette déclaration est en partie erronée:
Flotteurs n'ont aucune idée de la directionnalité
S'il vous plaît voir cette série de test pour les flotteurs et bidirectionnelles et ce test montrant les menus flottants dans 'rtl' direction. Actuellement Opera et WebKit gère débordement tort dispositions directionnelles «RTL».
Je dois dire que votre approche (piratage du CSS), c'est comme de codage pour rendre IE7-heureux. Cela ne veut pas aider le. 100s de millions de personnes qui lisent et écrivent des scripts (c.-à-hébreu ou l'arabe) qui a 'rtl' direction Dans IE7-, les développeurs web ont eu à pirater grandement à rendre IE7-se comporter de 'rtl' direction. Une chose rare de voir dans le CSS pour de telles pages avec la direction 'rtl' est l'utilisation de text-align: right et text-align: right de réaliser le placement correct de texte. Je dirai que IE n'est pas le seul navigateur qui a manipulé 'rtl' direction mal.
Or, ce peut-être une surprise pour vous, mais IE8 supporte direction rtl correctement. Le seul navigateur qui l'a fait juste avant IE8 était Gecko est. Je suggère que vous flottez à la fois le ul et li droit et non pirater IE8 ou IE9 depuis que cet article très ajoute à cette désinformation au sujet de toute bidirectionnelles.
J'ai eu une certaine influence sur la spécification sur l'écriture de mode et le sens. Cela a été au sujet des propriétés logiques , des flotteurs et de débordement pour RTL et de débordement et bidi .
Commentaire par Alan Gresley - Avril 26, 2011 #
@ Alan
Vous me confondre. Vous mentionnez dans vos pages "float: right ou float: départ pour rtl", mais pour autant que je sache il n'y a pas une telle chose comme "start" dans la spécification [1], qui répertorie uniquement left , right , none et inherit .
Une chose rare de voir dans le CSS pour de telles pages avec la direction 'rtl' est l'utilisation de text-align: right et text-align: right de réaliser le placement correct de texte.
Il semble que c'est ce que vous utilisez dans vos cas de test. c'est à dire "débordement visible et bloc conteneur de rtl" même si je pense text-align:right là-bas est redondant et que text-align:start aurait été plus approprié de toute façon.
Aussi, s'il vous plaît noter que, dans cet article, je "démontrer" l'utilisation de text-align: start|end . right|left les valeurs ne sont utilisés que comme un repli.
En fait, vous pouvez avoir manqué le point de l'ensemble de cet article qui est d'éviter d'avoir des choses de style différente selon le contexte. Votre page de démonstration qui montre les menus déroulants dans RTL et LTR swaps contextes flotter valeurs et les propriétés gauche / droite, qui n'a rien de nouveau :-(
Merci pour vos commentaires!
[1] # http://www.w3.org/TR/CSS21/visuren.html flotteur en position
Commentaire par Thierry Coblence - Avril 26, 2011 #
Oh le plaisir. Test.
flotteurs et bidirectionnelles
Commentaire par Alan Gresley - Avril 26, 2011 #
Grande! Un grand merci Thierry!
J'ai été confronté à un problème similaire et vos conseils dans la dernière phrase a résolu mon problème.
J'ai eu ce code:
<- Direction: rtl;
<- Position: absolute; direction: ltr;
1 <- float: left;
2 <- float: left;
3 <- float: left;
CONTENU
Tous les navigateurs, sauf IE9 affiché les boutons dans une rangée. Mais IE9 affiché leur hurler les uns des autres (comme si "float: left" n'existait pas)
Enfin je l'ai eu à travailler après avoir ajouté à la "poignée" div l'attribut "display: table".
Merci beaucoup,
Radek.
Commentaire par Radek Pribyl - Octobre 10, 2011 #

Désolé, les commentaires sont fermées à cette heure.

Propulsé par WordPress sur Yahoo! Hébergement Web .

Blog Interface utilisateur Yahoo! (YUIBlog)