Reglas especiales para IE7

Ay los hacks en CSS. Siempre digo que no deben implementarse, pero a veces vienen tan bien que es imposible vivir sin ellos. Uno que es muy cómodo –y muy fácil de eliminar luego– es un underscore «_» seguido de un atributo para que, el bendito Internet Explorer lo interprete y el resto de los navegadores no pase nada. Un ejemplo claro y que pueden probar para solucionar algunos problemas es:

h2 {
margin: 0 0 10px 0;
_margin: 0 0 20px 0;
}

Esto simplemente hace que el elemento <h2> en Firefox, Opera y otros navegadores un margen inferior de 10px. En cambio, utilizando una hack con _ sobre la propiedad margin: hace que Internet Explorer pase por alto –por leyes de peso– el margin: 0 0 10px 0; por el valor 20px.

Bien, entendido esto os podéis ir haciendo una idea gigante de la cantidad de cosas que se pueden arreglar y dejar hasta el milímetro de perfectas entre navegadores que entienden estándares con Internet Explorer. Ahora, como dentro de unos cuántos meses, sino digo hasta finales del 2007 y, hasta el 2009 cuando muchos usuarios tengan Internet Explorer 7 instalado, tendremos que ir probando en la porquería de beta que tienen ahora. Para ello, no podemos usar más el hack del underscore sino utilizar otro, que además va igual de bien para el Internet Explorer 6:

h2 {
margin: 0 0 10px 0; /* funciona en todos */
*margin 0 0 55px 0; /* funciona tanto en IE6 como 7 */
_margin: 0 0 20px 0; /* funciona sólo en IE6 y no en IE7 */
}

Por adelantado les dejo claro que esto no valida con el herramienta de validación, pero me la trae floja de todas formas. Esto no afecta a la semántica de mis documentos sino a cómo se visualiza en un navegador.

34 Comentarios en “Reglas especiales para IE7”

Gravatar de ^_^

^_^
28 de Marzo de 2006 a las 11:12 pm    

Existiendo los comentarios condicionales, ¿porque usar hacks para la versión que sea del IE?

Gravatar de kapikua

kapikua
28 de Marzo de 2006 a las 11:44 pm    

Yo personalmente prefiero hacer hojas de estilos por separado. Llega un momento en el que tienes tantos hacks que al final no sabes para que es cada uno.

Gravatar de Eneko

Eneko
28 de Marzo de 2006 a las 11:52 pm    

Cojonudo. A ver si me pongo y echo un vistazo a mi css de Spaniards.es, el cual no se ve bien en IE7 (curiosamente funciona bien en IE6).

Gracias por las “ñapas” :)

Gravatar de Jorge

Jorge
29 de Marzo de 2006 a las 12:25 am    

Yo creo que no deberíamos dar publicidad a cómo salvarle el tipo a un producto beta. Quizá cuando lo saquen no sea necesario el hack y, por otro lado, encontrar un hack y hacerlo público es la excusa perfecta para que nunca solucionen sus problemas, por lo que automáticamente pasan a convertirse en nuestros problemas. Nos jugamos muchas horas de trabajo de los próximos años con esta versión de IE.
Eso sí, el mismo día que lo saquen os ruego a todos que conteis vuestros trucos.
¿Tanto les costará, con todo el camino que tienen recorrido, respetar los estándares? no lo entiendo, en fin, que Bill nos pille confesados…

Gravatar de webón.anónimo

webón.anónimo
29 de Marzo de 2006 a las 1:01 am    

