¡Ojo! Hago directos en Twitch sobre desarrollo web, ¿Te apuntas? ManzDev

css
8

Escrito por

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/ )

RELACIONADOS 5 pseudoselectores CSS que quizás no conocías RELACIONADOS 5 pseudoselectores CSS que quizás no conocías
x 5 pseudoselectores CSS que quizás no conocías
Manz

8 comentarios

Publica tu opinión