Ordenando números de lista, con estilos

Siempre me he molestado lo difícil que es darle estilo a los números de listas ordenadas. Muy a menudo el diseño exige algo más que sólo una figura simple – una fuente diferente, el tamaño, color, fondo, lo que sea.

El enfoque tradicional para solucionar este problema ha sido la de evitar que el navegador haga el rederizado de los número en los elementos de lista (elementos <li>) y en lugar de codificar los números en el contenido del texto de la etiqueta <li>. Eso hace que sea posible añadir ganchos de estilo para el número y distancia hasta que uno esté satisfecho.

Es una forma visual de trabajar, pero no es exactamente una forma semánticamente correcta de utilizar las listas. Cuando uno ve una falsa lista numerada con CSS dehabilitado nos se ve una lista con los números o los puntos o una lista con viñetas y números, esto me hace sentir un retroceso.

Así que cuando me enfrenté recientemente con darle estilo a una lista de numero una vez más pensé que tendría otra oportunidad en hacerlo sin falsificar la numeración. Gracias a que Internet Explorer finalmente está comenzando a ponerse al día con CSS y la aceptación cada vez mayor de los clientes hay una mejora progresiva, esta vez fui capaz de encontrar una solución viable.

La clave es el uso de contenidos generados con CSS para crear e insertar un contador de números después de quitar el valor predeterminado de la numeración en la lista. He hecho un estilo ordenando las listas de números. Aquí esta una página de demostración con un ejemplo simple, para empezar.

The CSS used on the demo page is this:

ol { counter-reset:li; /* Initiate a counter */ 
margin-left:0; /* Remove the default left margin */ 
padding-left:0; /* Remove the default left padding */ } 
ol > li { position:relative; /* Create a positioning context */ 
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */ 
padding:4px 8px; /* Add some spacing around the content */ 
list-style:none; /* Disable the normal item numbering */ 
border-top:2px solid #666; background:#f6f6f6; } 
ol > li:before { content:counter(li); /* Use the counter as content */ 
counter-increment:li; /* Increment the counter by 1 */ /* Position and style the number */ 
position:absolute; top:-2px; left:-2em; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; width:2em; /* Some space between the number and the content in browsers that support generated content but not positioning it (Camino 2 is one example) */ 
margin-right:8px; 
padding:4px; 
border-top:2px solid #666; 
color:#fff; 
background:#666; 
font-weight:bold; 
font-family:"Helvetica Neue", Arial, sans-serif; 
text-align:center; } 
li ol, li ul {margin-top:6px;} 
ol ol li:last-child {margin-bottom:0;}

La clave, en parte es lo siguiente:

Fuente original: http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

Traducción por jazdian.

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s