¡Foto!

¡Envia tu foto al Fotomaton!

CSS print : Facilitando la impresión al usuario

8 comentarios · 8.633 lecturas · html y css

Cuando estamos creando o modificando una web, algunos diseñadores trabajan en un CSS para que el usuario pueda ver la página correctamente desde un navegador, otros se preparan unas hojas de estilo para cada navegador concreto, y otros hacen cada locura que cuando ves la página lo único que piensas es... ¡Que web!.

El caso es que, independientemente de tener diseñado el aspecto "visto" desde el navegador, podemos ir, aún, un poco más allá.

Me estoy refiriendo al media="print". Colocando en la cabecera head de nuestro HTML, al márgen de tener otro CSS para nuestro sitio, podemos ubicar lo siguiente:

<link rel="stylesheet" href="estilo-impresion.css" media="print">

Con esto le decimos al navegador que en el caso de que el usuario mande a imprimir alguna sección o artículo de nuestra página no va a cargar el CSS que "ve" el navegador, sino una hoja de estilos CSS especial, hecha expresamente para impresión.

Asi pues, en esta hoja podemos hacer cambios significativos como quitar todos los elementos interactivos como menús, formularios, etc., cambiar las zonas negras u oscuras del sitio para reducir el gasto de tinta a grises o blancas, para lo mismo Eliminar el fondo del sitio, etc.

Además, una cosa a tener en cuenta para éste CSS es el siguiente código:

a:after {
content : " ( " attr(href) " ) ";
font-size : small;
}

Con él conseguimos que los enlaces (hipervínculos) que, evidentemente, no van a poderse cliquear en nuestro documento impreso, aparezcan a continuación del enlace de una manera similar a esta:

Google ( http://www.google.es/ )


8 comentarios ▼ · Escrito el 3-Nov-2005 · Ver menciones
Recomendar por correo · Meneame · Añadir a del.icio.us

Artículos relacionados

8 Comentarios

#1 Publicado hace 3 años
Juanjo Lector
Navegando con Mozilla Firefox
Bajo Windows XP

Uy yo encontre algo parecido en > http://www.alistapart.com/articles/goingtoprint/

#2 Publicado hace 3 años
Manz Administrador
Navegando con Mozilla Firefox
Bajo Windows XP

Efectivamente, es un artículo donde hablan del mismo tema, pero que no conocía. Aún así, ¡ni compares mis pobres definiciones con los grandes maestros de Alistapart!

Gracias por el link, Juanjo.

#3 Publicado hace 3 años
Netito Lector
Navegando con Internet Explorer
Bajo Windows XP

Es algo muy útil, lo de media print, aunque creo que lo del a:after, que sumamente práctico al imprimir, no funciona en Explorer... :(

#4 Publicado hace 3 años
Manz Administrador
Navegando con Mozilla Firefox
Bajo Windows XP

Efectivamente... El atributo content no lo reconoce Internet Explorer a pesar de ser estándar. ¿Tal vez el nuevo IE7?

#5 Publicado hace 3 años
Driadan Lector
Navegando con Mozilla Firefox
Bajo Windows XP

Offtopic: No esperes un soporte completo de css porque creo que dijeron que no lo iban a dar (o al menos no en la primera release oficial) Iban a mejorarlo un poco, pero no a soportarlo de forma completa.

Gracias por la info del articulo, a ver si un dia me pongo y le meto un css para impresion (aun cuando no haya mucho que imprimir )

#6 Publicado hace 3 años
balmasedano Lector
Navegando con Safari
Bajo Macintosh

Pues la verdad es que está muy bien poder especificar una hoja de estilos a la hora de imprimir.
En una de mis páginas web la utilicé y da muy buenos resultados, además te permite eliminar partes del documento como los menús, siempre y cuando les hayas especificado un estilo determinado.
Gracias por la información

#7 Publicado hace 10 meses
geo Lector
Navegando con Mozilla Firefox
Bajo Windows 2000

Muy interesante

#8 Publicado hace 1 mes
aLhernandez Lector
Navegando con Mozilla Firefox
Bajo Windows Vista

Que tal:

Muy bien esto de poder acomodar la impresion a como nos convenga.

Pero tengo un problema, ya que requiero imprimir una imagen de fondo, en concreto, la imagen de fondo que coloque a una tabla (backgroun='...').

¿Es esto posible? o todos los navegadores al momento de imprimir ignoran los fondos ¿?



saludos.

Deja tu comentario

en Internet.

Consejos

  • Los comentarios fuera del tema del artículo (OFF-TOPIC) serán eliminados.
  • Escribir completamente en MAYUSCULAS en Internet equivale a GRITAR y está mal visto.
  • No utilices lenguaje SMS, en Emezeta no te cobramos por letras escritas.
  • No hagas publicidad de tu página o dejes enlaces en el comentario para aumentar el PR o la popularidad en buscadores. En Emezeta se aplica el tag nofollow, que hace que Google ignore esos enlaces.
  • No insultes. Al escribir un comentario tus datos quedan almacenados y serás el único responsable de tus palabras. Se permite la libertad de expresión y de opinión, pero no los comentarios ofensivos.
  • Puedes insertar algunas etiquetas HTML en los comentarios: em, a href, b, i, em, code, acronym y strong.
  • Es posible añadir una foto junto a tus comentarios, para ello sólo tienes que personalizarla en Gravatar. [?]

Envía tu foto

Fotomatón Emezeta

Envia tu fotografía al fotomatón de Emezeta. Puedes enviar varias y saldrás en la portada de Emezeta.


Artículo de http://www.emezeta.com/

10 consultas efectuadas / Página generada en 0.039 segundos

Programado íntegramente por José Román (Manz) en XHTML y CSS estándar.

Sindicado bajo Feed RSS. Contenido bajo licencia Creative Commons

Estadísticas de visitas · Términos y condiciones · Contacto · Publicidad · Preguntas frecuentes (FAQ)