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”
Existiendo los comentarios condicionales, ¿porque usar hacks para la versión que sea del IE?
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.
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”
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…
webón.anónimo
29 de Marzo de 2006 a las 1:01 am
Shiale! me siento bien pinche, no se de qeu hablan =(
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!
Geekipollas » Trucos en la sintaxis de CSS para IE7
29 de Marzo de 2006 a las 1:10 am
[…] 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. […]
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.
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.
Fantastico articulo, hacía tiempo que tenía pendiente hecharle un hojo al lio este de los hacks.
Saludos
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…
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.
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!
A mi también me la suda
Y por cierto ya les vale que el IE7 no hayan solucionado este fallo del IE6
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!
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
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: […]
O se diseña para todos los navegadores o para ninguno. Pero nunca para uno en paticular. Ese es mi modo.
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!
Y eso no es un hack, sino un selector por atributos, totalmente estándar y soportados por navegadores decentes.
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)
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.
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.
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);
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.
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…
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 […]
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;
}
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.
[…] 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… […]
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.!!!
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 !
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?

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