Archivo » CSS

Virtualización de WinXP + IE6, probando nuestro CSS

Bajo Windows tenemos algunas herramientas para probar nuestras hojas de estilo y el marcado que hemos generado. IETester MultipleIEs Sin embargo, las dos soluciones presentan algunos problemas. El primero de ellos en determinados casos no suele emular muy certeramente. El segundo no soporta Windows vista. Al menos no por ahora… El soporte javascript es bastante [...]

Continuar leyendo "Virtualización de WinXP + IE6, probando nuestro CSS".

Outline, contornos dinámicos en CSS

Outline nos permite crear un contorno dinámico (que bien suena esto ) alrededor de los objetos, imágenes, controles de un formulario, etc. La propiedad de CSS “outline” es una gran desconocida, creo que le hace sombra la famosa propiedad “border” aunque de forma mal interpretada. ¿Qué es un contorno dinámico? Es aquel que se forma [...]

Continuar leyendo "Outline, contornos dinámicos en CSS".

CSS print, página optimizada para la impresión

Hace poco tiempo hablábamos del código optimizado para diseñar e-mails y newsletter, ahora le toca el turno al formato de impresión. Por cierto, entre tantas versiones (pantalla, e-mail, impresión) cabe recordar eso de “una web única” tan promulgado por la W3C. Bueno, lo que si es cierto es que las ventajas de los estándares web [...]

Continuar leyendo "CSS print, página optimizada para la impresión".

@charset al inicio del CSS

Hoy por la mañana tuve un reporte acerca de un problema de estilo en Safari. Estuve mirando el CSS del blog en cuestión hasta que vi el @charset en mitad del documento. Charset tiene por misión indicar la codificación de caracteres dentro de una hoja de estilo CSS. @charset "utf-8"; Este fallo es algo que [...]

Continuar leyendo "@charset al inicio del CSS".

Detectar CSS con jQuery

Hay mucho escrito acerca de como detectar si un navegador soporta JavaScript, sin embargo conocer el soporte de CSS ya es algo más raro. Un viejo amigo me ha mandado hoy esa duda por e-mail, así que aprovecho este post para compartir la forma que he usado para detectar si un navegador esta soportando nuestra [...]

Continuar leyendo "Detectar CSS con jQuery".

Un test, web sin imágenes, sin CSS, sin JavaScript, plugins, etc.

Entiendo que un buen diseño web es aquel proporciona su información (el contenido) de forma sencilla (usabilidad) y adaptándose a una gran variedad de escenarios (accesibilidad). Sin profundizar demasiado en cada disciplina es bastante fácil comprobar lo dicho a través de un sencillo test en el que desactivemos de nuestro navegador las imágenes, el css, [...]

Continuar leyendo "Un test, web sin imágenes, sin CSS, sin JavaScript, plugins, etc.".

FLOAT, cuatro formas de contención

De vuelta con el inseparable amigo de cualquier diseñador web: float. Voy a resumir en este post 4 formas de contener los efectos colaterales evitando “desbordamientos” y la desorganizanción de los elementos fluidos. Easy clearing (Big John) Soluciona el problema creando la clase clearfix. Esta técnica es eficiente, no obstante y de forma personal la [...]

Continuar leyendo "FLOAT, cuatro formas de contención".

Un overflow: hidden; y width como clearfix

Esta técnica evita de forma muy sencilla los daños colaterales de float. Simplemente debemos de indicar las propiedades overflow: hidden; y especificar una medida para el width; en el elemento contenedor. div.container { overflow: hidden; width: 100%; }   div.left { width: 75%; float: left; } div.right { width: 25%; float: right; } Creo que [...]

Continuar leyendo "Un overflow: hidden; y width como clearfix".

Optimizar XHTML

Seis cuestiones a tener en cuenta para optimizar nuestro código XHTML. 1. Usar Strict Doctype Con la versión estricta (no la transicional) se hace posible una separación completa de la estructura, presentación y comportamiento del sitio web. 2. Mejor con UTF Ya se ha hablado mucho sobre los beneficios de usar UTF así que simplemente [...]

Continuar leyendo "Optimizar XHTML".

Diseñar en unidades EM con el porcentaje magico

Las unidades EM son una solución excelente para que el diseño web sea realmente flexible. Pero plantean un problema de base puesto que la conversión de pixeles a ems no es nada amigable. En un post anterior titulado Convertir PX en EM con Em Calculator ya hemos mencionado una herramienta que nos puede ayudar en [...]

Continuar leyendo "Diseñar en unidades EM con el porcentaje magico".