Směr příjemný navigační panel

25.dubna 2011 v 9:12 am Thierry Koblentz | V CSS 101 a rozvoj záložky | 4 Komentáře

Nedávno jsem narazil na horizontální navigační menu s zarovnán odkazy. Jak se dalo očekávat, byl to prvek seznamu s float:right a seznam položek s float:left . I když není nic špatného s tímto přístupem, to inspirovalo, abych tuto příležitost k diskusi o směrovosti pro rozvržení.

Náklady na plovoucích prvků

Plováky nemají představu o směrovost, nefungují jako inline prvky nebo sloupců tabulky (pro kterého dir atribut je křišťálová koule). Plováky, musí autoři implementovat mechanismus pro "swap" hodnoty, kdykoli rozhraní změn ( ltr vs rtl ).

Takže namísto použití float mohou autoři upřednostňují inline-block . Zde je jednoduchý příklad: 

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

Všimněte si, že pomocí " \ 0 "(bez mezery), místo" \9 "a postaral se o opery, ale nemusí být tak pro budoucí vylepšení," \9 "(pouze prohlížeč IE).

Jak tato demo stránky ukazuje, v Chrome, Safari a Firefox, inline-block technika dělá vzhled psací režim závislý (směr toku odpovídá hodnotu dir atributu, nebo počáteční hodnota, pokud není uvedeno směr). Pro ostatní UA s, a kvůli nedostatku IE podpory atributu volič (tj. html[dir="rtl"] ), autoři třeba přidat háček na značky obstarávat ke změně směru. Například pro plnou kompatibilitu kvalitní:

Pro float techniky: 
 .rtl ul { float: left; } .rtl ul li { float: right; }
Pro inline bloku techniku: 
 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ }

text-align: start | end

Na rozdíl od left a right , start a end jsou psací režim závislé na klíčová slova. V angličtině, start mapy left a end mapy pro right . Spoléhat se na start a end spíše než left a right umožňuje některé prohlížeče provést záměnu ( ltr / rtl ) automaticky.

Rozdíly mezi prohlížeči a techniky

V prohlížečích, které nepodporují " start / end "(IE, Opera)
float techniku: swapping směru nic nemění
inline-block technika: swapping směr nezmění zarovnání menu, ale odkazy jsou zobrazeny ve správném pořadí
V prohlížečích, které nepodporují " start / end "(Chrome, Safari, Firefox)
float techniku: swapping směru nic nemění
inline-block technika: swapping směru stačí zaměnit směr jak v menu a odkazy

A je to! Příště, až budete muset stylu prvků vodorovně, nezapomeňte dát display:inline-block , nebo display:table zkusit.

Thierry Koblentz O autorovi: Thierry Koblentz je front-end inženýr na Yahoo! Vlastní TJK design a EZ-css.org a CSS-101.org . Můžete sledovat na Twitteru Thierry znak @ thierrykoblentz .

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!

4 Komentáře »

RSS komentářů k tomuto příspěvku. TrackBack URI

  1. Thierry,

    Toto tvrzení je částečně nesprávné:

    Plováky nemají představu o směrovost

    Přečtěte si prosím tuto zkušební série pro plováky a bidirection a tento test ukazuje plovoucích menu v "RTL 'směr. V současné době Opera a WebKit zpracovává přetečení špatného na směrové rozložení "RTL".

    Řeknu, že váš přístup (hacking CSS) je jako kódování, aby se IE7-šťastný. To nepomůže, 100s milionů lidí, kteří číst a psát skripty v tj. hebrejština nebo arabština), který má "RTL 'směr. V IE7-, weboví vývojáři museli proniknout výrazně, aby se IE7-chovat "RTL 'směr. Jedna obyčejná věc vidět v CSS pro tyto stránky s vedením "RTL 'je využití text-align: right a text-align: right k dosažení správné umístění textu. Budu konstatovat, že IE není jediný prohlížeč, který ovládal "RTL 'směr špatně.

    Teď to možná překvapení, pro vás, ale IE8 podporuje RTL směr správně. Jediný prohlížeč, který to udělal přímo před IE8 bylo je Gecko. Domnívám se, že budete plavat jak UL a Li, a nikoliv hack IE8 nebo IE9, protože to velmi článek se přidá k celé této dezinformaci o bidirection.

    Já měl nějaký vliv na spec o režimu psaní a směr. To bylo o logické vlastnosti a float a přepad pro RTL a přepadu a BiDi .

    Komentář od Alana Gresley - 26. dubna 2011 #

  2. @ Alan

    Ty mě matoucí. Zmínil jste na své stránky "float: vpravo nebo float: start RTL", ale pokud vím, není tam žádná taková věc jako "začátek" ve specifikaci [1], které jsou uvedeny pouze left a right a none a inherit .

    Jedna obyčejná věc vidět v CSS pro tyto stránky s vedením "RTL 'je využití text-align: right a text-align: right k dosažení správné umístění textu.

    Zdá se, že to, co používáte ve svých testovacích případů. tj. "Visible přetečení a obsahuje blok pro RTL", i když si myslím, text-align:right tam je nadbytečná a že text-align:start by byl vhodnější tak jako tak.

    Také upozorňujeme, že v tomto článku jsem se "ukázat" využití text-align: start|end . right|left hodnoty se používají pouze jako pád zpět.

    Vlastně, možná jste vynechal celý bod tohoto článku, který je, aby nemuseli ve stylu, co jinak v závislosti na kontextu. Vaše demo stránku, která ukazuje, rozbalovací menu v RTL a LTR kontextů swapy float hodnot a vlevo / vpravo vlastnosti, které není nic nového :-(

    Děkujeme za Váš názor!

    [1] http://www.w3.org/TR/CSS21/visuren.html # float-pozice

    Komentář od Thierry Koblentz - 26. dubna 2011 #

  3. No legrace. Testování.

    plováky a bidirection

    Komentář od Alana Gresley - 26. dubna 2011 #

  4. Výborně! Moc děkujeme Thierry!

    Jsem pracoval s podobným problémem a vaše rady v poslední větě vyřešit můj problém.

    Měl jsem tento kód:

    <- Režie: rtl;
    <- Position: absolute; režie: l;
    1 <- float: left;
    2 <- float: left;
    3 <- float: left;

    OBSAH

    Všechny prohlížeče kromě IE9 zobrazena tlačítka v řadě. Ale IE9 je zobrazena pod sebou (tak, jako by "float: left" neexistoval)

    Nakonec jsem to fungovat poté, co jsem přidal do "klika" div atribut "display: stolní".

    Díky moc,
    Radek.

    Komentář od Radek Přibyl - 10. října 2011 #

Zanechat komentář

Poznámka: Komentáře jsou moderovány pro první úvazek. Spam odstraněny.

XHTML: <a href="#" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Moderuje Yahoo!

Copyright © 2006-2012 Yahoo! Inc Všechna práva vyhrazena. Ochrana osobních údajů - Podmínky služby

Powered by WordPress na Yahoo! Web Hosting .