Ultima revisión 10/12/2012

CSS Hacks para Chrome, Firefox, Opera, Safari, e Internet Explorer

Todos los que estamos en el maravilloso mundo de la maquetación conocemos lo tedioso que se hace, a veces, realizar el famoso efecto de que las páginas web se vean exáctamente iguales en todos los navegadores.

Los Hacks, aunque a veces más que ayudar nos ofusquen, juegan un papel importante en la compatibilidad Cross Browser. Un CSS Hack es una especificación para conseguir que un navegador se comporte de manera distinta a los demás. Hay muchos Hacks, a cada cual más difícil de pronunciar y memorizar pero, gracias a este artículo, los podremos consultar siempre que queramos.

Si consultáis la documentación proporcionada por Google que comentabamos en el capítulo anterior, se dan varias recomendaciones que se pueden establecer con la configuración del .htaccess de forma rápida y sencilla. En este artículo sólo tocaremos las más utilizadas o populares y que deberían ser suficientes para ver una mejoria notable tanto en la velocidad de carga como en el posicionamiento SEO.

Firefox

@-moz-document url-prefix() {
    .selector {
        background-color: #283a64;
    }
}

Chrome

Este sólo funciona para Chrome y se controla con -bracket-:hack(; y );. Todo lo que haya entre estas "claves" se aplicará sólo a Chrome

.prueba{
    color:#283a64;
    -bracket-:hack(;
        margin:10px;
    );
}

Opera

En Opera exite una pseudo-clase prefijada llamada :-o-prefocus que se añadió en Opera 9.5 y que permite aplicar estilos a partir de esta versión en adelante. Dado que x es un elemento que no existe, no lo estamos usando realmente aquí. El truco reside en que otros navegadores no entienden este selector y por consiguiente pasan por alto la regla general.

x:-o-prefocus, .prueba {
    display: none;
}

Safari

Este es el Hack es para aplicar estilos únicamente en Safari.

html>body*.prueba {
    background-color: #283a64;
}

Si queremos que se ignore en Safari unos estilos lo que debemos hacer es poner el símbolo # (almohadilla) detrás del ;. Con esto conseguiremos que todo lo que esté entre las llaves del selector se ignore.

Todos los Internet Explorer

.prueba {
^padding: 4px;
}

Internet Explorer 6

* html .prueba{
    height: 300px;
}

Internet Explorer 7

*+html .prueba{
    height: 300px;
}

Internet Explorer 8

.prueba{
    height: 300px\0/;
}

Internet Explorer 9

:root .prueba {
    padding-top: 10px;
}

Ahora os dejo alguna "mezclas" interesantes que alguna vez se tendrán que usar.

Internet Explorer 6 y 7 para pantalla o impresión

/* estilo general */
body{
    background: pink;
}
/* estilo para IE 6 y 7 en todos los media */
@media all\9 {
    .prueba {
        background: red;
    }
    .prueba2 {
        color: yellow;
    }
}
/* Estilos para imprimir en IE 6 y 7 */
@media print\9 {
    body {
        color: blue;
    }
    h1{
        color: red;
    }
}

Internet Explorer 7 y 8

.prueba{
    height: 300px\9;
}

Internet Explorer 8 y 9

.prueba{
    height: 300px \0/IE8+9;
}

Internet Explorer 8, 9 y 10

@media screen\0 {
    body {
        background: orange;
    }
}