Tuneando la coctelera (CSS2): comentarios numerados, dividir palabras muy largas, etc.

Advertencia: artículo un pelín técnico.

He hecho algunos arreglillos cosméticos en mi blog. La finalidad era personalizar el aspecto básico que me ofrece La Coctelera y, de paso, aprender algo de CSS2. Nada de esto hubiera sido posible sin los consejos de adastra, mi gurú particular de estilos, tipografía, blogs y lenguas extrañas. Gracias, Pablo, por existir :-)
Los cambios se ven bien en Firefox y en Opera, pero el IE6 se pone tonto y le falta bastante soporte de CSS2. Al final, he desistido de ser totalmente compatible con el IE. El sitio seguirá siendo legible (al fin y al cabo el 90% de la gente utiliza IE), pero no se verán los adornos más sofisticados. A ver qué pasa con el IE7.
Les cuento los detalles técnicos que me han resultado más interesantes.

Numeración automática de comentarios

Una virguería que, cómo no, le debemos al maestro adastra, es conseguir la numeración automática de comentarios.
En mi blog yo he seguido una aproximación diferente. En lugar de emplear Javascript, he recurrido a las facilidades de autonumeración que ofrece CSS 2.1. Basta con añadir a la hoja de estilos estas líneas:

 body { counter-reset: number 0; }
 
 div.comentario { 
   counter-increment: number; 
 }
 
 div.comentario:before { 
   content: counter(number); 
   font-size: 100%; 
   color: #eb8;
   font-weight: bold; 
 }
 

El precio que pago es que los números no se ven en el IE (bueh, me da igual) y que no tengo flexibilidad para colocar el número donde me plazca. En cualquier caso, me ha resultado un interesante ejercicio con CSS2.

Problemas con palabras muy largas en el IE6

El IE6 tenía también problemas de maquetación. En alguno de mis artículos aparecían palabras bastante largas que se salían fuera de la caja de texto, pues el IE6 era incapaz de partirlas. El problema era que IE6 decidía ubicar la columna derecha (donde están las secciones «Sobre mí» ,«Amigos», etc.) debajo de la caja principal: al pie del documento. Una cagada, vamos.
Al que le ocurra algo parecido, le recomiendo usar el carácter HTML ­ que actúa como guion de separación opcional. Le da pistas al IE6 de dónde puede partir la palabra, como en este caso:

EstoEsUnaPalabraMuyLarga­QueElIE6PuedePartir­PorqueLePuseVariosSeparadores

En Firefox la palabra se verá sin partir, aunque se superpone con la columna de la derecha sin estropear la maquetación general. En Opera y en el IE6 la palabra se verá partida en dos o tres trozos (dependerá del tamaño de letra escogido en el navegador).

servido por jomis 4 comentarios compártelo