CSS para impresión

por Natalia Ventre el 26/03/2013 ・ podés leerlo en 1 minuto ・

Hace más de 10 años, Eric Meyer explicaba en el artículo CSS Design: Going to Print los puntos a tener en cuenta al crear una hoja de estilo CSS para impresión. Los estilos para impresión incluídos en el HTML5 Boilerplate1 posibilitan imprimir una página con:

  • texto negro porque se imprime más rápido
  • mostrando el destino de los enlaces
  • imágenes enteras
  • saltos de página optimizados para evitar viudas y huérfanos
  • márgenes apropiados para papel

Para terminar, faltaría sólo ocultar (con display:none) los elementos que no tengan sentido por ej.: navegación, formularios, etc. Podés imprimir una página cualquiera de tu sitio, decidir qué está de sobra y con las Chrome Developer Tools inspeccionar rápidamente las clases u otros identificadores para seleccionar los elementos.

Para (Apuntes al Margen), a los estilos del HTML5 Boilerplate, agregué:

@media print{
	body{
		border: none;
	}

	footer{
		display: none;
	}
}

Conclusión

Es un trabajo que lleva 10 minutos, así que no hay excusa para no tener unos estilos básicos para impresión.


  1. Antes del HTML5 Boilerplate, usaba Hartija.