VivaServer estrena nuevo diseño
Como será evidente para quien haya visitado este sitio últimamente, VivaServer estrena hoy un nuevo diseño cortesía de la buena gente de ClownGroup. Gracias a sus esfuerzos, nuestro diseño es ahora no sólo exclusivo sino que también valida exitosamente como XHTML 1.0 Strict. Aunque el diseño fué marquetado en Windows, después de unas modificaciones menores de mi parte (principalmente en la definición de las tipografías) el sitio se vé igualmente bien en Linux, Mac OS X y Windows; con los navegadores Firefox, Safari e Internet Explorer.
La verificación de las modificaciones con Internet Explorer 6.0 la realicé en Linux usando el espectacularmente útil IEs4Linux y con Safari 3.0 usando su versión Beta gratuita recientemente liberada para Windows.
A pesar de mis esfuerzos, sin embargo, el archivo CSS resultante no valida gracias a un hack imprescindible para IE:
Se trata de la propiedad overflow-x, necesaria para presevar la correcta visualización de las áreas <pre> en el navegador de Microsoft, que junto con los estilos para <code> permite mostrar porciones de código fuente en el diseño usando sólo CSS.
Este era un requisito que impuse personalmente, pues no quería recurrir a la complejidad añadida de JavaScripts de terceros para el simple hecho de mostrar una porción de código, algo que además espero hacer frecuentemente en este blog.
Como ejemplo de lo comentado, así quedaron los estilos definitivos definidos para <pre> y <code>, en la combinación que finalmente demostró ser compatible con los 3 navegadores mencionados:
code {
color: #043F4A;
font-family: 'courier new', courier, monospace;
}
pre {
background: #ececec;
display: block;
margin: 0 0 1em 0;
padding: 5px;
overflow: auto;
overflow-x: scroll;
width: 100%;
}
La propiedad overflow: auto; es correctamente interpretada por Firefox y Safari, pero no por IE, que necesita de su incompatible overflow-x: scroll; como se mencionó anteriormente y de width: 100%; para abarcar el área correcta del contenedor <div> principal.