Was ist ein CSS-Attributselektor?
CSS bietet eine Möglichkeit, Elemente basierend auf Attributen des Links zu stylen, anstatt nur auf dem Elementtyp. Zum Beispiel weißt du bereits, dass du ein Header-Element stylen kannst
h1 { color: blue; }Aber du kannst es noch spezifischer machen und nur Header-Elemente stylen, die ein Titel-Attribut haben
h1[title] { color: blue; }Du kannst es noch weiter treiben und nur Header-Elemente stylen, die bestimmte Attributwerte haben
h1[title="Go Home"] { color: blue; } /* Has the exact value "Go Home" in the title attribute */
h1[title~="Go Home"] { color: red; } /* Has the value "Go Home" somewhere in the title attribute */
h1[title^="Go Home"] {color: green; } /* Value of the title attribute starts with "Go Home" */
Was ist einzigartig an E-Mail-Links?
Ein E-Mail-Link unterscheidet sich von allen anderen Links dadurch, dass er immer mit "mailto:" beginnt, was der Befehl ist, den der Browser verwendet, um das Betriebssystem zu benachrichtigen, dass der Benutzer eine E-Mail an eine bestimmte E-Mail-Adresse mit dem Standard-E-Mail-Programm senden möchte. Wir können diese Ähnlichkeit zwischen Links zu unserem Vorteil nutzen, sodass wir CSS-Styling nur auf E-Mail-Links anwenden können.
Hier ist der Haken
a[href^="mailto"] { color: blue; }Das zielt auf alle Links mit einem href, der mit "mailto" beginnt ab.
Fertigstellung des Stylings
Jetzt, wo wir diese Links gezielt ausgewählt haben, können wir mehr tun, als sie nur blau zu machen. Wir können auch eine weitere mächtige CSS-Technik nutzen, die "content"-Eigenschaft. Die content-Eigenschaft erlaubt es Ihnen buchstäblich, Inhalte zu Seitenelementen hinzuzufügen, sogar Inhalte, die Sie direkt aus ihren eigenen Attributen gezogen haben! Mit einem Pseudo-Selektor geben Sie an, wo der Inhalt hinzugefügt werden soll, davor oder danach.
Werden wir ausgefallen und ziehen das Titel-Attribut aus unseren Links und fügen sie nach dem Link selbst hinzu, im Hover-Zustand des Links
a[href^="mailto"]:hover:after { content: attr(title); }Das wird funktionieren, aber es wird den Text direkt nach dem Link einfügen. Stellen wir also sicher, dass die Formatierung gut aussieht und fügen wir etwas Abstand und ein > Zeichen hinzu, um den Link vom Text zu trennen, der beim Überfahren mit der Maus hinzugefügt wird
a[href^="mailto"]:hover:after { content: " > " attr(title); }Wunderschön!
[BEISPIEL ANSEHEN]
Warum ist das besser?
- Allein das Auflisten der E-Mail-Adresse als Link impliziert keine "Aktion". Ich finde es abrupt, wenn man auf einen Link klickt und sich ohne Vorwarnung sein Mail-Client öffnet.
- Wenn Sie Ihrem Link einen Namen wie "E-Mail senden" geben, implizieren Sie diese Aktion.
- Das Beste aus beiden Welten: Jetzt können Sie Ihrem Link den Namen "E-Mail senden" geben, aber auch die E-Mail-Adresse anzeigen.
- Vorwärts-erweiternd (und rückwärtskompatibel). Diese Technik funktioniert nur in guten modernen Browsern, aber sie stürzt nicht ab. Ältere Browser sehen einfach den Link und er funktioniert einwandfrei.
dieser code hat einen fehler in IE.
So tolle Tipps, vielen Dank! Ich werde diese Technik auf jeden Fall verwenden, um Benutzer zu warnen, wenn ein Link zu einer externen Seite führt oder ein neues Fenster öffnet.
Schade für IE-Benutzer, aber naja... wenn man einen guten Browser hat, bekommt man die guten Features, oder? ;)
Definitiv ein Fehlschlag in IE 6 (Win 2K). Ich sehe, was Sie meinen, wenn ich das Beispiel in FF ansehe.
IE unterstützt derzeit keine Attributselektoren.
Dieser Code schlägt auch in IE 7 fehl
Danke Leute, ich habe am Ende des Artikels erwähnt, dass dies eine zukunftsweisende Technik ist, die nur in guten Browsern funktioniert =)
Das Coole ist, dass es in IE nicht kaputt geht, man bekommt nur den Spaß nicht.
Die Tatsache, dass die E-Mail weiterhin korrekt funktioniert, ist gut. Ich habe es jetzt auf meiner aktuellen Website im Einsatz, da die meisten meiner Besucher glücklicherweise FF benutzen.
Ich weiß, dass dies von den meisten semantisch/standardsorientierten Programmierern missbilligt wird, aber...
um hoffentlich Spam zu bekämpfen, habe ich mich entschieden, dies zu verwenden, ohne meinem Mailto-Link einen Titel zu geben, und stattdessen die E-Mail-Adresse vollständig in den CSS-Befehl "add content" aufgenommen.
Wenn Sie sich Sorgen machen, dass es in IE nicht richtig gerendert wird, könnten Sie dies umkehren und den Linktext verwenden, um die E-Mail-Adresse anzugeben, und dann über CSS Inhalt VOR dem Text hinzufügen, um "E-Mail senden" zu sagen, dann bietet es den angenehmen Übergang vor dem Klicken, gibt eine Handlungsaufforderung und hat irgendwie das Beste aus beiden Welten.
Ich mag das "content"-Attribut nicht. CSS ist für Stil, nicht für Inhalt.
Das habe ich noch nie zuvor gesehen!
Ich mag es, also danke Chris :)
Wenn Sie möchten, dass es in IE funktioniert, sollten Sie diese JS-Bibliothek verwenden
http://dean.edwards.name/IE7/
Hey, danke für diesen Link Rob, das muss ich UNBEDINGT ausprobieren, es scheint ziemlich genial.
Gute Sache, danke!
#8, Stil ist ein weiter Begriff, der allzu oft nur statischen Inhalten zugeordnet wird. Der Autor präsentiert eine interessante Methode zur Steigerung der Sichtbarkeit und Bedeutung durch das „content“-Attribut. Während die Verwendung von „content“ normalerweise eine Änderung von Daten impliziert, enthüllt dieser Ansatz lediglich zuvor definierte Daten (den Titel des Ankers).
Ich werde nicht darüber streiten, ob es semantisch ist, aber die Nützlichkeit dieses Ansatzes ist das Interessanteste. Ich würde gerne sehen, wie Designer dies auf andere kreative Weise umsetzen.
Attributselektoren sind sehr cool. Wenn IE8 diese korrekt implementieren würde, wäre das schön!
Aus irgendeinem Grund funktioniert es in meinem Firefox 2 nicht.
Ok, die Erweiterung Better Gmail 2 für Firefox hat einen Konflikt mit diesem Effekt. :(
Nette Idee, aber funktioniert nicht in meinem IE
danke, gute Ressource
Diese Selektoren sind in der Tat großartig, aber definitiv nützlicher in anderen Fällen, einfach weil E-Mail-Links erkennbarer sind, wenn sie wie E-Mail-Links aussehen (daher ist "[email protected]" ein besserer Link-Name als "E-Mail senden"). Dies hat sich seit 2002 (und früheren Zeiten) nicht wirklich geändert (und früher). Das Anzeigen der E-Mail-Adresse hinter einem Text (wie in Ihrem Beispiel) sieht wie eine Alternative aus, aber hier ist es für Tastaturbenutzer nicht wirklich zugänglich, und der Versuch, die E-Mail-Adresse zu kopieren, enthüllt noch ein spezifisches Usability-Problem.
Schöner Artikel. Im TITLE-Attribut des Links verwende ich "öffnet Ihr E-Mail-Programm" als Hinweis für den Benutzer. Ich habe auch kleine E-Mail-Symbole als Hintergrundbilder am Ende des Links als weiteren visuellen Hinweis verwendet.
Persönlich HASSE ich es, wenn ein Link etwas Unerwartetes tut... wie das Öffnen eines PDFs.
Vielen Dank,
Jim Summer
Jacksonville Web Design
http://tentonweb.com/
Danke für diesen Link Rob, den werde ich bei meinem nächsten Projekt ausprobieren!!
Holger
Dies kann in IE 7 besser als in Firefox zum Laufen gebracht werden.
Ohne beleidigend zu sein für euch FF-Fans, aber ich verbringe VIEL mehr Zeit damit, CSS in FF konsistent zum Laufen zu bringen, als ich es für jeden anderen Browser tun muss – und wieder, keine Beleidigung beabsichtigt, aber "Wer das Sagen auf dem Markt hat, legt die Standards fest..."
Aber es ist trotzdem ein guter Trick.
Toller Tipp/Trick, danke fürs Posten.
@Tinker
Wenn Sie Ihr CSS nach den Standardspezifikationen schreiben, werden Sie sehen, dass Firefox genau das tut, was es tun soll. Sie verwenden nicht standardmäßiges CSS, das für IE funktioniert. Es ist schwer, Cross-Browser-Kompatibilität zu erreichen, aber ich würde lieber für FF als für IE programmieren.
„Ich mag das „content“-Attribut nicht. CSS ist für Stil, nicht für Inhalt.“
Aber was in diesem Beispiel enthüllt wird, ist immer noch Teil des Inhalts – es ist im HTML als Teil des Titelattributs enthalten. Das CSS kontrolliert lediglich die Darstellung dessen, was bereits im HTML vorhanden ist. Ich verstehe Ihren Punkt, dass CSS für die Präsentation und nicht für den Inhalt bestimmt ist, aber die content-Eigenschaft ist Teil der CSS-Spezifikation. Warum also nicht davon Gebrauch machen, wenn Sie können?
Ich stimme Kommentar #25 zu.
Dieses Beispiel betrachtet nicht tatsächlich den *Inhalt* (wie der Text zwischen HTML-Tags), sondern das *Attribut* des **A**-Tags. Ich glaube, dass dies ein gültiges Verhalten aus CSS-Sicht ist, genauso wie die Verwendung des **style**-Attributs bei der Anwendung unterschiedlicher CSS-Codes auf HTML-Tags desselben Typs.
Tatsächlich ist die Funktionalität vorhanden, und da sie sich als wertvoll erweist, warum sie nicht nutzen? Ich persönlich werde sie jetzt nutzen, wo ich weiß, dass sie existiert. Das einzige Problem ist, wann IE sie unterstützen wird...
Hier ist ein weiterer Anwendungsfall – für den Druck. Anstatt nur den unterstrichenen Text zu sehen, der ein Hyperlink ist, würde der Druck auch die tatsächliche URL des Links anzeigen, direkt nach dem gedruckten Hyperlink... funktioniert in Firefox, keine Auswirkung in IE6... habe nicht in IE7 getestet.
Dies würde URLs zu Hyperlinks nur innerhalb des Hauptinhaltsdivs drucken, umschlossen von « und ».
#content a:after {
content: " «" attr(href) "»";
}
Vielen Dank,
Jim Summer
Jacksonville Web Design http://tentonweb.com/
Sehr schöner Tipp, Jim. Ich muss mir wirklich mal eine Print-Stylesheet für CSS-Tricks besorgen, ich werde versuchen, das heute in Angriff zu nehmen (hoffentlich).
Es gibt auch einen Kommentar auf CSS Zone über die Verwendung von JQuery dafür, falls jemand interessiert ist.
Toller Tipp.. Danke :D
Wie bereits erwähnt, unterstützt IE keine Attributselektoren. Die einfache Lösung ist, Mailto-Links als Links einer bestimmten Klasse zu kennzeichnen. Zusätzliche (nützliche) Blickfänge durch Anwenden eines Hintergrundbilds einer Briefmarke usw.
Auf jeden Fall wäre heutzutage etwas viel Nützlicheres (wahrscheinlich nicht im CSS-Bereich) die Möglichkeit, Ihren Webmail-Dienst Ihrer Wahl zu starten, um die E-Mail zu verfassen, anstatt die Standardanwendung des Systems zu starten. Das ist für Leute mit Windows sehr nervig, und viele dieser Benutzer verwenden Webmail. Die Standardeinstellung unter Windows ist, Outlook Express zu starten, es sei denn, Sie besitzen MSOffice... und Outlook Express wird von MS nicht einmal mehr unterstützt... also, raten Sie mal, warum es standardmäßig startet.