@media print: Estilos para imprimir desde el navegador

En el navegador web tenemos una funcionalidad para imprimir la página web que estamos visualizando, pero no siempre tiene que ser igual el contenido de la página web al contenido impreso, a la hora de imprimir se pueden aplicar/modificar/ocultar nuevos estilos.

Para imprimir desde el navegador podemos bien poner un botón con un evento que abra la ventana de impresión automáticamente:

<form> <input type='button' onclick='window.print();' value='Imprimir' /></form>

o de forma manual abrir la ventana desde las opciones del navegador, en el caso de Firefox sería: menú/imprimir.

Antes de nada vamos a ver un ejemplo práctico,  en pantalla veremos unos estilos diferentes a los que veremos en el modo “imprimir”.

VER EJEMPLO ESTILOS CSS IMPRESIÓN

• @media print

Todos los estilos que vamos a ver a continuación se deberán aplicar dentro de la clase @media print (dentro de nuestra hoja de estilos “.css”), para indicarle que únicamente se apliquen cuando abramos la opción imprimir del navegador.

@media print {
//incluir estilos aquí 
}

• @page

Se usa para hacer referencia a toda la página a visualizar (comportamiento de la página), un caso por ejemplo sería darle un padding a toda la página.

@page { padding: 10%; }

• Display

Es uno de los estilos más usados para estos casos, su función es ocultar/mostrar contenido a la hora de presentar la vista de impresión, en este caso indicaremos que se oculte nuestra clase noImprimir.

.noImprimir{ display:none }

• !important

Algunas veces vemos que nuestros estilos no se visualizan a la hora de entrar en modo impresión, pongamos un ejemplo tenemos un bloque con una propiedad css (background-color) y a la hora de imprimir desaparece el color, para forzar a que se muestre los estilos se agregará el atributo !important (el estilo deberá ir dentro de la clase @media print).

@media print {
    background-color: #F5F5F5 !important;
}

• Size

Con el atributo landscape visualizamos la impresión en formato horizontal, si se quiere vertical se deberá de usar portrait. También se le puede pasar otro parámetro para indicarle el tamaño estándar del papel como: A4, A3…

@page {size: landscape}
@page {size: A4 landscape}

• a[href]:after

Con los siguientes estilos ocultaremos el contenido del atributo href = “” pertenecientes a enlaces.

a:after { content:''; }
a[href]:after { content: none; }

• webkit-print-color-adjust

Se usa para navegadores con el motor WebKit y se usa para evitar que el navegador de forma automática oculte o cambie colores, imágenes… tiene dos atributos que son: economy | exact, si queremos que el navegador no cambie nada se usará exact como a continuación.

* { -webkit-print-color-adjust: exact; }

• Saltos de Página

• page-break-after: Se utiliza para indicar el tipo de salto de página que se desea después de un elemento/s, los parámetros posibles son: auto, always, avoid, left, right, inherit

* { page-break-after: always; }

• page-break-before: Se utiliza para indicar el tipo de salto de página que se desea antes de un elemento/s, los parámetros posibles son: auto, always, avoid, left, right, inherit

* { page-break-before: always; }

• page-break-inside: Se utiliza para indicar el tipo de salto de página que se desea dentro de un elemento/s, los parámetros posibles son: auto, avoid, inherit

* { page-break-inside: auto; }

• Configuración desde el navegador

Existen ciertos elementos (componentes pertenecientes a encabezados y pies) que no pueden ocultarse mediante estilos CSS y deben configurarse desde el propio navegador algunos casos son:

• Mostrar/ocultar la hora de impresión.
• Mostrar/ocultar dirección/título.
• Mostrar/ocultar número de páginas.
• Cambiar de forma predeterminada la orientación de la página.