Jeder beliebige Link kann ein Link zu einem PDF-Dokument sein, aber das Klicken auf einen solchen Link und das Erwarten eines anderen Verhaltens kann für einen Benutzer überraschend und unangenehm sein. Dieses CSS kann diese Links visuell kennzeichnen.
/* Add " (PDF)" text after links that go to PDFs */
a[href$=".pdf"]:after { content: " (PDF)"; }
/* If file size specified as data attribute, use that too */
a[href$=".pdf"][data-size]:after { content: " (PDF, " attr(data-size) ")"; }Also…
<p>Watch out for the <a href="some.pdf">PDF bomb</a> here!</p>Visuell wird
Watch out for the PDF bomb (PDF) here!Oder…
<p>Watch out for the <a href="some.pdf" data-size="2 MB">PDF bomb</a> here!</p>Wird zu
Watch out for the PDF bomb (PDF, 2 MB) here!Siehe den Pen Identifiziere PDF-Bomben von Chris Coyier (@chriscoyier) auf CodePen.
Vor langer Zeit habe ich das hier gefunden
http://pooliestudios.com/projects/iconize/
Es ist vielleicht nützlicher als das Hinzufügen von :after { content …}.
Ein weiteres schönes und nützliches Beispiel ist die Art und Weise, wie Wikipedia auf externe Websites verlinkt.
Viele Grüße,
R
Das Problem damit ist, dass für eines dieser Bilder eine HTTP-Anfrage erfolgen muss. Es sei denn, Sie hätten eine Art Magie mit Sprite-Bildern, ich denke, das Anhängen von (PDF) am Ende eines PDF-Links reicht aus.
Außerdem wirken Websites mit diesen kleinen Symbolen etwas überladen.
Roflo, tolle Ressource! Danke
Gibt es eine Möglichkeit, das mit einem Sprite-Bild zu machen?
Kannst du das Attribut stylen
(PDF, 2 MB)
den Teil mit den 2 MB. mit CSS? Wie möglicher Weise eine Klasse zuweisen?
Ich versuche, dies an einen Eingabeschaltfläche anzupassen. Ich habe versucht
input[type =”button”][title]:after { content: ” (” attr(title) “)”; }
sowie
input[title]:after { content: ” (” attr(title) “)”; }
keines von beiden fügt jedoch den Inhalt des Titelattributs nach dem normalerweise auf der Schaltfläche angezeigten Text hinzu. Haben Sie Vorschläge, wie das funktionieren könnte?
Beispiel: [Schaltfläche] —> [Schaltfläche (Tooltip-Informationen aus dem Titelattribut)]
Ich bin mir nicht sicher, ob es möglich ist, aber vielleicht könnte jemand hier eine Meinung abgeben…
Die Verwendung des Attributselektors a[href$=”.pdf”] ist für mich faszinierend, und es ist wirklich cool, dass man Inhalte vor oder nach dem Link hinzufügen kann, aber was ich WIRKLICH tun möchte, ist, dieses Coding-Konzept zu verwenden, um ein Attribut innerhalb des <a>-Tags zu setzen, um das Ziel in einem neuen Fenster zu öffnen, wenn es eine PDF-Datei ist… (d. h. target=”_blank” oder onclick=”window.open(this.href);return false;).
Das funktioniert nicht, aber so etwas habe ich im Sinn…
a[href$=".pdf"] { [attr(target)="_blank"]; }Ich versuche wahrscheinlich, einen quadratischen Stift in ein rundes Loch zu stecken, aber es wäre wirklich großartig, wenn das möglich wäre.
^Generierter Inhalt dehnt bereits den Geltungsbereich des CSS-Zwecks, und dieses Beispiel geht noch weiter. Ich denke, es ist besser, serverseitige Skripte zu verwenden, wenn Sie automatisch
target="blank"zu PDF-Links hinzufügen möchten.Hallo,
Es gibt einen seltsamen Anzeigefehler in Safari mit PDF Bombs. Der Linkzustand zeigt (PDF, 400 KB) nicht am Ende des Text-Hyperlinks an, aber wenn Sie mit der Maus über den Link fahren, erscheint er und verschwindet dann wieder, wenn Sie die Maus entfernen.
Ich habe dies bisher in 3 Websites verwendet und es ist in jeder gleich (in Safari).
In Firefox ist es in Ordnung, wer weiß!!
Kann jemand Licht auf dieses Thema werfen.
Danke
Gary
Ist es bei Links zu PDFs bewährte Praxis, die PDF-Größe mit dem Link anzuzeigen, um dem Benutzer Informationen zu geben, bevor er sich für einen Klick entscheidet?
Gibt es eine Möglichkeit, es auszublenden, damit es nicht nach einem Bildlink erscheint? Ich versuche, diese Formatierung zu verwenden, bisher ohne Erfolg
img a[href$=”.pdf”]:after { content: “”; }