Modos de compatibilidad con IE9

Con "Herramientas de Desarrollo" de IE9, podemos seleccionar el modo de compatibilidad deseado (IE7, IE8 Ó IE9) desde nuestro navegador IE9:
http://www.desarrolloweb.com/articulos/ie9-developer-tools.html

Si queremos determinar desde el código HTML qué navegardor es compatible con nuestra web: Definir la compatibilidad del documento con IE

- escribimos en HTML5: ‹ ! doctype html›

- p.e. compatible con IE9:
‹!-- Enable IE9 Standards mode --›
‹ meta http-equiv="X-UA-Compatible" content="IE=9" ›

- p.e. simular IE7:
‹!-- Mimic Internet Explorer 7 --›
‹meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" ›

Diseñar tu web para móviles, en busca de estandares

Iniciativas para desarrollar estándares en la Web movil

Recomendaciones y buenas prácticas en el diseño de página web para dispositivos móviles.

Algunos simples consejos de usabilidad a considerar pensando en que nuestra web puede verse también en dispositivos móviles:

- diseñar una versión más sencilla para dispositivos móviles,
- ofrecer la posibilidad al usuario de elegir si desea ver esta versión simplificada o la web para ordenadores,
- utilizar nombres cortos para la dirección de la web,
- optimizar el tamaño de las imágenes para reducir al máximo los tiempos de descarga y pensando en el posible coste económico por ancho de banda consumido. No todos los usuarios disponen de tarifa plana para acceder a internet con su smartphone.

Dispositivos para ver tu web - Media types y Media Queries

En CSS 2.1, podemos especificar hasta 10 tipos de dispositivos posibles:

- all ... apto para todos los dispositivos, es el valor por defecto
- aural / speech ... para sintetizadores de habla
- braille ... dispositivos que reciben feedback táctil en braille
- embossed ... para impresoras braille
- handheld ... para ordenadores de bolsillo (PDA, pantallas pequeñas, ...)
- print ... para material imprimible
- projection ... para presentaciones en proyector (por páginas, sólo visual, interactivo)
- screen ... para pantallas de ordenador en color
- tty ... para teletipos y terminales, no usar pixels como unidad,
- tv ... para televisores ( baja resolución, en color, movimiento limitado por la pantalla, sonido disponible)

En HTML4, se definen:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="estilo.css">

@media print { p { font-size: 14pt;}

@import url("otroestilo.css") screen;
(cuidado, los "media types" con @import son ignorados por IE5, IE6, IE7 e IE8)

En las recomendaciones para CSS3, se introduce el concepto Media Queries que amplía el control en el rendeado basado en algunas características más concretas de los dispositivos, por ejemplo el ancho de pantalla. La hoja de estilos CSS sólo será aplicable en el dispositivo especificado si la expresión es "verdadera".

<link rel="stylesheet" media="screen and (color)" href="example.css" />
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
<link rel="stylesheet" media="screen and (device-height: 600px)" />


@import url(example.css) screen and (color), projection and (color);

<?xml-stylesheet media="all and (min-color-index: 256)"
href="http://www.example.com/..." ?>


@media screen and (color), projection and (color) { ... }

@media all and (orientation: portrait) { ... }
@media (orientation: portrait) { ... }
@media (min-width: 100px) { ... }
@media handheld and (min-width: 20em),
screen and (min-width: 20em) { ... }

@media screen and (device-aspect-ratio: 16/9) { ... }
@media screen and (device-aspect-ratio: 32/18) { ... }

@media tv and (scan: progressive) { ... }
@media tv and (scan: interlace) { ... }

Solucionar los problemas de IE6 y otros trucos CSS

Resumen extraido de: Hacks en CSS que te evitarán dolores de cabeza en Internet Explorer

IEX (5,5.5,6 o 7):

Cualquier versión de Internet Explorer
CONDICION: lt IE X ---> Versiones inferiores a X
CONDICION: lte IE X ---> Versiones inferiores o iguales a X
CONDICION: IE X ---> Sólo para la version X
CONDICION: gte IE X ---> Versiones superiores o iguales a X
CONDICION: gt IE X ---> Versiones superiores a X

por ejemplo, el uso del guión bajo ó *:

body {
background: #FFFFFF /* Firefox y los demás */
*background: #000000 /* IE7 e inferiores */
_background: #CCCCCC; /* IE6 e inferiores */
}

* html p#hack { /* inferiores a IE7 */
width: 500px; IE >= 6
w\idth:400px; IE <6 } StarHtmlHack


*+html .foo{ /* Sólo IE7 */ }


... ojo a la hora de validar ....