Cómo bloquear una página web para que no se imprima con CSS

páginas web están pensados ​​para verse en una pantalla. Si bien existe una amplia variedad de dispositivos posibles que se pueden usar para ver un sitio (computadoras de escritorio, 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 habernos reunido con muchos clientes que eran nuevos en la web y se sentían más cómodos revisando las páginas impresas del sitio. Luego nos dieron comentarios y ediciones en esos trozos de papel en lugar de mirar la pantalla para discutir el sitio web. A medida que las personas se han sentido más cómodas con las pantallas en sus vidas y esas pantallas se han multiplicado muchas veces, hemos visto cada vez menos personas que intentan imprimir páginas web en papel, pero aún así suceder. Es posible que desee considerar este fenómeno cuando planifique su sitio web. ¿Quieres que la gente imprima tus páginas web? Quizás no es así. Si ese es el caso, tiene algunas opciones.

Cómo bloquear una página web para que no se imprima con CSS

Es fácil de 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 en no se muestra - y dado que todo en sus páginas es un elemento secundario del elemento del cuerpo, esto significa que no se mostrará la página / sitio completo.

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

Esta información le dice al navegador que si esta página web está configurada para imprimir, debe usar esta hoja de estilo en lugar de cualquier hoja de estilo predeterminada que las páginas usen para mostrar 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 mayor especificidad que cualquier estilo dentro de su hojas de estilo externas, lo que significa que la página no se imprimirá en absoluto, mientras que otras páginas sin esta línea se imprimirán normalmente.

Sea más elegante con sus páginas bloqueadas

¿Qué sucede si desea bloquear la impresión, pero no quiere que sus clientes se sientan frustrados? Si ven que se imprime una página en blanco, es posible que se molesten y piensen que su impresora o computadora está averiada y no se den cuenta de que básicamente ha desactivado la impresión.

Para evitar la frustración de los visitantes, puede ser un poco más elegante y poner un mensaje que solo se mostrará cuando sus lectores impriman la página, reemplazando el otro contenido. Para hacer esto, cree 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:

Esta página está diseñada para verse en línea y no puede imprimirse. Por favor vea esta página en http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

#noprint {pantalla: ninguna; }
#print {display: block; }

#print {display: none; }
#noprint {pantalla: bloque; }