media=»print» (actualizado)

15/Nov/2005 1230

Es muy difundido hoy en día el CSS dentro del diseño de sitios web, y existe una gran exigencia por parte del usuario para que se puedan ver bien sus sitios en las más diferentes plataformas y los ya innúmeros browsers. Un importante medio que no es muy utilizado, y que sin embargo es muy fácil de ser aplicado para un resultado óptimo, es el de crear una hoja de estilos exclusivamente para que la página, y los ítems que desees sean impresos de la mejor forma posible, permitiendo al usuario ahorrar tinta y mejorar la visualización del contenido. Para esto, es necesaria una hoja de estilos nueva y el llamado respectivo entre <head> </head>:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Lo primero a realizarse es duplicar la hoja de estilo del sitio, hecha para la distribución del contenido para pantallas (media="screen"). No queremos trabajar doble, escribiendo todo el código CSS nuevamente. A partir de ahora, muchos valores deben ser reemplazados de px o em a cm y pt. Así que debes tener claro los tamaños y tipos de conversiones a ser realizadas.

Un importante paso es tener claro qué es lo que queremos imprimir. Si todo el sitio, o solamente un artículo y el encabezado, o el imagotipo + menues + contenido… enfin, queda en ti saber cuál es el fin que persigues. En este artículo presentaré algo general, para que puedas profundizar y customizar tu mismo código como te dé la gana.

Teniendo claro qué mostrar o qué no quiero que se imprima, a desmenuzar el código. El principal atributo será display: none; el que permite esconder lo que lo contiene, pero sin perder el espacio que lo soporta. Comencemos con un menú:

div#menu {
width: 300px;
color: #333;
font-size: 11px;
background: #999;
}

Si queremos que el menú desaparezca:

div#menu {
display: none;
}

Es necesario hacer esto con todo lo que no se requiere que se vea impreso. Se debe cuidar tb la diagramación, mientras mejor fluya el texto (más si el texto es largo) mejor. Para un mejor orden, se puede justificar el texto (text-align: justify;) y las imágenes se pueden posicionar usando float: left; o float: right;

También será necesario darle un pequeño margen a los lados, para que el contenido no se vea muy a corte. 10% por cada lado será suficiente. Otro punto importante es el fondo, no queremos que se imprima el color o pattern que corresponda por lo que en body:

body {
background: transparent;
}

Sobre el tema de los links, a veces es importante que se sepa que existe un enlace en cierto texto, por lo que se le aplica un simple código:

a:link, a:visited {
color: #666;
font-weight: bold;
text-decoration: underline; 
background: transparent;
}

Esto nos da un color más suave que el resto del texto (si el texto es negro #000) y un underline para mayor diferenciación.

Un buen truco y sólo en browsers que soportan bien CSS2, es el siguiente código:

a:after {
content: " ( http://www.csslab.cl " attr(href) " ) ";
font-size: small;
}

Nuevamente, esto funciona para Firefox (Mozilla) y Netscape. Lo que hace es desplegar, luego del link, la URL entre paréntesis [en este caso, CSSLab (http://www.csslab.cl) ].

Creo que eso es todo. Suerte y no gasten mucha tinta.

Links:

Comentarios

  1. pharmaceptica [#]

    generic tadalafil from uk https://www.pharmaceptica.com/

  2. tadalafilkiva.com [#]

    online health insurance plans http://tadalafilkiva.com – liquid cialis

  3. pharmacepticacom [#]

    hydroxycloriquin https://www.pharmaceptica.com/

  4. accutane coupon [#]

    https://accutaneisotretinoine.com/ accutane coupon

  5. provigildrug [#]

    https://modvigilmodafinil.com/ modafinil uses

  6. Teoblabs [#]

    best india tadalafil online

  7. albuterolotc.com [#]

    health care reform affect on medicare http://albuterolotc.com – medication for asthma

  8. modafinilwarnings [#]

    modafinil pill modafinil pill

  9. Isobel [#]

    Excellent way of explaining, and pleasant
    paragraph
    to get information regarding my presentation focus, which i am
    going to convey in institution of higher education.

  10. stromectol [#]

    ivermectin http://stromectolforte.com/ ivermectin usa ivermectin cream

  11. stromectol for humans [#]

    stromectol uk http://stromectolforte.com/ ivermectin for humans ivermectin mua trб»±c tuyбєїn

  12. Myung Nicols [#]

    It’s an remarkable post in support of all the internet people;
    they will get advantage from it I am sure.

  13. GustavoVet [#]

    online shopping essay
    thesis helper

  14. Mellisa Binford [#]

    Hello there! This article could not be written any better!
    Looking at this post reminds me of my previous roommate! He
    continually kept preaching about this. I most certainly will
    forward this article to him. Pretty sure he’s going to have a very good read.
    Thank you for sharing!

  15. daftar togel online [#]

    There is certainly a lot to find out about this
    issue. I like all the points you’ve made.

CSSLab