Links zu PDF-Dateien mit Symbol versehen

Um vor Links zu warnen, die zu PDF-Dateien führen, kann man sie per userContent.css-Eintrag mit einem kleinen vorangestellten Symbol markieren Dieser Eintrag enthält das Symbol selbst in kodierter Form und lautet z.B.:

/* PDF-Links markieren */
    a[href$=".pdf"]:before
     {
      content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAMAAAC%2BGe%2ByAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAwUExURQAAAOLi4u7u7tqamskrK%2Bzs7M0%2BPs9MTOXl5ePk5N%2BxsdFeXtV6eu3t7eLExP%2F%2F%2F22kOpoAAAAQdFJOU%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwDgI10ZAAAAQ0lEQVR42jyLSQ7AQAzCoNln%2Ff9vm17qCxYIPM3GveiwFfjEOIPANjs%2BE%2BAQ0VFAqKuunro4UwXILIp7S5Hs%2F88rwABRWAGV1CTQ%2BgAAAABJRU5ErkJggg%3D%3D");
     }

Der Browser weiß nichts vom Typ der verlinkten Datei, bis er sie lädt - diese CSS-Regel urteilt also alleine aufgrund des Links, ob ein Symbol eingefügt wird. Die Regel versieht alle Links, die mit der Zeichenkette .pdf enden, mit dem Symbol kleines PDF-Symbol. Das erwischt natürlich auch gegebenenfalls Links, die nicht zu einer PDF-Datei führen.

Es sind aber auch Szenarien denkbar, in denen ein zu einer PDF-Datei führender Link nicht auf .pdf endet bzw. diese Zeichenkette überhaupt nicht enthält.
Etwas liberaler (aber damit natürlich auch unschärfer) funktioniert die Regel, wenn man das $= durch ein *= ersetzt, dann werden alle Links erkannt, die .pdf enthalten - an beliebiger Stelle. Das ganze funktioniert natürlich auch mit beliebigen anderen Zeichenketten.

Will man generell alle Links mit einem passenden Symbol versehen, empfiehlt sich allerdings eine (von mir unbenutzte und -getestete) Erweiterung.

In Mozillen unter Windows gibt es das Protokoll moz-icon://, das es erlaubt, direkt auf das im Betriebssystem verwendete Dateisymbol beliebiger Dateitypen zuzugreifen. Für PDF-Dateien sähe damit der userContent.css-Eintrag dann folgendermaßen aus:

/* PDF-Links markieren */
    a[href$=".pdf"]:before
     {
      content: url(moz-icon://.pdf?size=16);
     }

Leider akzeptiert size nur die Größen 16 oder 32 Pixel, was mir persönlich beides zu groß ist. moz-icon:// ist allerdings eine einfache Möglichkeit, für in Links selten auftauchende Dateitypen ein Symbol zu definieren.

Außerdem hat das Symbol natürlich eine absolute Größe, wird also unabhängig vom umliegenden Text immer gleich dargestellt, was bei kleineren Schriftgrößen den Zeilenabstand der Zeile mit dem Link zur vorangehenden durcheinanderbringt. Wie sehr das stört, muß jeder für sich entscheiden - und kann es (einen Mozilla-Browser vorausgestzt) gleich hier per Strg+- einmal testen.

Hier eine Auswahl von Symbolen und dazugehörigen Codes, diese sind analog zum obigen Beispiel in der userContent.css verwendbar. Eigene Symbole kann man z.B. mit diesem Konverter in data:-URIs verwandeln.