Los hacks en las páginas web
Escrito por J.F. el Miércoles, 10 de Octubre del 2007 a las 16:06
Vamos a abordar éste importante tema a la hora de planificar un sitio web. Como seguro habrás podido oir y comprobar, no todos los navegadores interpretan de la misma manera el código, sobre todo Internet Explorer. Por ello y principalmente enfocado a las diferentes versiones de explorer, muchos hacks están elaborados para corregir esa discrepancia de criterios entre navegadores. Hay diferentes tipos de hacks, algunos de ellos al usarlos provocan que directamente nuestro código CSS no valide, mientras que hay otros más correctos y acertados que si que validan. Vamos a ver diferentes tipos de hacks para diferentes tipos de exploradores(los recomendables y válidos):
Distinguir entre Internet Explorer y el resto de navegadores:
Como ya hemos comentado, Internet Explorer es el navegador que más problemas da a la hora de interpretar el código, sobre todo dando medidad en anchura y altura, ya que lo que parece estar ajustado en Internet Explorer en oros navegadores se ve descolocado en otros navegadores. Para crear un estilo para explorer, y otro para el resto de navegadores, simplemente declararemos en nuestra hoja de estilos el css de la forma normal, por ejemplo una capa, e inmediatamente después declararemos de una forma especial como se verá esa capa en todos los navegadores que no sean explorer. Aquí va un ejemplo:
-
#head{
-
width:100px;
-
height:400px;
-
border: 2px solid #000
-
}
-
html>body #head{
-
width:700px;
-
height:400px;
-
border: 2px solid #EEE
-
}
El primer estilo será el que interprete explorer, y el segundo que comienza con html>body será intepretado por el resto de navegadores. Así tendremos creadas la misma clase tanto para explorer como para el resto de los navegadores, y podremos definir las características correctas para que todo quede correctamente dependiendo del navegador.
Aquí tienes un listado de selectores para incluir código CSS que solo será interpretado por determinados navegadores:
IE 6 y anteriores
* html {}
IE 7 y anteriores
*:first-child+html {} * html {}
Solor IE 7
*:first-child+html {}
IE 7 y navegadores modernos
html>body {}
Navegadores modernos (IE 7 no)
html>/**/body {}
Ultimas versiones de Opera 9 y anteriores
html:first-child {}
Hay muchos hacks más, pero no son recomendables ya que no validan, aunque en ocasiones se debe echar mano de ellos. Por si te interesa puedes consultar una tabla con todos los hacks que existen y comprobar si validan o no según el W3C.
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Deja un comentario
