Desde la web de Kilian Valkhof nos traen una 煤til gu铆a para crear adecuadamente una hoja de estilos CSS para imprimir una p谩gina web.
Una buena hoja de estilos CSS en su versi贸n para imprimir, primero y principal, esconde todos los elementos innecesarios que no son directamente importantes para la p谩gina que est谩 siendo impresa.
Adem谩s, remueve todos los colores que sean posibles para que no malgastes tinta de color y se asegura que tu texto tenga el ancho de la p谩gina (width:auto) para que tampoco malgastes papel.
Un truco inteligente es utilizar el siguiente c贸digo CSS para a帽adir entre par茅ntesis al lado de cada link su URL para que la gente pueda conocerlos mediante la versi贸n impresa:
a::after {
content: ” (” attr(href) “) “;
font-size: 90%;
}
Donde font-size se hace a penas un poco m谩s peque帽a que el texto normal para que se distinga que es un link.
Otras dos propiedades muy 煤tiles son page-break-before y page-break-after; con estos elementos puedes controlar donde tu sitio se 鈥渞ompe鈥 hacia la segunda p谩gina. Lo puedes lograr mediante el siguiente CSS:
div.comments {page-break-before:always;}
h2, h3 {page-break-after:avoid;}
Los comentarios siempre se ubican en la segunda p谩gina para que el art铆culo quede por su cuenta. La segunda l铆nea del c贸digo previene que una p谩gina termine con un header y el p谩rrafo siguiente comience en la otra.
Hay dos formas de a帽adir una hoja de estilo para iprimir.
Una es con una hoja de estilos separadas, linkeandola con <link rel=”stylesheet” type=”text/css” href=”print.css” media=鈥漰rint鈥 />.
La otra es mediante un c贸digo @media para imprimir a帽adido al pie del archivo CSS:
@media print {
//my print-only css
}
Lo que se considera mejor porque ahorra un http request pero, a la vez, sigue siendo bastante claro.
Fuente: Kilian Valkhof
Comentarios recientes
- Gabriela: JAJAJAJAJA, solo falt贸: "me parece que el dise帽o est谩 muy est谩tico, ...
- Alejandro: Todos patalean por que no se quieren tomar la SOPA o porque no podremos ...
- LaU: No termina de convencerme del todo, aunque ya me estoy hartando de lo le...
- Isma-Chistes: Buenas y gracias por la aportaci贸n, pero alguien sabr铆a como utilizar ...
- Mauricio Vinasco: GRACIAS!!!! genial... C贸mo se te ocurre esto????...
- Jose Larez: Felicitaciones esta muy exacta la explicacion ! Gracias por este curso.....
Feed de los comentarios