Saltar la navegación

Trucos / hacks

No olvidemos que...

Los hacks son la última solución.

Dicho esto, recordemos algunos y conozcamos otros nuevos.

Detectar el navegador y utilizar "la cascada"

Empecemos por un truco:

  • Hemos visto que podemos añadir tantas clases como necesitemos a la etiqueta body.
  • Gracias a esto, podemos controlar la apariencia de todos los elementos de una determinada página sin necesidad de incluir estilos en su cabecera o en línea en los propios elementos de la página.
  • De igual forma que identificamos la página, podríamos añadir una clase al body que identificase el navegador. Así podríamos solucionar posibles problemas.

Se puede hacer de muchas formas. Un ejemplo: Detectar el navegador con PHP.

Comentarios condicionales para IE

Ya hemos mencionado estos comentarios con anterioridad. Un ejemplo:

<!--[if IE 6]>
Instrucciones específicas para IE.
<![endif]-->

Encontraréis más información en: Conditional comments.

Selectores específicos

  • IE 6 e inferior: * html {}
  • IE 7 e inferior: *:first-child+html {} * html {}
  • IE 7 y superior y navegadores modernos: html>body {}

Como veréis, algunos responden únicamente al nivel de cumplimiento de estándares por parte de los navegadores. Encontraréis más ejemplos en CSS hacks: Easy selectors.

La regla !important e IE

Ya comentamos este truco con anterioridad. Nos permite, por ejemplo, conseguir un efecto similar a min-height en IE6 (este navegador no soporta esta propiedad):

height:auto !important;
height:200px;
min-height:200px;

CSS y HTML 5

Recordad lo que ya comentamos en la primera parte del curso:

Para poder controlar los nuevos elementos HTML5 en versiones anteriores a la 9 de Internet Explorer, podemos usar este SCRIPT (no es el único, pero sí el más extendido):

Página web del Script de Remy Sharp para habilitar HTML5

Tenéis que descargar el SCRIPT e insertar el siguiente código dentro de la etiqueta head de vuestro documento:

<!--[if lt IE 9]>
    <script src="ruta_hasta_el_archivo/html5.js"></script>
<![endif]-->

Además, algunos navegadores antiguos no mostrarán los nuevos elementos HTML5 como bloques, por no tener el modo HTML5 activado por defecto. Podemos resolverlo fácilmente añadiendo las siguientes definiciones a nuestros CSS:

header, nav, article, footer { 
    display: block;
}

A partir de ese momento podremos trabajar con HTML5 sin problemas.