CSS – Estilo print que quite enlaces

Publicada el por

Cuando configuramos un estilo CSS print para una página, cuando se imprime ésta, resulta que muestra los enlaces. Empecemos con CSS – Estilo print que quite enlaces:

Podemos ver que debajo de las imágenes, enlaces, debajo de los textos enlazados, el enlace… Pero hay una manera sencilla para no mostrar enlaces cuando imprimimos la página. Podemos añadir el siguiente código a nuestra hoja de estilos:

@media print 
{
  a[href]:after { content: none !important; }
  img[src]:after { content: none !important; }
}

Con este texto evitamos que se muestren los enlaces al imprimir la página. Fijaos que definimos el estila utilizando media queries. Es el @media en el que definimos un estilo propia para la impresión de la hoja. Al igual que podemos utilizar las media queries para definir estilos segun medidas de pantalla, podemos utilizarlo para definir el estilo de impresión, que soportan los navegadores superiores a:

  • FireFox 3.5
  • Internet Explorer 9
  • Chrome 14
  • Safari 3.2
  • Opera 11

Me hace cosa poner Internet Explorer, pero bueno… Todos lo navegadores modernos, lo soportan sin problemas. También es verdad que hay que hacer muchas pruebas para poder dominar los estilos en impresión, pero no más que en pantalla.

Espero que os sea de utilidad el artículo CSS – Estilo print que quite enlaces

Más información: