Direcção-friendly barra de navegação »Blog Yahoo! User Interface (YUIBlog)

Direcção-friendly Barra de Navegação

Abril 25, 2011 at 9:12 pm por Thierry Koblentz | Em CSS 101 e Desenvolvimento | 4 Comentários

Recentemente, deparei com um menu de navegação horizontal com links alinhadas à direita. Como você poderia esperar, foi um elemento da lista com float:right e os itens da lista com float:left . Mesmo que não haja nada de errado com esta abordagem, que me inspirou a aproveitar esta oportunidade para discutir direcionalidade para layout.

O custo dos elementos flutuantes

Floats não têm noção de direcionalidade, pois eles não funcionam como elementos inline ou colunas da tabela (para que o dir atributo é uma bala mágica). Com carros alegóricos, os autores devem implementar um mecanismo de "swap" valores sempre que as mudanças na interface ( ltr vs rtl ).

Então, ao invés de usar float , os autores podem favorecer inline-block . Aqui está um exemplo simples:

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

Observe que usar " \ 0 "(sem espaço) em vez de" \9 "tomaria conta de Opera, mas pode não ser como prova de futuro, como" \9 "(apenas IE).

Como esta página de demonstração mostra, no Chrome, Safari e Firefox, o inline-block técnica faz o layout escrita de modo dependente (a direção do fluxo corresponde ao valor da dir atributo, ou o valor inicial, se nenhuma direção é especificado). Por outro UA s, e por causa da falta do IE de apoio para o seletor de atributo (ie html[dir="rtl"] ), os autores precisam adicionar um gancho na marcação para atender à mudança de direção. Por exemplo, a compatibilidade de grau completo:

Para a técnica float:

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

Para a técnica inline-block:

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

`text-align: start | end`

Ao contrário de left e right , start e end são o modo de escrita as palavras-chave dependentes. Em Inglês, start mapas para left e end mapeia para right . Baseando-se no start e end ao invés de left e right permite que alguns navegadores para fazer a troca ( ltr / rtl ) automaticamente.

Diferenças entre os navegadores e técnicas

Em navegadores que não suportam o " start / end "(IE, Opera): flutuar técnica: direção de troca não muda nada; inline-block técnica: troca de direção não muda o alinhamento do menu, mas os links são exibidos na seqüência correta
Em navegadores que fazem "apoio start / end "(Chrome, Safari, Firefox): flutuar técnica: direção de troca não muda nada; inline-block técnica: troca de direção é o suficiente para trocar a direção do menu e os links

É isso aí! Da próxima vez que você tem que elementos de estilo horizontal, lembre-se de dar display:inline-block ou display:table uma tentativa.

Sobre o autor: Thierry Koblentz é um engenheiro de front-end no Yahoo! Ele é dono de TJK de Design , ez-css.org e css-101.org . Você pode acompanhar Thierry no Twitter em @ thierrykoblentz .

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

4 Comentários »

RSS feed dos comentários deste post. URI TrackBack

Thierry,
Esta afirmação é parcialmente incorreta:
Floats não têm noção de direcionalidade
Por favor, veja esta série de testes para carros alegóricos e bidirection e este teste mostrando menus flutuantes em 'rtl' direção. Atualmente Opera e WebKit lida com estouro de errado em layouts direcionais 'rtl'.
Posso dizer que sua abordagem (hackeando o CSS) é como codificação para fazer IE7-feliz. Isto não ajuda a. 100s de milhões de pessoas que lêem e escrevem scripts (hebraico ou árabe ou seja) que tem 'rtl' direção No IE7, os desenvolvedores web tiveram que cortar muito para fazer IE7-comportar-se de 'rtl' direção. Uma coisa comum ver no CSS para essas páginas com direção 'rtl' é o uso de text-align: right e text-align: right para conseguir a colocação correta do texto. Vou afirmar que o IE não é o único navegador que tem tratado 'rtl' mal sentido.
Agora, este talvez IE8 uma surpresa para você, mas apoia a direção rtl corretamente. O único navegador que fez o certo era antes IE8 é Gecko. Eu sugiro que você flutuar tanto ul e li direito e não cortar ou IE8 o IE9 uma vez que este artigo muito contribui para essa desinformação sobre todo bidirection.
Eu tinha alguma influência sobre a especificação sobre o modo de escrita e direção. Isto foi sobre propriedades lógicas e float e estouro de rtl e estouro e bidi .
Comentário por Alan Gresley - 26 de abril de 2011 #
@ Alan
Você está me confundindo. Você menciona em suas páginas "float: right ou float: começar por rtl", mas tanto quanto sei não existe tal coisa como "start" no spec [1] que apenas lista left , right , none e inherit .
Uma coisa comum ver no CSS para essas páginas com direção 'rtl' é o uso de text-align: right e text-align: right para conseguir a colocação correta do texto.
Parece que é o que você está usando em seus casos de teste. ou seja, "Estouro visível e bloco contendo para rtl", embora eu acho que text-align:right lá é redundante e que text-align:start teria sido mais apropriada de qualquer maneira.
Além disso, observe que neste artigo eu "demonstrar" o uso de text-align: start|end . right|left valores são utilizados apenas como uma queda de volta.
Na verdade, você pode ter perdido o ponto deste artigo que é para evitar ter de coisas estilo diferente dependendo do contexto. Sua página de demonstração que mostra menus suspensos na RTL e swaps LTR contextos flutuar valores e propriedades de esquerda / direita, que não é nada novo :-(
Obrigado por seus comentários!
[1] http://www.w3.org/TR/CSS21/visuren.html # flutuador posição-
Comentário por Thierry Koblentz - 26 de abril de 2011 #
Oh a diversão. Teste.
carros alegóricos e bidirection
Comentário por Alan Gresley - 26 de abril de 2011 #
Great! Muito obrigado Thierry!
Eu estava lidando com um problema semelhante e seu conselho na última frase resolvido o meu problema.
Eu tinha esse código:
<- Direção: rtl;
<- Position: absolute; direção: ltr;
1 <- float: left;
2 <- float: left;
3 <- float: left;
CONTEÚDO
Todos os navegadores, exceto o IE9 exibidos os botões em uma fila. Mas IE9 exibido-os abaixo uns aos outros (como se "float: left" não existia)
Finalmente eu tenho que trabalhar depois que eu adicionei ao "lidar" com div o atributo "display: table".
Muito obrigado,
Radek.
Comentário por Radek Pribyl - 10 de outubro de 2011 #

Deixe um comentário

Yahoo! Blog User Interface (YUIBlog)