Direction-freundliche Navigation Bar »Yahoo! User Interface Blog (YUIBlog)

Direction-freundliche Navigation Bar

25. April 2011 um 09.12 Uhr von Thierry Koblentz | In CSS 101 , -Entwicklung | 4 Kommentare

Ich stieß vor kurzem auf einer horizontalen Navigationsmenü mit Links nach rechts ausgerichtet. Wie zu erwarten, es war ein Listenelement mit float:right und die Listenelemente mit float:left . Auch wenn es nichts falsch mit diesem Ansatz, inspiriert es mich an dieser Stelle besprechen nehmen Richtwirkung für das Layout.

Die Kosten für die Floating Elements

Schwimmer haben keine Vorstellung von Richtwirkung, sie müssen nicht wie Inline-Elemente oder Spalten der Tabelle (für die die Arbeit dir -Attribut ist ein Wundermittel). Mit Schwimmern, müssen Autoren einen Mechanismus einzuführen, zu "tauschen" Werte, wenn die Änderungen in der Benutzeroberfläche ( ltr vs rtl ).

Also anstelle von float , können Autoren favorisieren inline-block . Hier ist ein einfaches Beispiel:

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

Beachten Sie, dass mit " \ 0 "(ohne Leerzeichen) anstelle von" \9 "kümmern würde Opera nehmen, aber vielleicht nicht so zukunftssicher, da" sein \9 "(nur IE).

Wie dieser Demo-Seite zeigt in Chrome, Safari und Firefox, die inline-block -Technik macht das Layout-Modus schriftlich angewiesen (die Richtung des Flusses entspricht dem Wert der dir Attribut oder dem Ausgangswert, wenn keine Richtung angegeben wird). Für andere UA s, und weil der IE die mangelnde Unterstützung für das Attribut-Selektor (dh html[dir="rtl"] ), müssen die Autoren einen Haken im Markup hinzufügen, um auf die Änderung der Richtung gerecht zu werden. Zum Beispiel, für die volle A-Grade-Kompatibilität:

Für die Schwimmer-Technik:

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

Für die Inline-Block-Technik:

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

`text-align: start | end`

Im Gegensatz zu left und right , start und end sind Schreib-Modus abhängig Stichworte. Im Englischen start Karten zu left und end Karten zu right . Unter Berufung auf start und end , statt left und right ermöglicht es einige Browser, um den Austausch (tun ltr / rtl ) automatisch.

Die Unterschiede zwischen den Browsern und Techniken

In Browsern, die keine Unterstützung " start / end "(IE, Opera): schweben Technik: Swapping Richtung ändert nichts; inline-block-Technik: Swapping Richtung ändert nichts an der Ausrichtung des Menüs, aber Links werden in der richtigen Reihenfolge angezeigt
In Browsern, die Unterstützung "zu tun start / end "(Chrome, Safari, Firefox): schweben Technik: Swapping Richtung ändert nichts; inline-block-Technik: Swapping Richtung genügt, um die Richtung der sowohl im Menü wechseln und die Links

Das ist es! Das nächste Mal müssen Sie Stilelemente horizontal, denken Sie daran, geben display:inline-block oder display:table versuchen.

Über den Autor: Thierry Koblentz ist ein Front-End-Engineer bei Yahoo! Er besitzt TJK Gestaltung , ez-css.org und css-101.org . Sie können Thierry auf Twitter unter @ thierrykoblentz .

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

4 Kommentare

