URL hinter einen Link drucken

Hast du schon mal einen Artikel einer Website ausgedruckt? Du hast dabei sicher festgestellt, dass die URL zu einem Link natürlich fehlt. Doch das lässt sich mit einem kleinen CSS Snippet ändern. Mit einer CSS Formatierung kannst du dabei die URL hinter einen Link drucken. Natürlich nur dann, wenn die Website auch tatsächlich ausgedruckt wird.

 

Wie du eine URL hinter einen Link drucken kannst, zeige ich dir in diesem Artikel.

 

Nur beim Ausdruck die URL hinter einen Link drucken

Du kannst mit CSS ganz einfach die URL eines Links beim Ausdruck der Website mit ausgeben. Beim normalen Betrachten der Website im Browser bleibt die URL dabei verborgen. Du brauchst dazu lediglich das nachstehende Code Beispiel in dein Stylesheet einfügen.

 

Beispiel:

@media print{
       a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
}

 

Erklärung:

Mit Media Queries lässt sich die  dabei Anzeige der URL auf bestimmten Geräten steuern. Im Beispiel verwendete ich dabei „print„. Somit lässt sich die URL nur bei einem Ausdruck anzeigen. Beim Betrachten der Website im Browser wird die URL hingegen nicht angezeigt.

Der Vorteil dieser Methode ist, dass beim Ausdruck einer Website keine Informationen verloren gehen. Der Anwender könnte somit alle weiteren Informationen weiterhin aufrufen, indem er einfach die URL abtippt. Betrachtet er hingegen die Website am Bildschirm, verschwendest du mit dieser Methode keinen Platz. Außerdem unterbrichst du somit den Lesefluss nicht.

 

Anzeigebeispiel:

Am deutlichsten wird der Effekt natürlich mit einem Anzeigebeispiel. Der oben genannte Effekt funktioniert dabei auch bereits in der Druckvorschau des Browser. Um dir ein Live Beispiel anzusehen, folge dazu einfach dem nachstehenden Link: Anzeigebeispiel aufrufen

 

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

  • Mozilla Firefox 56.0 (inkl. Firefox 56 mobile – Android)
  • Chromium 61
  • Google Chrome 61 mobile (Android)

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.