Niquelao » Blog-Archiv » Aber, ist sie schlau!!

Nosotros, a pesar de nuestras profundas raíces en pro de los estándares, vamos a concederle el beneficio de la duda. A medida que nos vayamos explicando, os decantaréis por una de las dos posturas. Últimamente me da por utilizar el plural, como si mi compañero, que no por eso amigo, estuviera de acuerdo con lo que digo. ¡Ese Rumo, ese Rumo, eh, eh!! ¿Y cuál es el problema?

Bien, para empezar tenemos una lista ordenada, los típicos pasos a seguir. Hasta el momento, todo correcto. Pero aprovechándonos de las bondades de CSS queremos mostrar los elementos de la lista en horizontal. Una vez llegados a este punto, tenemos varias posibilidades: aplicar a los elementos de la lista la propiedad display: inline flotar los elementos de la lista hacia un lado, float: left Ya surgen los primeros problemas: los marcadores de la lista (números o viñetas) desaparecen, siempre en IE y algunas veces en FF. ¿Qué dicen las Sagradas Escrituras? ¡Ya está, IE vuelve a fallar! ¿Y qué dicen las Sagradas Escrituras sobre todo esto?

Resulta que en el apartado 12.5 de la especificación CSS 2.1 se indica claramente que, para la disposición visual de las listas, estos elementos poseen una propiedad tal que: display: list-item la cual genera una caja de bloque que, a su vez, contiene un marcador opcional (número o viñeta) y el contenido del elemento. Asimismo, todas las propiedades que afectan a los elementos de lista tienen una pequeña restricción: solo se aplican a elementos con display: list-item. Lo de “opcional” ya deja muchas puertas abiertas, y más si se trata de ciertas personas.

Con esta parte de las escrituras ya tenemos la solución a uno de los problemas: en cuanto declaramos la propiedad display: inline en los elementos de la lista, las propiedades propias de estos elementos (tipo, posición, fondo) dejan de afectarles. Repetimos, la especificación es clara: solo para elementos con display: list-item. En un capítulo anterior de la especificación CSS 2.1, concretamente el capítulo 9, dedicado al modelo de formato visual, encontramos un apartado dedicado a la relación y reacción de los elementos cuando se combinan las propiedades display, position y float (apartado 9.7).

Este tema afecta directamente a la representación de los elementos, como vamos a ver. En líneas generales, viene a decir que la mayoría de los elementos, al aplicarles la propiedad float, pasan a tener también display: block, salvo contadas ocasiones en las que el valor permanece igual al especificado, es decir, no cambia.

Los elementos que tienen la propiedad display: list-item no deberían cambiar. Claro que esto es lo que nos dice la especificación CSS 2.1. La especificación CSS 2, Recomendación W3C vigente aunque no la más utilizada, aplica a todos los elementos flotados la propiedad display: block. Ahí lo tienen; quien quiera buscar un clavo ardiendo al que agarrarse para defender a IE no tiene más que basarse en esta premisa. ¿Qué puedo hacer para que se vea igual en ambos navegadores?

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Una vez más, no hemos encontrado ningún hack para solucionarlo, pero como somos unos tipos con recursos os vamos a dar unas cuantas ideas. eliminar el marcador en todos los casos: list-style: none eliminar el marcador en todos los casos y añadir texto que lo sustituya, eso sí, si viene al caso. Utilizar números en una lista ordenada nos causará problemas cuando no tengamos soporte para CSS.

Si acompañamos el número con texto siempre daremos una mejor imagen (Paso 1, Paso 2, etc.). eliminar el marcador en todos los casos y añadir una imagen de fondo mediante la hoja de estilos. Esta solución hará que aumente el marcado en caso de utilizar números, ya que tendremos que declarar una imagen por cada uno de ellos. Un par de curiosidades… ¿Sabías que si se aplica el valor display: inline al elemento ol, nuestro amigo FF inicializa todos los marcadores de lista a 0? Algo similar le sucede a IE si a los elementos de una lista ordenada se les asigna un ancho (width).

En este caso, todos los marcadores se inicializan a 1. Referencia Especificación CSS 2.1 Especificación HTML 4.01 Categoría: CSS, (X)HTML —> 2 comentarios Lector anónimo 7 de noviembre de 2006 Creo que hay poco contraste entre el color de fondo y el de primer plano de ciertos elementos. Rumoroso 7 de noviembre de 2006 Si nos indicas cuáles, podremos revisarlo.

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También podrías dejar un comentario, o enviar un trackback desde tu sitio. Artículo anterior: Me paso al lado oscuro Artículo siguiente: Yo también lo he visto… Deja tu comentario Los campos Nombre y Email son obligatorios Añádenos a…

Etiquetas que destacamos en general accesibilidad conocimiento CSS estándares fieldset Firefox formato formulario fuentes hidden ie IE 7 información javascript legend lista niquelando obligatorio opera xhtml

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.