Shiale! me siento bien pinche, no se de qeu hablan =(

Gravatar de Juan Francisco Giordana

Juan Francisco Giordana
29 de Marzo de 2006 a las 1:03 am    

Justo hoy me reía con este link: http://my.opera.com/dstorey/blog/show.dml/199138

Buenísimo lo de los comentarios condicionales!

[…] Leo en minid.net un artículo interesante que nos desvela los hacks con los que disponemos para determinar reglas que sólo puedan entender IE7, o bien IE6 e IE7 pero no los demás navegadores. […]

Gravatar de demimismo

demimismo
29 de Marzo de 2006 a las 1:43 am    

A mí me parecen mucho mejor los comentarios condicionales, pero experimentar con estas cosas siempre viene bien, y no siempre se puede tocar un html, así que a veces estos hacks se hacen imprescindibles.

Gravatar de kTzAR

kTzAR
29 de Marzo de 2006 a las 1:53 am    

Los hacks CSS ahorran mucho tiempo y aunque no sea lo ideal, funcionan. Muy interesante el apunte de que no afecta a la semántica del documento.

Gravatar de Moisès

Moisès
29 de Marzo de 2006 a las 3:06 am    

Fantastico articulo, hacía tiempo que tenía pendiente hecharle un hojo al lio este de los hacks.

Saludos

Gravatar de aarom

aarom
29 de Marzo de 2006 a las 9:52 am    

Muy bueno el artículo. A partir de ahora hay que tenerlo en cuenta y no seguir utilizando “_” o “-”.
Aunque por otro lado reconozco que desconocía la técnica de los estilos condicionales por comentarios. Y me parece buenísima…

Gravatar de mini-d

mini-d
29 de Marzo de 2006 a las 10:42 am    

Esto es, simplemente, una solución pasajera, para salir de apuros o mirar como se comporta IE ante determinadas acciones. Luego puedes limpiar la hoja de estilos y utilizar condicionales.

Gravatar de xema

xema
29 de Marzo de 2006 a las 11:34 am    

Me ha gustado mucho la reflexión final. Lo que nos importa realmente es una semantica y un codigo HTML perfectos, que valide o no la CSS, tambien me la suda! ;)

Gravatar de CytecK

CytecK
29 de Marzo de 2006 a las 1:58 pm    

A mi también me la suda ;-)

Y por cierto ya les vale que el IE7 no hayan solucionado este fallo del IE6

Gravatar de jorge

jorge
29 de Marzo de 2006 a las 4:16 pm    

hello!
yo uso un truco del almendruco para marginar a iExplorer que ademas valida, a ver que os parece

h2 {
margin: 0 0 20px 0;
}
body > h2 {
margin: 0 0 10px 0;
}

De esta forma iExplorer coje el primer valor y el segundo lo ignora porque no lo entiende y el resto de navegadores que si que entienden la segunda regla cojeran el segundo valor sobreescribiendo el primero.

Esta bien porque si un dia de estos iExplorer empezase a aplicar CSS como dios manda (2015 D.C.?) cojeria el segundo valor aplicando la segunda regla, el CSS seguiria validando y nos evitariamos el tener que volver a apaniar los * y _ raros.

un saludo!

Gravatar de frank

frank
29 de Marzo de 2006 a las 5:14 pm    

a mi me gusta el hack del class
.clase[class]
no lo lee msie

pero lo mejor es diseñar sin este tipo de hacks

Gravatar de tnarik

tnarik
29 de Marzo de 2006 a las 6:33 pm    

a eso se le llama atributos.

Gravatar de fsrLive » Haciendo trampas en CSS

fsrLive » Haciendo trampas en CSS
29 de Marzo de 2006 a las 11:00 pm    

[…] No conocía sin embargo la existencia de los llamados hacks, y es que según cómo escribamos algunos atributos, todos los navegadores menos el Explorer lo ignorarán. Como ejemplo el que vi en Minid.net: […]

Gravatar de jochex

jochex
30 de Marzo de 2006 a las 12:19 am    

O se diseña para todos los navegadores o para ninguno. Pero nunca para uno en paticular. Ese es mi modo.

Gravatar de code

code
30 de Marzo de 2006 a las 5:11 am    

Hasta ahora sólo usaba condicionales en el HTML:

  .class{
    margin: 0px;
  }

Ahora guardo en mi memoria el método de Almendruco, comentado por Jorge; seguramente me salvará en más de una oportunidad con el IE del orto, al igual que otros métodos o “hacks” aquí posteados. Mucho mejor que los consicionales, que ya no me gustaban mucho.
Gracias!

Gravatar de mini-d

mini-d
30 de Marzo de 2006 a las 10:05 am    

Y eso no es un hack, sino un selector por atributos, totalmente estándar y soportados por navegadores decentes.

Gravatar de albertofs

albertofs
30 de Marzo de 2006 a las 11:12 pm    

Muchas gracias! viene muy bien este hack, y aunque tiene razón quien dijo por ahí arriba que no deberíamos seguir salvandole el culo a IE, resulta q todavia lo usa mas del 80% de la peña e incluso hay quien cree que es el único navegador, así como aquella técnica (???) de ONO que no sabiá que clase de windows era linux ubuntu!!!!! (ver la historia real de Ono y las IP´s gordas en www.frikilinks.tk por ejemplo, es demasiado).

PO eso, esperemos q baje esa cifra de usuarios de iE, y mientras tanto a joderse y tenerlo en cuenta cm principal navegador de testeo (aunque no lo usemos para nuestras propias visitas)

