Yahoo User Interface Blog (YUIBlog)

Richting-vriendelijke Navigation Bar

25 april 2011 om 09:12 door Thierry Koblentz | In CSS 101 , Ontwikkeling | 3 Reacties

Ik heb onlangs kwam een ​​horizontale navigatie menu met rechts uitgelijnd links. Zoals je zou verwachten, het was een element in de lijst met float:right en de lijst items met float:left . Ook al is er niets mis is met deze aanpak, het inspireerde mij om deze gelegenheid gebruik maken om te bespreken directionaliteit voor de lay-out.

De kosten van zwevende elementen

Floats hebben geen idee van richtinggevoeligheid, en niet werken als inline elementen of tabelkolommen (waarvoor de dir attribuut is een wondermiddel). Met drijvers, moeten auteurs uitvoering van een mechanisme om "swap" waarden wanneer de interface verandert ( ltr vs rtl ).

Dus in plaats van het gebruik van float , kunnen de auteurs voor inline-block . Hier is een eenvoudig voorbeeld:

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

Merk op dat het gebruik van " \ 0 "(zonder spatie) in plaats van" \9 'zou zorgen van Opera te nemen, maar kan niet zo toekomstbestendig omdat " \9 '(alleen IE).

Aangezien dit demo pagina toont in Chrome, Safari en Firefox, de inline-block techniek maakt de lay-out te schrijven-mode afhankelijk is (de richting van de stroming overeenkomt met de waarde van het dir attribuut, of de initiële waarde als er geen richting wordt aangegeven). Voor andere UA s, en omwille van het gebrek IE's ter ondersteuning van de attribuut selector (dat wil zeggen html[dir="rtl"] ), auteurs nodig om een haak in de markup om tegemoet te komen aan de verandering van richting toe te voegen. Bijvoorbeeld, voor de volledige A-grade compatibiliteit:

Voor de vlotter techniek:

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

Voor de inline-block-techniek:

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

text-align: start | end

In tegenstelling tot left en right , start en end schrijven-mode afhankelijk van zoekwoorden. In het Engels, start kaarten om left en end kaarten right . Zich baserend op start en end in plaats van left en right voorziet in een aantal browsers te doen van de swapping ( ltr / rtl automatisch).

Verschillen tussen browsers en technieken

In browsers die geen ondersteuning bieden " start / end '(IE, Opera)

float techniek: swapping richting verandert niets

inline-block-techniek: swapping richting verandert niets aan de uitlijning van het menu, maar links worden weergegeven in de juiste volgorde

In browsers die ondersteuning bieden "doe start / end "(Chrome, Safari, Firefox)

float techniek: swapping richting verandert niets

inline-block-techniek: swappen richting is voldoende om de richting van zowel de menu swap en de links

Dat is het! De volgende keer dat je stijl-elementen horizontaal, niet vergeten te geven display:inline-block of een display:table een keer te proberen.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!