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.