Dirección de usar barra de navegación »de usuario de Yahoo! Interfaz blog (YUIBlog)

Dirección de usar barra de navegación

25 de abril 2011 a las 9:12 am por Thierry Koblentz | En CSS 101 , Desarrollo | 4 comentarios

Recientemente me encontré con un menú de navegación horizontal alineado a la derecha con enlaces. Como era de esperar, fue un elemento de la lista con float:right y la lista de elementos con float:left . A pesar de que no hay nada malo con este enfoque, que me inspiró a aprovechar esta oportunidad para hablar sobre la direccionalidad de diseño.

El costo de los elementos flotantes

Los flotadores no tienen el concepto de direccionalidad, no funcionan como elementos en línea o columnas de la tabla (para que el dir de atributos es una bala mágica). Con flotadores, los autores deberán implementar un mecanismo para "intercambiar" los valores cada vez que cambia la interfaz ( ltr vs rtl ).

Así que en lugar de utilizar float , los autores pueden favorecer inline-block . He aquí un ejemplo simple:

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

Tenga en cuenta que el uso de " \ 0 "(sin espacio) en lugar de" \9 "se haría cargo de la Opera, pero puede no ser tan preparada para el futuro como" \9 "(solo para IE).

A medida que esta demo de la página muestra, en Chrome, Safari y Firefox, el inline-block técnica hace que el diseño de la escritura de modo dependiente (la dirección del flujo coincide con el valor de la dir atributo o el valor inicial si no se especifica la dirección). Por otro s UA, y debido a la falta de apoyo de IE para el selector de atributo (por ejemplo, html[dir="rtl"] ), los autores necesitan añadir un gancho en el marcado para atender a los cambios de dirección. Por ejemplo, para el total de grado de compatibilidad:

Para la técnica de flotación:

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

Para la técnica de inline-block:

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

`text-align: start | end`

A diferencia de left y right , start y end son el modo de escribir las palabras clave de su cargo. En Inglés, start mapas de left y la end se asigna a right . Basándose en start y end en lugar de left y right permite a los navegadores que hacer el intercambio de ( ltr / rtl ) de forma automática.

Diferencias entre navegadores y técnicas

En los navegadores que no soportan " start / end "(IE, Opera): técnica de flotación: intercambio de dirección no cambia nada; inline-block técnica: cambiando la dirección no cambia la alineación del menú, pero los enlaces se muestran en el orden adecuado
En los navegadores que son compatibles con " start / end "(Chrome, Safari, Firefox): técnica de flotación: intercambio de dirección no cambia nada; inline-block técnica: cambiando la dirección es suficiente para cambiar la dirección de ambos en el menú y los enlaces

Eso es todo! La próxima vez que usted tiene que elementos de estilo horizontal, recuerde dar display:inline-block o display:table intentarlo.

Sobre el autor: Thierry Koblentz es un ingeniero de front-end en Yahoo! Él es dueño de TJK Diseño , ez css.org- y -css 101.org . Puedes seguir Thierry en Twitter en @ thierrykoblentz .

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!

4 Comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

Thierry,
Esta afirmación es parcialmente incorrecta:
Los flotadores no tienen el concepto de direccionalidad
Por favor vea esta serie de ensayos para la flota y bidireccionales y esto prueba que muestra menús flotando en 'rtl' dirección. Actualmente Opera y WebKit maneja mal desbordamiento en los diseños de dirección 'rtl'.
Voy a decir que su enfoque (la piratería de la CSS) es como de codificación para hacer IE7-feliz. Esto no ayuda a los 100s de millones de personas que leen y escriben guiones (es decir, hebreo o árabe) que ha 'rtl' dirección. En IE7, los desarrolladores web han tenido que cortar mucho para hacer IE7-se comportan de 'rtl' dirección. Una cosa común ver en el CSS de las páginas de este tipo con la dirección 'rtl' es el uso de text-align: right y text-align: right para lograr la correcta colocación de texto. Afirmo que IE no es el único navegador que ha manejado 'rtl' sentido mal.
Ahora bien, esto tal vez una sorpresa para usted, pero IE8 soporta RTL dirección correcta. El único navegador que lo hizo justo antes de que IE8 se está Gecko. Le sugiero que flotan tanto en el ul y li derecho y no hackear IE8 o IE9 desde este mismo artículo se añade a esta falta de información completa sobre bidireccionales.
Yo tenía cierta influencia en la especificación en el modo de escritura y dirección. Esto fue sobre las propiedades lógicas , flotador y desbordamiento de reeducación por el trabajo y el desbordamiento y bidi .
Comentario por Alan Gresley - 26 de abril 2011 #
@ Alan
Me estás confundiendo. Usted menciona en sus páginas "float: right o float: inicio de RTL", pero hasta donde yo sé no hay tal cosa como "inicio" en la especificación [1], que sólo muestra left , right , none y inherit .
Una cosa común ver en el CSS de las páginas de este tipo con la dirección 'rtl' es el uso de text-align: right y text-align: right para lograr la correcta colocación de texto.
Parece que es lo que usted está utilizando en los casos de la prueba. es decir, "Desbordamiento visible y bloque de contención de RTL", aunque creo que text-align:right en la que es redundante y que text-align:start habría sido más apropiado de todos modos.
Además, tenga en cuenta que en este artículo "demostrar" el uso de text-align: start|end . right|left los valores sólo se utilizan como una caída hacia atrás.
En realidad, puede haber perdido todo el sentido de este artículo, que es para evitar que a las cosas de manera diferente estilo en función del contexto. Su página de demostración que muestra los menús desplegables en la RTL y LTR swaps contextos flotan los valores y las propiedades de izquierda / derecha, que no es nada nuevo :-(
Gracias por tus comentarios!
[1] http://www.w3.org/TR/CSS21/visuren.html # float-position
Comentario por Thierry Koblentz - 26 de abril 2011 #
Oh la diversión. Pruebas.
carrozas y bidireccionales
Comentario por Alan Gresley - 26 de abril 2011 #
Genial! Muchas gracias Thierry!
Yo estaba tratando con un problema similar y su consejo en la última frase resuelto mi problema.
Tuve este código:
<- Direction: rtl;
<- Position: absolute; dirección: l;
1 <- float: left;
2 <- float: left;
3 <- float: left;
CONTENIDO
Todos los navegadores excepto IE9 muestra los botones en una fila. Sin embargo, IE9 muestra que abajo unos a otros (como si "float: left" no existía)
Finalmente tuve que trabajar después de añadir a la "manija" div el atributo "display: table".
Muchas gracias,
Radek.
Comentario por Radek Pribyl - 10 de octubre 2011 #

Deja un comentario

Desarrollado por WordPress en Yahoo! Web Hosting .

Yahoo! User Interface Blog (YUIBlog)