Webmaster Libre

Este artículo es la traducción de Safe List Next With Left-Floated Elements escrito por Grand Schtroumpf:

Indice

1. Introducción
2. Hagámoslo tan sólido como sea posible
3. Primeras impresiones
4. Marcador fuera
5. Probando un truco para crear la indentación
6. Imagen de fondo como marcador
7. Conclusión

1. Introducción:

Existen muchos métodos para formatear agradables listas en HTML. Pero, ¿son esos métodos fiables en cualquier navegador y ante cualquier circunstancia?
En este artículo, echaremos un vistazo a una circunstancia simple: una lista con algún elemento flotado a la izquierda junto a ella.

Tropecé con este problema mientras trataba de definir algunas reglas genéricas de CSS para este sitio. En ese “layout” cada “sección” consiste en una imagen que puede estar flotada y algo de contenido envolviéndola que sólo puede contener párrafos (P), listas desordenadas (UL) o listas ordenadas (OL).
El problema típico con el que nos encontramos cuando usamos elementos flotados a la izquierda es que el margen izquierdo (margin-left) y el padding-left del “contenido envolvente” (wrapping content) son ignorados cuando tienen menos ancho que el elemento flotado. Esto puede sonar un poco abstracto en principio… Usaremos ejemplos desde ahora.

Los ejemplos usan un elemento flotado a la izquierda con borde azul y un fondo gris en los li para que podamos identificar facilmente sus límites.

2. Hagámoslo tan sólido como sea posible

Especificamos un margen y un padding cero en los elementos UL y LI para sobreescribir los valores por defecto de los navegadores. Especificamos que la posición del marcador sea «inside» (dentro).

CSS

ul, li {
margin: 0;
padding: 0;
}

ul {
list-style-position: inside;
}

Resultado

(Nota de la traducción: Utilizaré capturas de pantalla – utilizando Firefox en Linux – de los resultados de los ejemplos, en el enlace original podréis ver los ejemplos reales. )

3. Primeras impresiones

Algunos navegadores no hacen el wrap correctamente para el contenido de los elementos individuales de una lista.
Por lo que puedo entender, las especificaciones dicen que los elementos de las listas deben comportarse como elementos en bloque pero con un marcador adicional. Esto significa que los elementos de una lista deben expandirse por todo el ancho de su elemento padre. Eso no es exactamente lo que obtenemos en todos los navegadores.
Entre los navegadores que he probado, Opera e IE formatean los elementos de línea correctamente. Firefox y Konqueror usan un extraño modelo de cajas… un poco como si los elementos de línea estuvieran flotados, pero todavía expandiéndose por todo el espacio disponible a la derecha. Presta atención al fondo gris en las capturas de pantalla de aquí debajo.

Captura en Opera (wrapping correcto)

Captura de pantalla en Firefox (wrapping incorrecto)

Conclusión:

Esto es un mal comienzo. Debemos concluir que usar listas (especialmente listas con elementos largos) junto a elementos flotados a la izquierda debe ser evitado hasta que los principales navegadores las formateen correctamente. Pero no es un problema grave ya que todo el contenido, marcador incluído, es visible en todos los navegadores.
A parte de eso, el código se formatea más o menos como se espera en todos los navegadores en los que he probado (Firefox 2.0, Konqueror 3.5.2, Opera 9.0, IE 6.0).

4. Marcador fuera

Cuando usamos el marcador fuera, generalmente queremos que las listas aparezcan con cierta «indentación» comparadas con los párrafos de texto. Para hacerlo, tenemos las siguientes opciones:

• Establecer un pargin-left en el UL
• Establecer un margin-left en el UL
• Establecer un margin-left al LI

El problema con esta “indentación” no se mantiene en presencia de un elemento flotado a la izquierda.

CSS

ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-position: outside;
margin-left: 2em;
}

Resultado

Nota para Firefox:

Si, en lugar de usar un margen/padding en el UL, usamos un margen en el LI entonces Firefox muestra la indentación. No es un comportamiento adecuado y, dado que no es posible reproducir algo similar en otros navegadores, podemos considerarlo una solución válida.
li {
margin-left: 2em;
}

Conclusión

Cuando usamos un marcador en el exterior, el formateo es consistente sólo si la lista no está indentada (ni margin-left ni padding-left ni en el UL ni en el LI).
Debemos asegurarnos de que el elemento flotado a la izquierda tiene un margin-right suficientemente grande para dejar espacio para el marcador.

5. Probando un truco para crear la indentación

Podemos tratar de engañar al navegador usando posicionamiento relativo para crear la indentación. Se supone que no debe funcionar, de acuerdo a la especificación. Sólo es un ejemplo ilustrativo, definitivamente no es una solución válida.

CSS

:
ul, li {
margin: 0;
padding: 0;
}
li {
margin-right: 2em;
position: relative;
left: 2em;
}

Resultado

Captura de pantalla en Opera

Conclusión

Funciona en Firefox y Konqueror, dado el modelo de caja erróneo asignado a los elementos de lista.
Opera no mantiene la indentación. Esa es la conducta esperada en un elemento de bloque y, dejadme repetirlo una vez más, los elementos de lista deben formatearse como elementos en bloque.
IE mantiene la indentación, pero por alguna oscura razón, el marcador desaparece.
Este intento es un completo fallo.

6. Imagen de fondo como marcador

Una técnica popular es la de utilizar una imagen de fondo como reemplazo del marcador. ¿Realmente crees que conseguiremos mejores resultados con esto?

CSS

ul, li {
margin: 0;
padding: 0;
}
li {
list-style: none;
padding-left: 25px;
background-image: url(http://www.expertsrt.com/images/marker.png);
background-position: 10px center;
background-repeat: no-repeat;
}

Resultado

Captura de pantalla en Opera

Conclusión

Una vez más, funciona en Firefox y Konqueror, gracias al modelo de caja erróneo aplicado a los elementos de lista.
La conducta esperada es ver la imagen de fondo bajo el elemento flotado que es lo que obtenemos en Opera e IE.
Esta prueba también es un fallo absoluto.

7. Conclusión

Siendo mis principales preocupaciones la solidez del código y la compatibilidad entre navegadores, la única solución que cumple ambos criterios es la de usar un marcador interior sin padding-left ni margin-left.
Muchos sitios hacen gran alboroto con las listas bonitas. Pero sólo el estilo más simple de lista funciona junto a un elemento flotado a la izquierda.
Teniendo que escoger entre listas bonitas y algo tan básico como los elementos flotados a la izquierda es bastante irónico… o quizá me he perdido algo.