CSS alternativo para impresión

Revisando un poco el código de la plantilla, para depurar, re-organizar, me doy cuenta que, aunque me había esforzado mucho por el diseño general del blog, el estilo a la hora de imprimir una entrada era desastroso, se imprimían el banner, el menú, la sidebar, el footer, etc. elementos que obviamente no son importantes a la hora de generar un PDF o fijar las entradas en papel.

El HTML es una cosa y el estilo es otra, eso es lo que nos permite disponer y establecer diferentes modos de visualización para nuestro sitio, esto claro, si el código está bien estructurado.

Entre sus características, las hojas de estilo permiten especificar cómo debe ser presentado un documento, ya sea en pantalla (screen), en papel (print), etc. podemos usar el selector 'media' para establecer los estilos.

Hay dos formas de indicar que tipo de estilo se debe cargar:

1.- usando el elemento link:

<!-- estilo para impresión -->
<link rel="stylesheet" type="text/css" media="print" href="RUTA/print.css">

<!-- estilo general -->
<link rel="stylesheet" type="text/css" media="screen" href="RUTA/screen.css">

Fíjate que solo cambiamos el valor de media (screen o print)

2.- Utilizando la regla @media: esto para el caso de que no queramos cargar un archivo.

@media print {
  /* css para la impresión */
}

@media screen {
  /* css general */
}

De esa manera se cargaría el CSS correspondiente para la visualización en pantalla y en caso de imprimir, se muestra con el otros estilo definido.

Existen muchos medias types, como el handheld para especificar hojas de estilos destinada a PDAs y teléfonos móviles, projection propuesto para las presentaciones proyectadas, tv propuesto para dispositivos de tipo televisión, all apropiado para todos los dispositivos, etc.

Ahora bien, ¿qué pasa con los elementos que no queremos mostrar?
- esos elementos deberían tener asociado algún selector de clase (.clase) o selector de ID (#id), y, de esa manera, podemos especificar un estilo aplicable a cada uno de ellos, como indicar que no se muestren, ejemplo:

#comments, #comment-form, #blog_header, #blog_userbar, #lsidebar-wrapper, #footer, 
{
   visibility: hidden;
   width: 0px;
   height: 0px;
}

---

Usando el pseudo elemento AFTER podemos conseguir que las direcciones de los enlaces puedan verse aun cuando se impriman las entradas.

Este pseudo elemento permite insertar texto automáticamente después del contenido del elemento al que se ajusta, por ejemplo:

p:after {
  content:" - Texto agregado automáticamente al final";
}

Mostraría el contenido de los elementos P y posteriormente el texto indicado en content.

Aplicándolo a los enlaces:

a:after {
  content: " (" attr(href) ") "; /* Convertiría "texto-enlace" en "texto-enlace (dirección)" */
}

---

En el caso de blogger hay que eliminar la barra de navegación que traen las plantillas por defecto, por lo menos evitar que se imprima, agregamos:

#navbar-iframe 
{
     height:0px;
     visibility:hidden;
}

Referencias:
w3.org
sidar.org
librosweb.es