Gravatar de Daniel

Daniel
31 de Marzo de 2006 a las 12:33 pm    

Yo creo que verdaderamente este tipo de hacks no ayuda demasiado,
por un lado siempre se pueden usar los comentarios condicionales como
ya se ha comentado anteriormente y además personalmente, creo que se
debería diseñar para un navegador sin nombre. Verdaderamente, si IE
muestra cosas como quiere, pues que siga haciéndolo. Es una política
de empresa.

Gravatar de Jurgen

Jurgen
31 de Marzo de 2006 a las 3:55 pm    

La reflexión final es buena, pero precisamente los hacks son necesarios por culpa de reflexiones como esa. Estoy de acuerdo en que no deberíamos diseñar para un navegador, pero sí para un standard, y si no se ve bien en un navegador debería ser la compañía correspondiente la que se curre la compatibilidad de su producto. De esta forma ellos hacen lo que les da la gana y nosotros gastamos tiempo y dinero en tratar de conservar la integridad de nuestro diseño. Si hay un standard el trabajo debería validarse contra él y si un navegador no interpreta bien el código standard debería ser problema del programador del navegador y no del diseñador de la página.

Gravatar de kapikua

kapikua
1 de Abril de 2006 a las 10:39 am    

Por si le pudiera interesar a alguien pego el script en javascript que uso.

function whichBrs() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf(”opera”) != -1) return ‘opera.css’;
if (agt.indexOf(”staroffice”) != -1) return ’soffice.css’;
if (agt.indexOf(”beonex”) != -1) return ‘beonex.css’;
if (agt.indexOf(”chimera”) != -1) return ‘chimera.css’;
if (agt.indexOf(”netpositive”) != -1) return ‘netpositive.css’;
if (agt.indexOf(”phoenix”) != -1) return ‘phoenix.css’;
if (agt.indexOf(”firefox”) != -1) return ‘firefox.css’;
if (agt.indexOf(”safari”) != -1) return ’safari.css’;
if (agt.indexOf(”skipstone”) != -1) return ’skipstone.css’;
if (agt.indexOf(”msie”) != -1) return ‘iexplorer.css’;
if (agt.indexOf(”netscape”) != -1) return ‘netscape.css’;
if (agt.indexOf(”mozilla/5.0″) != -1) return ‘mozilla.css’;
if (agt.indexOf(’\/’) != -1) {
if (agt.substr(0,agt.indexOf(’\/’)) != ‘mozilla.css’) {
return navigator.userAgent.substr(0,agt.indexOf(’\/’));}
else return ‘netscape.css’;} else if (agt.indexOf(’ ‘) != -1)
return navigator.userAgent.substr(0,agt.indexOf(’ ‘));
else return navigator.userAgent;
}

    var browserName = whichBrs();

    document.write("La hora de estilos que hay que cargar es: " + browserName);
Gravatar de code

code
1 de Abril de 2006 a las 6:45 pm    

Estoy totalmente de acuerdo con Jurgen: desarrollar según el standard, tanto nosotros los web developers como los desarrolladores de web browsers.

Lástima que en Microsoft se caguen en los estándares, de modo que nos vemos obligados a invertir tiempo en hacer que algo que ya funciona bien según el standard, que lo vemos bien en Firefox y otros buenos browsers, luego funcione bien en IE. Y esto se debe, como ya sabemos, a que la mayoría de los usuarios usan IE.

Daniel dice:
“si IE muestra cosas como quiere, pues que siga haciéndolo”.

Si eso implica no “tweakear” nuestro trabajo para que funcione en IE, entonces no veo como implementar como política de empresa decirle a nuestros clientes:
“Mire, nuestro trabajo está bien hecho, pero ud. no lo ve correctamente en Internet Explorer porque ese programa no se ajusta al standard. Debería reclamar ante Microsoft.”

Eso no es una solución para el cliente, a quien le chupa un huevo dónde nace el problema. El cliente simplemente quiere ver las cosas bien y que todos los visitantes de su sitio lo vean sin problemas, sobre todo la mayoría, que suele utilizar IE.

Una empresa que implemente tal política no tendría muchos clientes me parece.

Gravatar de Radioukacz

Radioukacz
4 de Abril de 2006 a las 12:30 pm    

