Suunta sopiva Navigointipalkin

25 huhtikuu 2011 at 9:12 am Thierry Koblentz | In CSS 101 , kehittäminen | 4 Comments

Olen hiljattain tuli koko vaakasuora navigointi menu on tasattu oikealle linkkejä. Kuten arvata saattaa, se oli listan elementti float:right ja lista kohteita float:left . Vaikka ei ole mitään vikaa tätä lähestymistapaa, se innoitti minua tilaisuutta keskustella suuntavaikutelman ulkoasun.

Kustannukset ovat kelluvia elementtien

Kelluu ole mitään käsitystä suunta, ne eivät toimi niin rivinsisäiselementtien tai taulukon sarakkeet (jonka dir ominaisuus on ihmelääke). Kellukkeilla, kirjoittajat on toteutettava mekanismi "vaihtaa" arvoja aina ulkoisia muutoksia ( ltr vs. rtl ).

Joten sen sijaan käyttää float , kirjoittajat saattavat suosia inline-block . Tässä on yksinkertainen esimerkki: 

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

Huomaa, että käyttämällä " \ 0 "(ilman välilyöntiä) eikä" \9 "hoitaisi Opera, mutta ei ehkä niin tulevaisuudessakin, koska" \9 "(IE only).

Koska tämä esittelysivu osoittaa, Chrome, Safari ja Firefox, inline-block tekniikka tekee layout kirjoitus-tilassa riippuvainen (virtaussuunnassa vastaa arvoa dir määritteen tai alkuarvo ellei suunta on määritetty). Muiden UA s, ja koska IE: n tuen puutetta attribuuttivalitsinta (esim. html[dir="rtl"] ), kirjoittajat pitää lisätä koukku markup palvelemaan suunnanmuutosta. Esimerkiksi täysi-luokan yhteensopivuus:

Varten uimurin tekniikkaa: 
 .rtl ul { float: left; } .rtl ul li { float: right; }
Jotta inline-block tekniikkaa: 
 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ }

text-align: start | end

Toisin left ja right , start ja end ovat kirjallisesti-tilassa riippuvainen avainsanoja. In Englanti, start karttoja left ja end karttojen right . Vedoten start ja end kuin left ja right sallii joidenkin selainten tehdä swap ( ltr / rtl ) automaattisesti.

Erot selainten ja tekniikoiden

Tässä selaimet eivät tue " start / end "(IE, Opera)
float tekniikka: vaihtamalla suuntaa ei muuta mitään
inline-block tekniikka: swapping suunta ei muutu yhdenmukaistaminen valikon, mutta linkit näkyvät oikeassa järjestyksessä
Tässä selaimet eivät tue " start / end "(Chrome, Safari, Firefox)
float tekniikka: vaihtamalla suuntaa ei muuta mitään
inline-block tekniikka: swapping suunta riittää vaihtaa suuntaa sekä valikon ja linkit

Siinä kaikki! Seuraavalla kerralla täytyy tyylielementit vaakasuunnassa, muista antaa display:inline-block tai display:table kokeilla.

Thierry Koblentz Author: Thierry Koblentz on front-end-insinööri Yahoo! Hän omistaa TJK suunnittelu , EZ-css.org ja css-101.org . Voit seurata Thierry Twitterissä osoitteessa @ thierrykoblentz .

Hae keskustelut: Bloglines | technorati

Jaa ja laajentaa: Kirjanmerkki suosikkeihisi Del.icio.us | Digg it! | reddit!

