Links-zu-Dateitypen-optisch-kenntlich-machen

Links zu Dateitypen optisch kenntlich machen – CSS3 Attributselektoren

CSS3 gibt uns die Möglichkeit, gezielter auf den Wert eines Attributes zuzugreifen. So kann ich dann diesem Attribut in der CSS individuelle Eigenschaften zuweisen. Das Spielfeld wurde ja schön eröffnet, in meinem Beitrag CSS3 – externe Links darstellen hatte ich diese Möglichkeit genutzt, um interne Links herauszufiltern, bzw. interne von externen Links zu unterscheiden.

Natürlich gibt es noch viele weitere Anwendungsmöglichkeiten in der Verwendung von Attributselektoren, im Internet gibt es hierzu viele Anregungen, eine davon möchte ich heute ausprobieren: Links zu bestimmten Dateitypen unterschiedlich darstellen bzw. optisch kenntlich machen.

Hier vorab nocheinmal kurz die neuen Zugriffsmöglichkeiten:

  • [ATTR=“css3″] – der Wert des Attributes enspricht genau der Zeichenkette „css3″ (als Beispiel title=“css3“)
  • [ATTR^=“start“] – der Wert des Attributes beginnt mit genau der Zeichenkette „start“ (als Beispiel title=“Startzeit“)
  • [ATTR$=“ende“] – der Wert des Attributes endet mit genau der Zeichenkeitte „ende“ (als Beispiel title=“Wochenende“)
  • [ATTR*=“lau“] – der Wert des Attributes enthält irgendwo die Zeichenkeitte „lau“ (als Beispiel title=“Urlaub“)

Was ich bei unterschiedlichen Projekten oft verwende, sind Links zu PDF-Dokumenten und Verweise zu gezippten oder gepackten Dateien. Schön finde ich es dann, wenn dem Besucher schnell ins Auge fällt, was er erhält, wenn er auf den jeweiligen Link klickt.

  • Ein Link zu einem Video Linktext.
  • Ein Link zu einem PDF-Dokument Linktext.
  • Ein Link zu einer ZIP-Datei Linktext.
  • Ein Link zu einer TAR-Datei Linktext.
  • Ein Link zu einer Datei mit der Endung (des Typs) „.xyz“) Linktext.

(Für diese Übung habe ich übrigens icons der Open Icon Library genutzt.)

Diese Darstellung ist recht einfach mit CSS3-Attributselektoren umgesetzt:

a[href$=“.mov“] {
padding-right: 55px;
background: url(/upload/video.png) no-repeat bottom right;
}
(Alle Elemente „a“ mit dem Attribut „href“ deren Wert des Attributes mit „.mov“ endet.)

a[href$=“.pdf“] {
padding-right: 55px;
background: url(/upload/acroread-2.png) no-repeat bottom right;
}
(Alle Elemente „a“ mit dem Attribut „href“ deren Wert des Attributes mit „.pdf“ endet.)

a[href$=“.zip“] {
padding-right: 55px;
background: url(/upload/7zip.png) no-repeat bottom right;
}
(Alle Elemente „a“ mit dem Attribut „href“ deren Wert des Attributes mit „.zip“ endet.)

a[href$=“.tar“] {
padding-right: 55px;
background: url(/upload/package.png) no-repeat bottom right;
}
(Alle Elemente „a“ mit dem Attribut „href“ deren Wert des Attributes mit „.tar“ endet.)

a[href$=“.xyz“] {
padding-right: 55px;
background: url(/upload/web.png) no-repeat bottom right;
}
(Alle Elemente „a“ mit dem Attribut „href“ deren Wert des Attributes mit „.xyz“ endet.)

Fazit:
Natürlich konnte man das gleiche Ziel auch schon länger z. B. durch die Zuweisung von Klassen (class=“pdf“, class=“zip“) erreichen, aber dieser Weg ist für mich der „sauberere“ Weg. Viele unterschiedliche Klassen blähen schnell die CSS auf und man (ich z. B.) verliert schnell den Überblick, gerade wenn Klassennamen nicht „sprechend“ vergeben werden.

Inspiration im Netz:
webmasterpro.de, collis.de, u.v.a.