Thierry,
Diese Aussage ist teilweise falsch:
Schwimmer haben keine Vorstellung von Direktionalität
Bitte lesen Sie diesen Testreihen für Schwimmer und bidirektionalen und diesen Test zeigt schwebte Menüs in 'rtl' Richtung. Derzeit Opera und WebKit Griffe Überlauf in falsche Richtungen Layouts 'RTL'.
Ich werde sagen, dass Ihr Ansatz (Hacken des CSS) wie Programmieren die IE7-glücklich ist. Dies hilft nicht die 100s von Millionen von Menschen, die lesen und schreiben Skripte (zB Hebräisch oder Arabisch), die 'rtl' Richtung hat. In IE7-, Web-Entwickler haben musste stark zu hacken, um in 'rtl' Richtung IE7-verhalten. Eine gemeinsame Sache, in der CSS für solche Seiten mit 'RTL' Richtung zu sehen ist die Verwendung von text-align: right und text-align: right , um die richtige Platzierung von Text zu erreichen. Ich werde sagen, dass der IE nicht der einzige Browser, der 'rtl' Richtung gehandhabt wurde schlecht.
Nun, das vielleicht eine Überraschung für dich, aber IE8 unterstützt RTL Richtung korrekt. Der einzige Browser, der es richtig gemacht haben, bevor IE8 war Gecko ist. Ich schlage vor, dass Sie sowohl die ul-und li nach rechts und nicht hacken oder IE8 IE9 zu schweben, da dies sehr Artikel werden zusätzlich zu diesen ganzen Fehlinformationen über bidirektionalen.
Ich hatte einigen Einfluss auf die Spec-Modus über das Schreiben und Regie. Dies wurde über logische Eigenschaften , Schwimmer-und Überlaufgarnitur für RTL und Überlauf und bidi .
Kommentar von Alan Gresley - 26. April 2011 #
@ Alan
Du verwechselst mich. Sie in Ihren Seiten erwähnen ": rechts oder float: Schwimmer starten bei RTL", aber soweit ich weiß gibt es keine solche Sache wie "Start" in der Spezifikation [1], die nur listet left , right , none und inherit .
Eine gemeinsame Sache, in der CSS für solche Seiten mit 'RTL' Richtung zu sehen ist die Verwendung von text-align: right und text-align: right , um die richtige Platzierung von Text zu erreichen.
Es scheint, dass ist, was Sie in Ihrem Testfälle mit. dh "Visible Überlauf-und Container-Block für RTL", obwohl ich denke, text-align:right in sich redundant und dass text-align:start wäre angemessener gewesen sowieso.
Beachten Sie außerdem, dass in diesem Artikel werde ich "beweisen" die Verwendung von text-align: start|end . right|left Werte nur als Fallback verwendet.
Eigentlich kann man das ganze Sinn dieses Artikels, die zu vermeiden, dass die Dinge anders Stil je nach Kontext ist verpasst zu haben. Ihre Demo-Seite, die Dropdown-Menüs in RTL und LTR Kontexten Swaps zeigt schweben Werte und links / rechts Eigenschaften, das ist nichts Neues :-(
Vielen Dank für Ihr Feedback!
[1] http://www.w3.org/TR/CSS21/visuren.html # float-Position
Kommentar von Thierry Koblentz - 26. April 2011 #
Ach so viel Spaß. Testing.
Schwimmer und bidirektionalen
Kommentar von Alan Gresley - 26. April 2011 #
Great! Vielen Dank Thierry!
Ich wurde mit einem ähnlichen Problem zu tun und Ihre Beratung im letzten Satz mein Problem gelöst.
Ich hatte diesen Code ein:
<- Direction: rtl;
<- Position: absolute; Richtung: ltr;
1 <- float: left;
2 <- float: left;
3 <- float: left;
CONTENT
Alle Browser außer IE9 angezeigt die Tasten in einer Reihe. Aber IE9 angezeigt sie brüllen sich gegenseitig (als ob "float: left" nicht vorhanden war)
Es ist endlich soweit, nachdem ich auf den "Griff" div das Attribut "display: table" hinzugefügt.
Vielen Dank,
Radek.
Kommentar von Radek Pribyl - 10. Oktober 2011 #

Leider ist die Kommentarfunktion zu diesem Zeitpunkt geschlossen.

Präsentiert von WordPress auf Yahoo! Web Hosting .

Yahoo! User Interface Blog (YUIBlog)