Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • CSS hacks para Internet Explorer

CSS hacks para Internet Explorer

21 Dec 2010 por Santi

Comentarios: 9

IE CSS hacks

Nos últimos anos os fabricantes de navegadores web concienciáronse por fin da importancia de que os seus produtos se adhiran ós estándares HTML e CSS para un correcto visionado das páxinas web. Pero por desgracia iso non foi sempre así, e durante anos os maquetadores tiveron que pelexarse con navegadores que posuían motores de renderizado incompatibles e repletos de erros. Para iso, desenvolvéronse diversas técnicas, coñecidas como trucos ou hacks de CSS, que permiten explotar as formas peculiares nas que distintos navegadores interpretan o código CSS e conseguir contrarrestar os erros de *renderizado propios de cada navegador.

Existen moitos e variados hacks para as distintas versións de Internet Explorer (e outros navegadores), pero debido á esmagadora difusión destes produtos (e á esmagadora difusión de bugs no tratamento do estándar CSS nestes, todo hai que dicilo) centrarémonos só nas que nos serán útiles para as versións 6 e 7 de Internet Explorer e só aquelas que usen código CSS válido.

Asterisco HTML (Star HTML)

O elemento html é o elemento raíz no estándar dos documentos HTML, pero o Internet Explorer versións 4 a 6 aceptan a definición dun elemento pai a html, mentres que o resto de navegadores que se adhiren ó estándar ignoran a definición como incorrecta. Desta forma podemos usar este hack da seguinte forma, sabendo que todos os navegadores asignarán ó elemento p.texto un tamaño de texto de 15px, mentres que Internet Explorer 4-6 adxudicaralle un tamaño de 20px:

p.texto {font-size: 15px;}
* html p.texto {font-size: 20px;}

Asterisco máis (Star plus)

O comportamento anterior foi corrixido na versión 7 de Internet Explorer, pero esta á súa vez introduciu outro erro co selector +, de forma que para Internet Explorer 7 podemos usar:

p.texto {font-size: 15px;}
*+html p.texto {font-size: 20px;}

Atención: este hack funciona en IE7 en "standards mode", non cando está en "quirks mode". Da mesma forma é soportado por IE8 en "compatibility view" (IE7 "standards mode"), pero non en IE8 "standards mode".

Selector fillo

Internet Explorer 6 e anteriores non interpretan o selector fillo (>), polo que ignoran calquera regra que o conteña. Desta forma, poderiamos reescribir o noso exemplo anterior usando este hack:

p.text {font-size: 20px;}
html > body p.text {font-size: 15px;}

Aínda que Internet Explorer 7 engadiu soporte para o selector fillo, descubriuse un erro que permite usar unha pequena variación do mesmo hack. Se inserimos un comentario baleiro inmediatamente despois do selector fillo, IE7 ignorará por completo a regra, comportándose da mesma forma que IE6:

p.text {font-size: 20px;}
html >/**/ body p.text {font-size: 15px;}

Etiqueta !important

Internet Explorer 6 e anteriores ignoran por completo as declaracións ca etiqueta !important, sempre que exista outra declaración do mesmo elemento dentro do mesmo bloque de código (sen a etiqueta !important). Desta forma no seguinte exemplo, todos os navegadores que cumpran o estándar usarán a definición !important, mentres que IE6 ignoraraa e usará a segunda:

p.text {
	font-size: 15px !important;
	font-size: 20px;
}

Comentarios condicionais

Esta é unha funcionalidade implementada só no navegador Internet Explorer (versións 4 - 8) e que nos permite mostrar ou ocultar código segundo nos conveña. O resto de navegadores interpretaranos como comentarios normais e ignorarán por completo o seu contido. Vexamos un exemplo:

<!--[if IE]>
    <p>Esta liña só é visibile en IE</p>
<![endif]-->

Desta forma, a liña contida dentro dos comentarios (<p>...</p>) sería só visible en Internet Explorer. Estes comentarios poden ser amplamente configurados, por exemplo para aparecer só en versións específicas de Internet Explorer:

