Jetzt abonnieren!
Links zu PDFs im Browser kenntlich machen
Im Dr. Web Weblog erschien heute ein Beitrag zum Thema nervige PDF Downloads im Browser. Da auch ich bereits mehrfach darauf „hereingefallen“ bin, habe ich mich dran gemacht eine kleine Lösung dieses Problems zu suchen, und habe sie dank Susanne Jäger aus der CSS-Mailingliste auch gefunden.
In meinen Tests funktionierte dieser Trick leider nur im Mozilla(-Firefox), möglicherweise könnte er jedoch auch schon mit der neuen Opera 8 Beta funktionieren, welche mir jedoch zum Zeitpunkt des Tests leider nicht zur Verfügung stand. Im Opera 7.54 funktionierte es jedenfalls nicht. (Oder ich hab was falsch gemacht ;) )
Vor einiger Zeit schrieb ich einen Artikel zum Thema CSS-Signaturen in dem ich beschrieb, wie man in den aktuellen Browsern User-Stylesheets einbindet. Diesen Trick werden wir uns hierbei zu Nutze machen.
Wir legen dazu wie beschrieben, im Mozilla-ProfilOrdner eine userContent.css an, oder editieren unsere vorhandene, und schreiben in diese die Zeile
a[href$=".pdf"]:after {font-size: 10px; color: red; content: " [PDF]";}
Durch den CSS3 Attribut-Selektor a[href$=".pdf"] formatieren wir alle Links eines Dokumentes, deren href-Attribut auf .pdf endet([href$=".pdf"]), durch das Pseudoelement :after weisen wir den Browser an, hinter dem Link die angegebenen CSS-Deklarationen auszuführen. In dem von mir beschriebenen Fall wird also hinter den entsprechenden Link (:after), ein kleines [PDF] geschrieben (content: " [PDF]";), welches in 10px Größe rot dargestellt wird (font-size: 10px; color: red;).
Diesen Trick kann man natürlich beliebig abändern und seinen Wünschen hin anpassen. Beispielsweise kann man ebenfalls über
a[href$=".pdf"] {background: red !important;} einem Link zu einem PDF einen roten Hintergrund geben.
Dies alles lässt sich natürlich genauso in Stylesheets anwenden, welche man online in öffentlichen Projekten benutzt. Allerdings sollte man sich, durch mangelnde CSS3-Unterstützung seitens der Browser, dadurch nicht auf ausreichende Kennzeichnung der PDF-Links verlassen. Einigen Usern, oder einem selbst mittels User-Stylesheet, kann dies aber schon eine kleine Hilfe sein, um nicht mehr in die „PDF Falle“ zu tappen.
Veröffentlicht: 28.02.2005, 11:48 Uhr
Rubrik:
Tags:
Diskussion: 4 Kommentare
Social Media:
4 Kommentare zu “Links zu PDFs im Browser kenntlich machen”
Die Trackback-URL lautet
April 26th, 2005 at 15:41
Danke für den super Tip. Ich habe es erweitert und mit einem Bild ersetz:
a[href$=“.pdf“]:after {content:“ “ url(‚http://support.loglogic.com/images/pdf.gif‘);}
Ich habe zwar probiert ein lokales Bild anzusprechen, hat aber nicht ganz funktioniert.
Juni 17th, 2005 at 02:10
Gegen unbeabsichtigtes PDF-Öffnen gibt es eine praktische Extension: https://addons.mozilla.org/extensions/moreinfo.php?id=636&application=firefox
September 13th, 2005 at 02:27
[…] Fast jeder kennt es, man klickt einen Link, dieser ist aber zufällig ein Speicherintensives PDF, und die nächsten 30 Sekunden reagiert der eigene Browser somit mal einfach garnicht. Dies muss nicht sein, Links zu PDFs sollte man daher immer kennzeichnen. Dies funktioniert bei anständigen Browsern meistens mit einer Zeile CSS-Code automatisch. Wie genau das gemacht wird, beschrieb ich bereits vor einiger Zeit in einem anderen Artikel. »Links zu PDFs im Browser kenntlich machen« […]
März 21st, 2006 at 03:54
[…] Nachtrag: Ein Trick von Manuel Bieh kann auf Nutzerseite für Abhilfe sorgen. […]