Esto no tiene nada q ver con el tema, pero me ha hecho gracia y me gustaria saber si alguien lo va a hacer: http://www.dustindiaz.com/naked-day/
La cosa es que el el señor Dustin ha decidido que el 5 de abril sea el Dia Desnudo Anual de CSS. La idea es publicar nuestras paginas sin ninguna hoja de estilo CSS asociada. “Para promover los estandares web y las paginas semanticas”. Pues eso. Anda que algunas paginas sin css van a tener una pinta…

Gravatar de Gancé » Blog Archive » Hacks en CSS

Gancé » Blog Archive » Hacks en CSS
8 de Abril de 2006 a las 12:01 pm    

[…] Hoy estaba tocando el CSS de un sitio y  claro, siempre tiene que haber algún error en alguno de los 3 navegadores en los cuales testeo (Primero IE, Segundo FF, y tercero Opera). La cosa es que por mas que los CSS validen y todo lo demás, muchas veces tengo corridos algunos píxeles alguna que otra cosa en FF, y eso me molesta de sobre manera. Nunca me puse a ver que eran los hacks en CSS. Los hacks, para quienes no saben igual que yo, son pequeñas instrucciones para que determinado navegador interprete ese código y no otro. Como no todos los navegadores interpretan de la misma manera el código, inevitablemente hay que buscarle una vuelta. En Diseñorama, encontré muy fácilmente explicado, lo que son los hacks en CSS. Parece muy simple y lo es, pero para corregir cada errorcito, hay que (básicamente) diseñar como para dos sitios diferentes. Y eso es terriblemente aburrido y desquiciante. Igual, el post no es para lamentar si no para tratar de solucionar. Aquí les dejo algunos links con respecto a Hacks en CSS- Diseñorama Mini-d My.Opera […]

Gravatar de David

David
10 de Abril de 2006 a las 9:33 am    

Y los !important ?
Valida y prevalece
h2 {
margin: 0 0 10px 0;
margin-bottom: 20px!important;
}

Gravatar de mini-d

mini-d
10 de Abril de 2006 a las 10:22 am    

David, ese caso es otro. La regla important la entienden todos los navegadores. Siendo así, margin-bottom: 20px !important; para mozilla, ie6, ie7, opera, etc. Por regla de peso, la primera cae en favor de la segunda.

Gravatar de CG.70

CG.70
17 de Abril de 2006 a las 6:39 pm    

[…] PD: Hoy me ha dado por postear (a ver si mantengo el ritmo), y ayer noche retoqué un poco las CSS, a ver si entre hoy y mañana lo remato y aplico los hacks para IE de los que hablaba Mini-d, para paliar los problemas de lectura de código, así quedaría fino del todo. Solo faltaría arreglar el CMS o migrarlo todo, pero me da un miedo de la ostia como que repetido algunas veces por aqui. Lo más seguro es que empiece de cero, manteniendo este blog online solamente para consulta de archivos. Es una solución un tanto pachanguera, pero es lo que hay… […]

Gravatar de Miguel Inostroza

Miguel Inostroza
17 de Mayo de 2006 a las 2:14 am    

Hola e intentado de todo pero la columna derecha de mi blog , q vendria siendo el side-wrapper (creo)en iexplorer se ve abajo, pero bien abajo, ¿como diantres puedo solucionar esto?, yo soy de Chile y aca Firefox lo utiliza muy poca gente, la mayoria ocupa el maldito iexplorer, lo cual me perjudica para q se vea bien mi blog.

Espero ayuda urgente de ante mano muchisismas gracias.!!!

Gravatar de David

David
22 de Junio de 2006 a las 10:07 am    

Hola, me ha servido mucho leer este artículo. Las últimas semanas he estado diseñando un website y provado “sólo” con el Firefox. Ayer, por error abrí la web en IExplorer. Menuda sorpresa desagradable donde las haya … es que no se ve nada de nada, ni tamaños, ni márgenes, ni posicionamiento, ni nada de nada … Despues de leer todos los post veo que hay un par de soluciones y tendré que mirar cual me lleva menos tiempo para arreglar esto. Es como empezar de zero otra vez y todo gracias a IE. Lo malo, es que por desgracia, los usuarios de IE son aún mayoría y por mucho que ponga el banner del FF en la web, me veo obligado a doblar la faena y perder el tiempo cuadrándolo todo. Gracias de nuevo por el post !

Gravatar de thalia fung

thalia fung
21 de Agosto de 2006 a las 6:28 pm    

las css en IE son paradógicas, uno deos fenómenso más curiosos es que desaparecen los textos, no se cómo ni por qué? alguien sabe a que se debe esto y cómo solucionarlo?

Más entradas en Minid.net