4 Comments

  1. Thierry,

    Tämä väite on osittain virheellinen:

    Kelluu ole mitään käsitystä suunta

    Katso tämä testi sarja kellukkeet ja bidirection ja tämä kokeessa kelluvat valikot in RTL "suuntaan. Nykyisin Opera ja WebKit käsittelee ylivuoto pieleen "RTL" suuntaan ulkoasuja.

    Sanon, että lähestymistapa (hakkerointi CSS) on kuin koodaus tehdä IE7-onnelliseksi. Tämä ei auta 100s miljoonat ihmiset, jotka lukevat ja kirjoittavat skriptejä (so. heprea tai arabia), joka on "RTL" suuntaan. IE7-, web-kehittäjät ovat joutuneet hakata huomattavasti, jotta IE7-käyttäytyä "RTL" suuntaan. Yksi yhteinen asia nähdä CSS näiden sivujen "RTL" suunta on käyttää text-align: right ja text-align: right saavuttaa oikeasta sijoittamisesta tekstiä. Totean, että IE ei ole ainoa selain, joka on hoitanut "RTL" suuntaan huonosti.

    Nyt tämä ehkä yllätyksenä, mutta IE8 tukee rtl suunnan oikein. Ainoa selain, joka teki sen juuri ennen kuin IE8 ei ole Gecko. Ehdotan, että kelluvat sekä ul ja li oikeus eikä hakkeroida IE8 tai IE9 koska hyvin artikkelin tähän lisätään koko väärää tietoa bidirection.

    Minulla oli jonkin verran vaikutusta spec kirjoittamiseen tila ja suunta. Tämä koskee loogisiin ominaisuuksiin , float ja ylivuoto RTL ja ylivuodon ja bidi .

    Kommentti Alan Gresley - 26 huhtikuu 2011 #

  2. @ Alan

    Olet sekava minulle. Te mainitsette sivut "float: oikea tai float: aloita RTL", mutta tietääkseni ei ole olemassa sellaista asiaa kuin "Start" spec [1], joka näyttää vain left , right , none ja inherit .

    Yksi yhteinen asia nähdä CSS näiden sivujen "RTL" suunta on käyttää text-align: right ja text-align: right saavuttaa oikeasta sijoittamisesta tekstiä.

    Näyttää siltä, ​​että mitä käytät oman testitapauksia. eli "Näkyvä ylivuoto ja jossa Block RTL", vaikka mielestäni text-align:right in on tarpeeton ja että text-align:start olisi ollut parempi anyway.

    Huomaa myös, että tässä artikkelissa "osoittamaan" käyttö text-align: start|end . right|left arvoja käytetään vain taantua.

    Itse asiassa, sinulla on jäänyt koko Tämän artikkelin joka on välttyä tyyliin asioita eri tavoin riippuen asiayhteydestä. Sinun esittelysivu, joka näyttää avattavasta valikot RTL ja LTR yhteyksissä swap kellua arvoja ja vasen / oikea ominaisuuksien, joka ei ole mitään uutta :-(

    Kiitos palautteesta!

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

    Kommentti Thierry Koblentz - 26 huhtikuu 2011 #

  3. Voi hauskaa. Testaus.

    kellukkeet ja bidirection

    Kommentti Alan Gresley - 26 huhtikuu 2011 #

  4. Hienoa! Kiitos Thierry!

    Olin käsitellään samanlainen ongelma ja teidän neuvoja viimeisessä virkkeessä ratkaista minun ongelma.

    Minulla oli tämä koodi:

    <- Suunta: RTL;
    <- Position: absolute; suunta: ltr;
    1 <- float: left;
    2 <- float: left;
    3 <- float: left;

    SISÄLTÖ

    Kaikki selaimet lukuunottamatta IE9 näkyy painikkeita peräkkäin. Mutta IE9 näytetään ne alapuolelta toisiaan (ikään kuin 'float: left "ei ole)

    Lopulta sain sen työpäivän jälkeen Lisäsin "kahva" div määritettä "näyttö: taulukko".

    Kiitos paljon,
    Radek.

    Kommentti Radek Pribyl - 10 lokakuu 2011 #

Anteeksi, kommentti lomake on suljettu tällä hetkellä.

Hosted by Yahoo!

Copyright © 2006-2012 Yahoo! Inc. Kaikki oikeudet pidätetään. Tietosuojakäytäntö - Käyttöehdot

Powered by WordPress on Yahoo! Web Hosting .