Skip to main content

Cómo bloquear una página web de impresión con CSS

¿Cómo saber si el número de mi casa tiene energías negativas? | Muy buenos días (Julio 2025)

¿Cómo saber si el número de mi casa tiene energías negativas? | Muy buenos días (Julio 2025)
Anonim

Las páginas web están destinadas a verse en una pantalla. Si bien hay una gran variedad de dispositivos posibles que se pueden usar para ver un sitio (computadoras de escritorio, computadoras portátiles, tabletas, teléfonos, dispositivos portátiles, televisores, etc.), todos incluyen una pantalla de algún tipo. Hay otra forma en que alguien puede ver su sitio web, una forma que no incluye una pantalla. Nos referimos a una impresión física de sus páginas web.

Hace años, encontraría que las personas que imprimían sitios web eran un escenario bastante común. Recordamos que nos reunimos con muchos clientes que eran nuevos en la web y nos sentimos más cómodos al revisar las páginas impresas del sitio. Luego nos dieron comentarios y ediciones en esos pedazos de papel en lugar de mirar la pantalla para hablar sobre el sitio web. A medida que las personas se sienten más cómodas con las pantallas en sus vidas, y como esas pantallas se han multiplicado muchas veces, cada vez vemos menos personas que intentan imprimir páginas web en papel, pero aún así sucede. Es posible que desee considerar este fenómeno cuando planifique su sitio web. ¿Quieres que la gente imprima tus páginas web? Tal vez usted no lo hace. Si ese es el caso, tienes algunas opciones.

Cómo bloquear una página web de impresión con CSS

Es fácil usar CSS para evitar que las personas impriman sus páginas web. Simplemente necesita crear una hoja de estilo de 1 línea llamada "print.css" que incluya la siguiente línea de CSS.

cuerpo {pantalla: ninguno; }

Este estilo convertirá el elemento "cuerpo" de sus páginas para que no se muestren, y dado que todo en sus páginas es un elemento secundario del cuerpo, esto significa que no se mostrará toda la página / sitio.

Una vez que tenga su hoja de estilo "print.css", la cargaría en su HTML como una hoja de estilo de impresión. Así es como lo haría: simplemente agregue la siguiente línea al elemento "cabeza" en sus páginas HTML.

Esta información le dice al navegador que si esta página web está configurada para imprimir, use esta hoja de estilo en lugar de la hoja de estilo predeterminada que las páginas usan para la visualización en pantalla. Cuando las páginas cambien a esta hoja "print.css", el estilo que hace que no se muestre toda la página se activará y todo lo que se imprimirá será una página en blanco.

Bloquear una página a la vez

Si no necesita bloquear muchas páginas en su sitio, puede bloquear la impresión página por página con los siguientes estilos pegados en el encabezado de su HTML.

Este estilo en la página tendría una especificidad más alta que cualquier estilo dentro de sus hojas de estilo externas, lo que significa que esa página no se imprimirá en absoluto, mientras que otras páginas sin esta línea aún se imprimirían normalmente.

Consigue más elegante con tus páginas bloqueadas

¿Qué sucede si desea bloquear la impresión pero no desea que sus clientes se frustren? Si ven una página en blanco imprimiendo, pueden enojarse y pensar que su impresora o computadora está dañada y no darse cuenta de que esencialmente ha deshabilitado la impresión.

Para evitar la frustración de los visitantes, puede ponerse un poco más sofisticado y poner un mensaje que solo se mostrará cuando los lectores impriman la página, reemplazando el resto del contenido. Para hacer esto, construya su página web estándar, y en la parte superior de la página, justo después de la etiqueta del cuerpo, coloque:

Y cierre esa etiqueta después de que todo su contenido esté escrito, en la parte inferior de la página:

Luego, después de haber cerrado el div "noprint", abra otro div con el mensaje que desea mostrar cuando se imprima el documento:

Esta página está diseñada para ser vista en línea y puede que no se imprima. Consulte esta página en http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Incluya un enlace a su documento de impresión CSS llamado print.css:

Y en ese documento se incluyen los siguientes estilos:

#noprint {mostrar: ninguno; } #print {display: block; }

Finalmente, en su hoja de estilo estándar (o en un estilo interno en el encabezado de su documento), escriba:

#print {mostrar: ninguno; } #noprint {display: block; }

Esto asegurará que el mensaje impreso solo aparezca en la página impresa, mientras que la página web solo aparezca en la página en línea.

Considere la experiencia del usuario

La impresión de páginas web es generalmente una experiencia pobre, ya que los sitios de hoy en día a menudo no se traducen bien en la página impresa. Si no desea crear una hoja de estilo completamente separada para dictar los estilos de impresión, puede considerar el uso de los pasos de este artículo para "desactivar" la impresión en una página. Tenga en cuenta el impacto que esto podría tener en los usuarios que confían en la impresión de sitios web (quizás porque tienen una mala visión y dificultad para leer el texto en pantalla) y tome decisiones que funcionarán para la audiencia de su sitio.

Artículo original de Jennifer Krynin. Editado por Jeremy Girard.