CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari…
Todos sabemos lo divertido y emocionante que es hacer la compatibilidad crossbrowser de nuestras páginas web.
Por suerte para nosotros, existen un gran número de hacks CSS que podemos utilizar en cada una de las versiones de cada navegador para ayudarnos a poder mostrar por igual los contenidos de una web en todos los navegadores.
Partiré de este estilo:
.selector {
color: #CCCCCC;
}
Empezaré por Internet Explorer, dado que es para el que usualmente se necesitan más hacks:
Internet Explorer 6
.selector {
_color: #CCCCCC;
}
Recordad que IE6 no interpreta la propiedad (o palabra clave..) de CSS “!important” por lo que podéis jugar con ello (aunque no es lo más recomendable):
Internet Explorer 6 (!important)
.selector {
color: #CCCCCC !important;
color: #000000; /* Éste estilo sólo se aplicará a Internet Explorer 6 */
}
Internet Explorer 7 y anteriores:
.selector {
*color: #CCCCCC;
}
Internet Explorer 8
Este es un poco putilla, ya que el mismo hack de IE8 a veces lo interpreta IE7… así que, si nos interesa, primero habrá que poner algo que interprete únicamente IE7 y después hay que poner el hack de IE8:
/* Interpretado únicamente por IE7 (actúa como un !important) */
*:first-child+html .selector {
color: #CCCCCC;
}
.selector {
color /*\**/: #CCCCCC\9 /* Sin punto y coma!! */
}
Todas las versiones de Internet Explorer
.selector {
color: #CCCCCC\9 /* Sin punto y coma!! */
}
Internet Explorer 7 y demás navegadores modernos (incluido IE8)
html>body .selector {
color: #CCCCCC;
}
Todos los navegadores modernos (incluido IE8)
html>/**/body .selector {
color: #CCCCCC;
}
Opera 9.27 y anteriores
html:first-child .selector {
color: #CCCCCC;
}
Safari
html[xmlns*=""] body:last-child .selector {
color: #CCCCCC;
}
Safari 3+, Opera 9+, Firefox 3.5+ y Chrome 1+
body:nth-of-type(1) .selector {
color: #CCCCCC;
}
/* Otra opción... */
body:first-of-type .selector {
color: #CCCCCC;
}
/* Y otra más... */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
color: #CCCCCC;
}
}
Safari 3+ y Chrome 1+
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
color: #CCCCCC;
}
}
/* Otra opción... */
body:nth-of-type(1) .selector{
color: #CCCCCC;
}
Todas las versiones de Firefox
@-moz-document url-prefix() {
.selector {
color: #CCCCCC;
}
}
Cualquier Gecko (incluido Firefox)
*>.selector {
color: #CCCCCC;
}
Firefox 1.5+
.selector, x:-moz-any-link, x:only-child {
color: #CCCCCC;
}
Firefox 2 y versiones anteriores
body:empty .selector {
color: #CCCCCC;
}
/* Otra opción... */
html>/**/body .selector, x:-moz-any-link {
color: #CCCCCC;
}
Firefox 3 (y quizás más nuevos)
html>/**/body .selector, x:-moz-any-link, x:default {
color: #CCCCCC;
}
No he probado todos ellos así que si veis alguno que no funciona, por favor, hacédmelo saber para que pueda buscar alguna alternativa (o eliminarlo…).
Además os invito a que añadáis cualquier hack de CSS que no haya puesto comentando esta entrada 
Páginas de referencia:
Entrades relacionades:
Hola.
Primero de todo: !important no es un hack, es una palabra clave en una regla normal CSS. Es decir, es CSS estándar y no provoca errores en un navegador que soporte CSS, que es precisamente lo que hacen los hacks, de ahí el no recomendar su uso.
Otra cosa es que algún navegador no soporte ciertas reglas CSS, …pero eso no es un hack. No es una discusión semántica si no de concepto y de conocimiento de CSS.
Segundo: ¿Hacks?, aplicar hacks, salvo casos excepcionales, simplemente significa desconocer la especificación CSS y el comportamiento de los navegadores. En prácticamente todos los casos no es necesario un hack, sobra con cosas como aplicar herencias o especifidad dependiendo del navegador o del resultado deseado; …y si lo necesitas es que tu CSS tiene errores o algo anda mal, en cualquier caso no está bien diseñado.
Todo esto asumiendo siempre que es prácticamente imposible que un diseño se vea igual en todos los navegadores… por muchos hacks que se usen eso no va a pasar. Así que lo correcto y lo lógico es asumir pequeñas diferencias en el diseño, por el contrario, no es lógico aplicar un hack para una pequeña diferencia que nunca vas a poder homogeneizar al 100%.
Un saludo.
Tienes toda la razón con lo de important.. metí la pata diciendo que era un hack y ya lo he corregido.
En cuanto a todo lo demás… dices que aplicar hacks significa desconocer las especificaciones CSS y el comportamiento de éste en los navegadores… no te quito razón. Pero sabes tan bien como yo que hay navegadores que tienen bugs y que no hay más manera que añadir arreglos CSS para solucionarlo. Para ello, la mejor opción, sin lugar a dudas, es crear CSS con los cambios para cada navegador.
Pero si únicamente necesitaras arreglar un único detalle (o dos) de tu web, ¿seguro que crearías un CSS alternativo? ¿o utilizarías un hack?
Yo no soy nada partidario de utilizar hacks y, como tú (y al igual que en mi trabajo) opino que si algo te está fallando, es porque no sabes hacerlo. Pero esto no quita que de vez en cuando utilice alguno sea por lo que sea.
Por eso puse todos juntos, para tener rápido acceso a todos ellos sin tener que andar buscando por internet.
Si no andabas buscando hacks, no sé cómo has acabado aquí. Da la sensación que busques en google “CSS Hacks” para burchar las páginas donde los comenten (de ser así ya podías haber comentado en las páginas de referencia ;p).
Saludos.
bueno antes que nada, aclarar a k en la comunidad de CSS se refiere a hack a cualquier combinacion de instrucciones que permiten modificar un comportamiento por defecto extraño en el navegador.
Por esa razon, los llamados “conditional comments” (<!–[if IE]>….) se dicen que son un hack, ya que permiten modificar el comportamiento estandard del navegador (en este caso IE) mediante una instrucciones especiales.
A partir de aquí, el caso que comenta boletarire de !important, si que se considera un hack. Pues el comportamiento de FF i IE en el caso de !important sobre el mismo selector es distinto y se puede utilizar para modificar solamente el comportamiento de un atributo en particular. En ese caso, el color, que no es un buen ejemplo, pero si lo seria un margin, un width….
En cuanto a lo Segundo…. precisamente, el conocer el distinto comportamiento de los navegadores y el no cumplimiento de las especificaciones de CSS es el origen de estos hacks, para solucionar estas malas interpretaciones de los distintos navegadores.
Asi que ya sabeis, utilizar hacks, es necesario, y es nuestro pan de cada dia. Si alguien consigue hacer flotar dos div’s dentro de otro, y k el contenedor tenga su tamaño sin utilizar el hack de overflow:hidden, o el hack de clearfix (div con clear:both), que venga aki y me lo explique.
dewwwwww
P.D.: y si buscabas por hacks para Counter Strike Source: http://www.google.es/search?rlz=1C1GGLS_caES341ES341&sourceid=chrome&ie=UTF-8&q=counter+strike+source+hacks
@Heavy: Vamos a ver… aplicar un clear:both o un !important no es un hack como ya ha comentado Març.
Y no son hacks porque son CSS estándar, es decir y lo explico de nuevo, no provocas un fallo en la interpretación de la hoja de estilos del navegador.
Cuando añades expresiones no estándares en el CSS, estás provocando un fallo que te da el comportamiento que deseas de ese nevagador: ESO es un hack; …luego pues vale, por llamar a las cosas se les puede llamar como se les quiera llamar, si algunos llaman hack a !important o a clear:both… que son reglas estándares, pues allá ellos.
Otro apunte, lo que comento de los hacks no lo digo yo ni me las doy de nada, simplemente lo aprendí de gente como Zeldman, Moll o Budd… obviamente, una vez estudias y entiendes la especificación está más claro que el agua.
Repito, el comportamiento erróneo de IE sobre !important no es un hack: NO se lo provocas tú mediante una hoja de estilos INCORRECTA.
Y muy en referencia a !important… no necesitas ni ese -según lo ves tú, heavy- ni otros hacks; si se conoce la especificación se debe saber que con un estilo estudiado de antemano, una hoja bien estructurada: sobra con aplicar bien la herencia y la especificidad.
Lo que ocurre es que es mucho más complicado y tedioso aplicar especificidad y lo fácil -y por otro lado poco profesional- es aplicar hacks e !important por todas partes.
Así luego suele sale lo que sale
Con todo esto no digo que no haya que usarlos nunca o que a veces, muy en contadas ocasiones, sean útiles. Solo digo que es el recurso fácil y que en la mayoría de ocasiones se usa por desconocimiento de CSS.
Ej: No sé porqué me falla esto -> Busco en Google, encuentro un hack y lo aplico -> Hala, listo.
En lugar de averiguar porqué falla y luego ver si tiene solución de forma estándar… que en muchos casos sorprende ver que sí la tenía y lo fácil que era.
PD: Març… no recuerdo como acabé aquí, mi comentario solo pretende aclarar cuestiones que creo son incorrectas y pueden confundir a alguien. Creo que de ser una crítica, lo era constructiva, y si no las admites lo aceptaré sin problema. Es tu blog y publicas lo que quieres como es lógico.
Me considero algo talibán con los estándares, eso sí que aseguro que es cierto… pero como decía minid, creo que en este mundillo se necesita mucha más profesionalidad, como en cualquier otro trabajo de hecho.
* No pretendo gritar con el uso de mayúsculas, solo es para dar énfasis a lo importante, que podría haber usado strong claro ^^!
No me llamo març, sinó boleteaire (març es “marzo” en catalán) y si en algún momento di a entender que no acepto críticas, lo lamento; como todos sabemos de los errores se aprende y si hay alguien ahí para corregirme dichos errores, pues mejor, que así aprendemos más rápidamente.
Salud