<!--[if lte IE 6]>
    <p>Esta liña só é visible en versións de IE 6 ou anteriores</p>
<![endif]-->

Un uso típico dos comentarios condicionais é para cargar páxinas de estilos específicas con retoques para corrixir os erros de Internet Explorer 6 y 7:


<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="css/styles_ie6.css" media="all" />
<![endif]-->
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="css/styles_ie7.css" media="all" />
<![endif]-->

Desta forma, a nosa páxina web ten os estilos definidos no ficheiro "css/styles.css". Aqueles retoques necesarios para a súa correcta visualización en Internet Explorer 6 atoparíanse no ficheiro "css/styles_ie6.css" (gracias ós comentarios condicionais, esa páxina de estilos só é cargada por IE versión 6 ou anteriores). Da mesma forma, a páxina de estilos con retoques para Internet Explorer 7 atópase en "css/styles_ie7.css".

Finalmente, comentar que tanto o W3C como Microsoft recomendan o uso de comentarios condicionais sobre hacks.

Máis información: Comentarios condicionais.

Comentarios

9 comentarios. Comentar.

1. arkonqn o 08 Xul 2011 ás 17:59:56

Consulta amigo, por ejemplo para hacer algo asi:

osea, q lo muestre en otros exploradores y no en ie? pq tengo un codigo que no funciona en internet explorer y para no tener problemas directamente que no se vea en ie y punto, como puedo hacer para eso?

2. Luis o 08 Xul 2011 ás 18:52:03

Hola arkonqn.

Es una buena pregunta. El código sería el siguiente:

- Para que se vea en IE:

<!--[if IE]> IE <![endif]-->

- Para que no se vea en IE:

<!--[if !IE]>--> RESTO <!--<![endif]-->

3. Sandra - Diseño Web o 13 Mar 2012 ás 23:39:03

Mucho mejor utilizar stylesheets separadas para IE que no los hacks, pues estos últimos dan problemas de validación, a parte de dificultar el crear un código CSS limpio.

Sandra

Blogger en CreativaSfera - Diseño Web

4. Sandra - Diseño Web o 13 Mar 2012 ás 23:41:12

Se me olvidaba comentar que soy de la opinión que es mejor no dar soporte a IE6, por ser un navegador prehistórico y completamente desfasado..

Sandra

5. Luis o 14 Mar 2012 ás 10:04:03

Hola Sandra, gracias por participar en nuestro blog.

Sobre tu primer comentario, si lees el artículo, verás que mostramos sólo hacks que usen código CSS válido (lo comentamos en el propio artículo), así que no dan problemas de validación. De todas formas, en la última sección del artículo verás que se recomienda el uso de comentarios condicionales para usar páginas de estilos separadas.

Sobre tu segundo comentario, decir que si fuese por mi no dariamos soporte para ese navegador (de hecho ya no lo damos de forma gratuita). Pero algunos clientes (sobre todo en la administración pública) aún siguen usando ese navegador y no tienen permisos, conocimientos o simplemente ganas de actualizarse y cuando les vas a enseñar la web, ellos sólo entienden que se ve mal, lo que les cuentas de su navegador no les importa lo más mínimo.

Un saludo.

6. cami o 20 Xuñ 2013 ás 23:40:11

esto esta bien implementado ?

<li style="width:100%; *width:650px;">

7. Luis o 23 Set 2013 ás 11:22:32

Hola cami.

Perdona por no contestarte antes. De todas formas dejo la respuesta por si puede ser de utilidad a otras personas.

El hack al que haces referencia, a pesar de que no es uno de los que tratamos aquí, es válido para Internet Explorer 7 y anteriores.

Un saludo.

8. astiya81 o 19 Xuñ 2014 ás 05:17:58

estoy haciendo una web, y se ve perfecto en todos los navegadores, pero en internet explorer todo el texto de el contenido de la pagina se esta alineando hacia la derecha, cuando deberia estar hacia la izquierda, hay una solucion para esto? gracias.

9. Anónimo o 29 Xuñ 2016 ás 14:01:42

muchas gracias con estos apuntes se puede empezar a trabajar,

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?