Sobre el list-style

[metacortex]

La viñeta (y otros elementos) de lista es un elemento de estructura que nos indica la naturaleza del formato. Qué tan semántico sea su uso depende por supuesto del maquetador, pero lo cierto es que en el área de diseño creo que se logran mejores resultados prescindiendo del list-style para siempre. Esto sólo lo aplico en el caso de las listas no ordenadas.

Si en lugar del list-style asignamos fondos tenemos más libertad de personalización, tanto en la elección de la imagen/efecto como en el mismo posicionamiento de la viñeta.

Código:

<ul>
  <li>Elemento</li>
</ul>

------------

ul {
  list-style: none;
}

li {
  padding-left: 15px;
}

li a {
  background: url(vineta.png) left 4px no-repeat;
}

li a:hover {
  background: url(vineta-hover.png) left 4px no-repeat;
}

Igualmente podemos asignar fondos no repetitivos e incluir una "viñeta falsa". Hay buenas opciones con este método.

En realidad el problema que he encontrado con el list-style es (como siempre) el mardito IE, el cual tiende a desplazar un poco la imagen de la viñeta hacia arriba. Usando background en lugar del list-style se soluciona esta parte.