Imprimir con css

Si alguna vez habéis realizado diseño multibrowser os habréis llevado muchos dolores de cabeza. Si encima os piden que se debe de ver correctamente al imprimir.. el resultado puede ser un caos.

Si habéis realizado el diseño con
css os habréis dado cuenta de que las características background-color y background-image no se imprimimen salvo que el usuario desee hacerlo y lo haya marcado de esa forma en sus preferencias. Por defecto no se imprimen.

Pero podéis definir una hoja de estilos con lo que intentar amañar un poco el resultado.

Dando el valor adecuado a la característica display:

Display:none; no mostraría el div o elemento al cual se refiere

Display:list-item; Válido para elementos de lista que por alguna razón no los hayas definido como tales.

En la definición de la hoja de estilos, dentro del código html debereís utilizar algo así:

<- LINK rel="stylesheet" type="text/css"
media="print" href="estilos-impresion.css">


<- LINK rel="stylesheet" type="text/css"
media="screen" href="estilos.css">


Si queréis que se imprima en una sóla hoja de tamaño A4, tendréis que poner algo similar a esto:

@media print and (width: 21cm) and (height: 29.7cm) {
@page {
margin: 2.5cm;
}
}

Pero ojito, el contenido debe estar entre esas medidas sino saldrá cortado.

Esto sería muy válido en navegadores como Internet explorer y Firefox. Pero en el otro gran navegador, Opera, no hace falta nada de esto. Le dáis a imprimir y "voilà" casi idéntico al diseño original.

Si no lográis imprimir algo o quereís probar la velocidad de este navegador(almacena las páginas que vas visitando y vuelves a ellas al instante) sólo tenéis que ir a su web y bajar el programa... es gratuito...Opera