Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

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;
    }
}

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.