aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Martin Ivanov ha hecho una recopilación de 10 hacks CSS que seguro nos pueden servir en algún que otro momento.

1) Mejorando el escalado y resampleado de las imagenes en Internet Explorer

En Internet Explorer 7 la propiedad de escalado por el método bicubic está deshabilitada por defecto y debemos activarla nosotros desde nuestro CSS indicando que los elementos <img /> recibirán ese estilo:

img {
  -ms-interpolation-mode: bicubic;
}

-ms-interpolation-mode, especifica el método de resampleado de imagenes del navegador.

2) Añade opacidad a Internet Explorer 8

Pese a que la lógica nos decía que Internet Explorer 8 iba a soportar opacity en nuestros CSS, tendremos que esperar a la versiñon final para ver si esta será definitivamente soportada por el navegador, por el momento podemos especificarlo en nuestros CSS:

element {
  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

3) 32 hojas de estilo como máximo para Internet Explorer

Internet Explorer limita a 32 el número de hojas de estilo invocadas por página, ya sea mediante el uso de <link /> o @import url;. Si se pasa este número, las siguientes no serán procesadas. Es importante tener esto en cuenta si algun día te encuentras con esto.

4) Cargando en CSS no obstructivo

Los cargando son útiles para indicar al usuario que algo se está procesando y que debe esperar a que esto termine. Cuando se trata de cargar imagenes, es recomendable usar la propiedad background de nuetro CSS para mostrar una imagen de fondo que será reemplazada por la imagen que deseamos mostrar en el momento que esta esté cargada completamente.

img {
   background: white url(’Images/Loading.gif’) no-repeat center;
}

5) Distingir entre Google Chrome y Safari con CSS

Detectar si nuestro usuario está usando Google Chrome o Safari es dificil desde nuestro CSS, pero no imposible. Ahora con este hack podemos distinguir que navegador está usando nuestro usuario pese a que los dos estén usando el mismo motor de renderizado (WebKit).

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
/* properties go here */
}

/* Safari hack */
body:first-of-type .elementOrClassName{
/* properties go here */
}

6) Resetear las transperiencias de los hijos de padres transparentes en Internet Explorer

Cuando hacemos un contenedor transparente los hijos de este absorven la transpariencia del padre convirtiendose en transperentes ellos tambien, para corregir esto debemos resetear la opacidad del elemento:

.parent{
...
filter: alpha(opacity=30);
}

.child{
...
position: relative;
// En caso de tener una opacidad diferente
filter: alpha(opacity=50);
}

7) $style, obtén cualquier propiedad CSS de cualquier Objeto

$style es una función crossbrowser que permite obtener cualquier propiedad CSS especificada en nuestro CSS sobre cualquier elemento.

function $style(ElementId, CssProperty) {
	function $(stringId) {
		return document.getElementById(stringId);
		}
		if($(ElementId).currentStyle) {
			var convertToCamelCase = CssProperty.replace(/\-(.)/g, function(m, l){return l.toUpperCase()});
			return $(ElementId).currentStyle[convertToCamelCase];
		}
		else if (window.getComputedStyle) {
			var elementStyle = window.getComputedStyle($(ElementId), “”);
			return elementStyle.getPropertyValue(CssProperty);
		}
}

8 ) Emulando border-color: transparent en Internet Explorer 6

Por suerte en Internet Explorer 7 ya está soportada este propiedad, pero en Internet Explorer 6 no, y por desgracia aún tenemos que darle soporte. Por suerte podemos solventarlo:

.testDiv {
	...
	border: solid 10px transparent;
}
// IE Hack
*html .testDiv {
	border-color: pink;
	filter: chroma(color=pink);
}

9)  Exótico hack CSS para Internet Explorer

Ya vimos hace tiempo los diferentes CSS hacks que existían y este es uno de los no recomendados ya que nos evita validar nuestros CSS, pero en situaciones no nos queda otro remedio que sucumbir y mirar para otro lado:

h1{
 color: green;
.color: red;
}

10) Marca de agua en CSS

Una marca de agua nos añade un texto definido por nosotros sobre una imagen, en este caso mediante CSS podemos añadirselo para que el efecto visual sea el de usar una marca de agua, pero no lo añade a la imagen, por lo que no solucionaría problemas de copia de contenido. Ver un ejemplo.

