CSS Styles: Links in Abhängigkeit der Url oder des Dateityps formatieren

Ich bin da über eine interessante Sache gestolpert, die einem bei so manchen Webprojekt etwas Arbeit sparen könnte. Öfters hatte man schon mal die Vorgabe einen Dokumenten-Link mit einem dem Dateityp entsprechenden Icon zu versehen. Bislang musste man das entwender mittels Javascript lösen oder gleich beim Seitenaufbau auf dem Webserver entsprechend berechnen.

Anscheinend bieten aber neuere Versionen des CSS-Standarts die elegante Möglichkeit Styles in Abhänigkeit der URL eines Links zu definieren. So könnte man jeweils für einen Dateityp ein entsprechendes Icon positionieren. Hier ein kleines Beispiel, wie so etwas als Stylesheet ausschaut..

a[href^="http://"] {
        color: blue;
}

a[href^="ftp://"] {
        color: yellow;
}

a[href^="mailto:"] {
        color: red;
}

a[href$=".pdf"] {
        color: green;
}

Ich finde das ist eine sehr elegante Technik mit Potenzial für mehr.

Update

Diese Technik oder auch „Substring matching attribute selectors“ genannt, ist bestandteil von CSS Version 3 und erfordert damit auch eben einen Webbrowser der mit solchem umgehen kann.

 

Links

http://joshualuckers.nl/2010/08/07/style-links-depending-on-url-or-file-format

Send to Kindle
Kommentar schreiben

1 Kommentare.

  1. mal sehen ob die neuen Anti-SPAM Massnahmen bei den Kommentaren Wirkung zeigen ..

Kommentar schreiben


Hinweis - Du kannst dies benutzenHTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>