Bajo Windows tenemos algunas herramientas para probar nuestras hojas de estilo y el marcado que hemos generado.

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 pobre, incluso es bastante complejo llegar a probar soluciones del tipo PNGFIX.

Continue reading «Virtualización de WinXP + IE6, probando nuestro CSS»

Outline nos permite crear un contorno dinámico (que bien suena esto :D) 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 alrededor del elemento sin afectar a la maquetación. Por lo tanto, mostrar u ocultar los contornos no provoca el redibujado de los elementos afectados ni adyacentes.

Cabe destacar que el contorno se dibuja justo fuera del limite del «border».

Las propiedades hijas de outline

  • outline-width
  • outline-style
  • outline-color

Outline vs. Border

Son propiedades diferentes:

  • Los contornos no ocupan espacio.
  • Los contornos pueden ser no rectangulares.
  • No existen outline-top, outline-left.
  • La propiedad outline-style no acepta el valor «hidden».

Usando outline

Yo recurro mucho a esta propiedad para la interacción con los controles de un formulario.

input:focus[type=text], 
textarea:focus, 
select:focus { 
	outline: 1px solid #3EB3D6; 
}  

En este CSS indico que a través de los pseudo-selectores:

  • input:focus[type=text]: controles de entrada de datos (solamente de tipo text, no botones)
  • textarea:focus: áreas textuales
  • select:focus: controles de tipo desplegable con varias opciones.

Cuando estos controles reciben el foco se dibuja un contorno dinámico de 1px de grosor, de estilo solido y con el color #3EB3D6.

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 permiten una mejor adaptación al dispositivo o medio final y esto conlleva un ahorro de trabajo enorme.

Vamos al ataque con el CSS optimizado para la impresión.

Continue reading «CSS print, página optimizada para la impresión»

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 he visto alguna vez, pero en este caso no estaba hecho a mano sino que se trataba de un proceso automático mediante el cual se incrustaba el CSS de un fichero dentro de otro.

Sólo puede aparecer una regla de @charset en una hoja de estilo externa y deberá aparecer al principio del documento. No debe haber ningún carácter antes de la regla, ni siquiera como comentario.

De no seguir estas consideraciones algunos navegadores (especialmente Safari) procesan de forma incorrecta los selectores, tag y propiedades que van a continuación, o incluso la propia codificación del fichero CSS.

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 hoja de estilo.

Cuando diseñamos un layout uno de los elementos comunes es el envoltorio (wrapper, el contenedor que recoge toda la web). Este puede servirnos como elementos clave para detectar si el navegador esta procesando la hoja de estilo.

En un fichero .js incluimos el siguiente código:

function detectCSS() {
	var result = ($('#wrapper').css('width') == '1000px')? true : false;
	return result;
}

Esta función se encarga de responder verdadero o falso tras analizar el elemento wrapper. Dicho elemento tiene en la hoja de estilos la propiedad width con valor 1000px.

Si el CSS no es procesado el selector de jQuery $('#wrapper').css('width') devolverá un width con un tamaño por defecto indicado por el navegador, pero que no debería coincidir con la medida que hemos especificado (1000px).

La idea es que el operador ternario determine a partir de la condición si hay o no CSS, almacenándolo en una variable. Luego esta es retornada con la respuesta.

Por último y en cualquier lugar podemos hacer la llamada a la función:

$(document).ready(function(){
	if(detectCSS()) {
		//lo que quieras hacer si el CSS es procesado...
	}
})

El ejemplo se encuentra en jQuery, de todas formas la conversión a mootools, otro framework o «javascript base» no presentaría ningún problema, únicamente cambiar la notació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 he usado en algunas ocasiones y no me parece tan cross-browsing como otras técnicas. Por otro lado su implementación no me convence puesto que la separación estructura-estilo se ve un tanto afectada al requerir la inclusión de la clase.

Un contenedor fluido soluciona el contenido fluido (Meyer)

Suena un poco redundante pero no he conseguido explicarlo mejor 🙂 .
Cuando comencé con CSS descubrí fortuitamente este método (os ha pasado?) y quizás fue la que mas he usado. Su implementación tiene el problema de aplicar demasiado float al estilo, sin embargo tiene un buen nivel de cross-browsing.

Usar «clear: both;» en un salto de línea

Podemos hacer una clase clear que contenga el clear: both; de esta forma podemos mejorar su inclusión. Aunque su uso sea necesario en algunas ocasiones la separación estructura-estilo queda afectada al requerir de un extra que no aporta información al contenido al tratarse de un arreglo de diseño.

Overflow y width como clearfix

Totalmente cross-browsing y con una implementación muy sencilla. Cabe destacar que esta técnica mantiene la abstracción de la estructura y el estilo. Mi preferida 😉

¿Cuál es vuestra técnica favorita?

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 IE al ver que el contenedor incorpora un width y un overflow (que no es el overflow por defecto «visible») se ve obligado a re-calcular su tamaño. En ese proceso ya tienen en cuenta a los elementos hijos flotados.

Existen varias técnicas para el float, pero personalmente me decanto por esta. Me parece muy sencilla de implementar, mantiene la abstracción estructura-diseño y es realmente cross-browsing.