En un momento de aburrimiento he estado implementado una versión de Cron para Javascript. Para los que no lo sepan, Cron es una utilidad del sistema Unix que permite programar tareas a lo largo del tiempo. Una de las utilidades más usadas para tareas como copias de seguridad, envío de mails, …

Para Javascript he pensado que sería interesante usar la misma estructura cron usa en el fichero crontab, donde se almacena la lista de tareas programadas.

35 17 * * * hola()

Hagamos un pequeño repaso a los parámetros de Cron (por orden):

1. minuto [0-59]
2. hora [0-23]
3. dia del mes [0-31]
4. mes [0-12]
5. dia semana [0-7]
6. ejecutable

Los * indican cualquier, por lo tanto en el ejemplo anterior indicamos que cada día a las 17:35 se ejecutará el script hola().

La hora especificada será la del navegador del usuario

Veamos unos ejemplos más:

* 16 * * * hola()

Cada día desde las 16:00 a las 16:59 se ejecutará hola().

30 6 1 * * showHola()

Ejecutamos showHola() el día 1 de cada mes a las 6:30 de la mañana.

Se trata de un sistema bastante rudimentario, pero funciona y aunque operadores como (/2) no están contemplados, dan mucho juego.

Codigo

var jsCron = {
		items:[],
		interval: null,
		parse: function(strUnix) {
				return strUnix.match(/^(\d+|\*) (\d+|\*) (\d+|\*) (\d+|\*) (\d|\*) +(\w+)/);
		},
		check: function() {
				var hoy = new Date();
				var test = [new Date(), hoy.getMinutes(), hoy.getHours(), hoy.getDate(), hoy.getMonth(), hoy.getDay()];

				for (var i in this.items) {
					var exec = 0;
					var t = this.parse(this.items[i][1]);
					for (var x in t)
				    if (t[x] && (t[x] == test[x] || t[x] == "*"))exec++;
					if (exec == 5 && this.items[i][0] == 0) {
							eval(t[6]).call();
							this.items[i][0] = 1;
					} else if (exec < 5 && this.items[i][0] == 1) {
						this.items[i][0] = 0;
					}
				}
		},
		set: function(strUnix) {
			if (!/^(\d+|\*) (\d+|\*) (\d+|\*) (\d+|\*) (\d|\*) +(\w+)/.test(strUnix)) return new Error("Formato invalido");
			this.items.push([0, strUnix]);
		},
		init: function(seg) {
			var seg = seg || 1000;
			this.interval = setInterval("jsCron.check()", seg);
		}
};
jsCron.init();

Modo de uso

Al igual que de un crontab debemos especificar un listado de tareas a programar, para ello usaremos el método set() e introduciremos la sentencia en el formato explicado anteriormente.

// Función hola();
function hola() {
   alert("Hola");
}

// Tarea programada
jsCron.set("35 17 * * * hola()");

Descargar Fichero JS (jscron)

Actualización

Un comentario de Ajaxian, me ha dado una solución al usar un eval() para ejecutar el código. Así podemos usarlo de una forma más cómoda sin perder la legibilidad de la función.

// Tarea programada
jsCron.set("35 17 * * *", hola())
// de forma inline
jsCron.set("35 17 * * *", function() {
   alert("Hola");
});

Inspector es el Firebug de WebKit/Safari y hace ya tiempo que vamos viendo su evolución y la adquisición de nuevas mejoras que completaban esta herramienta del navegador. 

Alvaro Videla ha extendido las posibilidades añadiendole un juego que ha portado de uno hecho en ActionScript del concurso de 25lines.com. 

El resultado, poco útil, permite ver las posibilidades y la facilidad de extender esta herramienta para ofrecernos ayudas y mejoras propias con el fin de personalizar y facilitar nuestra tarea.

Via

Jesus Moreno me pasa esta imagen sacada de un artículo de Ajaxian que a su vez la sacaron de un artículo de Asa Dotzler en la que nos muestra la montaña rusa que forma esta gráfica del tanto por cierto de usuarios usando Internet Explorer 6 a lo largo de los últimos años.

Datos obtenidos de Market Share.

Debido a la aparición de PC’s más baratos, con Windows Vista e Internet Explorer 7 hacen que los anticuados navegadores empiecen a ir desapareciendo poco a poco. Algo más que lógico que los desarrolladores esperamos desde hace muuucho tiempo. ¿Tocará fondo en 2009?