CSS: Externe Links kennzeichnen

Vielleicht haben sie es schon bemerkt, einen Browser auf Basis von Gecko vorausgesetzt, externe Links machen nun durch ein Icon auf sich aufmerksam.

Eine hilfreiche Sache, schließlich verlässt man über einen solchen Link nicht nur diese Seite, man muss auch ein neues Browserfenster hinnehmen. Freilich ist es nicht möglich Tausende Links über Nacht mit einer Grafik zu ergänzen. CSS musste einspringen.

CSS formatierte Links

Der Trick besteht darin jedem Link ein Icon als Hintergrund zuzuweisen. Interne Links werden durch eine zweite Regel ohne Grafik gezeigt.

 a[href^="http:"] {
background: transparent
url('/images/aoutside.gif') 100% 50% no-repeat;
padding-right: 10px;
}

      a[href^="http://drweb.de"],
a[href^="http://www.drweb.de"]
{
background: transparent;
padding-right: 0px;
}

Wer mehr über diese etwas komplizierten Regeln erfahren möchte, wird bei Kryogenix bedient. Der Internet Explorer und Opera können damit zwar (noch) nichts anfangen, weggenommen wird ihnen jedoch nichts. Apples Safari kann es und ebenso der noch nicht öffentliche Opera 7.2.

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.