CSS Inhalt

CSS hat eine Eigenschaft namenscontent. Sie kann nur mit den Pseudoelementen verwendet werden::afterund::before. Sie wird wie ein Pseudoselektor geschrieben (mit dem Doppelpunkt), aber sie wird Pseudoelement genannt, weil sie nichts auswählt, das tatsächlich auf der Seite existiert, sondern etwas Neues zur Seite hinzufügt. So sieht sie aus

.email-address::before {
   content: "Email address: ";
}

Mit diesem CSS könnten wir folgenden HTML haben

<ul>
   <li class="email-address">[email protected]</li>
</ul>

Und die Ausgabe wäre wie folgt

• E-Mail-Adresse: [email protected]

Vielleicht lässt Sie dieses Beispiel nicht sabbern, aber Pseudoelement-Inhalte können sehr nützlich sein und coole Dinge tun. Lassen Sie uns einige Ideen und Überlegungen durchgehen.

Hey! Das ist Inhalt, kein Design!

Die erste Bedenken könnten von einem Puristen der Trennung von Inhalt und Design kommen. Sie fügen buchstäblich Textinhalt mit CSS-Inhalt zur Seite hinzu, und das durchbricht diese Barriere. Der Standard ist fertig und die Idee implementiert, aber das bedeutet nicht, dass es nicht diskutierenswert ist. Wenn Sie eine Meinung zu CSS-Inhalt und seiner Verwendung haben, teilen Sie sie bitte in den Kommentaren mit.

Ich finde es fantastisch und perfekt für CSS geeignet. Betrachten Sie das obige Beispiel, bei dem wir allen Elementen mit der Klasseemail-addressden Text „E-Mail-Adresse: “ voranstellen. Das ist eine Design-Entscheidung, bei der entschieden wurde, dass das Voranstellen dieses Textes vor E-Mail-Adressen den Inhalt zur besseren Verständlichkeit klarer macht. Vielleicht gab es bei einem Redesign der Website weniger Platz, wo diese E-Mail-Adressen angezeigt wurden, und es wurde entschieden, dass anstelle des Voranstellens von Text ein kleines Symbol verwendet würde. Das passt zur Idee von CSS, da der HTML-Inhalt überhaupt nicht geändert werden muss; diese Änderung könnte ausschließlich mit CSS erreicht werden.

Ich werde morgen einen Artikel mit dieser Art von Idee veröffentlichen.

Verwendung von Sonderzeichen

Wenn Sie ein Sonderzeichen im CSS-Inhalt verwenden müssen, ist das etwas seltsam. Ich mache es so, dass ich die ASCII-Nummer für das Symbol herausfinde. Diese Tabelle mit Glyphen ist praktisch. Auf dieser Tabelle ist das Copyright-Symbol © © – also ist die ASCII-Nummer 169. Dann gebe ich diese Nummer in den Entity Conversion Calculator ein, der sie in das umwandelt, was Sie für CSS benötigen.

Hier sind einige zufällige nützliche Zeichen

\2018 – Linke einfache Anführungszeichen
\2019 – Rechte einfache Anführungszeichen
\00A9 – Copyright
\2713 – Häkchen
\2192 – Pfeil nach rechts
\2190 – Pfeil nach links

Beispiel-Trick: Verweis auf besuchte Links mit Häkchen

Markieren Sie Ihre besuchten Links mit Häkchen

#main-content a:visited::before {
   content:  "\2713 ";
}

Verwendung von Attributen

Sie können Attribute der Elemente, die Sie anvisieren, als Inhalt einfügen. Ein Ankerlink könnte beispielsweise ein Titelattribut haben

<a title="A web design community." href="https://css-tricks.de">CSS-Tricks</a>

Sie können auf dieses Titelattribut über die Content-Eigenschaft zugreifen, wie z.B.

a:before {
   content: attr(title) ": ";
}

Jedes Attribut kann auf diese Weise angesprochen werden, im Formatattr(name-des-attributs). Wenn Sie etwas in den HTML-Code einfügen möchten, um es für einen CSS-Inhaltszweck zu verwenden (aber nichts anderes), könnten Sie den neuen Präfix data- für Attribute in HTML5 verwenden.

Beispiel-Trick: CSS3 Tooltips

Tooltips für Links basierend auf demTitelAttribut

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover::after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20;
  border-radius: 5px;   
  box-shadow: 0px 0px 4px #222;  
  background-image: linear-gradient(#eeeeee, #cccccc);  
}

Dieses Beispiel verwendet dasTitelAttribut, und andere Beispiele dieser Art, die Sie im Web finden, verwenden ebenfalls das Titelattribut. Es ist wahrscheinlich das richtige. Beachten Sie jedoch, dass Browser ihre eigenen Tooltip-Popups haben. Wenn diese erscheinen, werden sie dies überdecken und komisch aussehen. Ich habe versucht, einen Screenshot des Problems zu machen, aber aus irgendeinem Grund hat es nicht funktioniert. Es gibt keine Möglichkeit, dies zu unterdrücken, außer dasTitelAttribut nicht zu verwenden. HTML5data-Attribute könnten hier erneut nützlich sein.

Zu berücksichtigende Punkte

• Firebug kann Pseudoelemente noch nicht anvisieren. Der Web-Inspektor in WebKit-Browsern kann sie anvisieren, zeigt aber nicht ihre Eigenschaften/Werte an. Ich habe gehört, dass die IE-Entwicklertools sie ebenfalls anvisieren könnten, aber ich bin mir bezüglich der Eigenschaften/Werte nicht sicher.
• In WebKit müssen sie blockfähig sein, um gedreht zu werden. Firefox kann Inline-Elemente/Pseudoelemente drehen.
• In Firefox 3.0 können Pseudoelemente nicht absolut positioniert werden.
• Sie können nicht animiert oder mit Übergängen versehen werden.

Beispiel-Trick: Schicke E-Mail-Link-Popouts

Ich hatte eine Idee, die ich ausprobieren wollte: Eine vertikale Liste von Namen, und wenn man mit der Maus darüberfährt, würden ihre E-Mail-Adressen darunter hervor- oder herausgleiten. Um den HTML-Code so sauber wie möglich zu halten, fand ich es cool, ein::afterPseudoelement und einen -webkit-transition zu verwenden, um das zu erreichen. Aber leider kann man ein Pseudoelement nicht animieren oder mit Übergängen versehen.

Mit der ::after/content-Methode habe ich ein funktionierendes Beispiel erstellt, es gleitet nur nicht heraus, wie ich es mir vorgestellt hätte. Mit<span>s habe ich die Idee umgesetzt, ebenfalls auf der Demoseite.

Demo ansehen

Beispiel-Trick: Vollständige Links in Druckstilen anzeigen

@media print {
     #main-content a[href]:after { " (" attr(href) ") "; }
}

Browserunterstützung / Barrierefreiheit

Alle wichtigen Browser (Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ und Internet Explorer 8+) (Siehe vollständige Tabelle) unterstützen CSS-Inhalte mit den ::after/::before Pseudoelementen, und der Standard hat vollen Kandidatenempfehlungsstatus.

Bezüglich der Barrierefreiheit bin ich mir der Situation einfach nicht 100%ig sicher. Ich habe versucht, VoiceOver mit Safari auf meinem Mac mit dem E-Mail-Popout-Links-Demo zu verwenden. Für beste Barrierefreiheit wäre das Ziel meiner Meinung nach, den gesamten Text vorlesen zu lassen, einschließlich des per CSS hinzugefügten Inhalts. Ich hatte Schwierigkeiten, das zu erreichen, aber ich dachte, ich hätte es einmal irgendwie geschafft. Ich war wirklich schlecht darin, VoiceOver zu benutzen, und fand es frustrierend, selbst auf den grundlegendsten Ebenen das zu erreichen, was ich tun wollte. Wenn jemand mehr über Barrierefreiheit in Bezug auf CSS-Inhalt weiß, würde ich sicher gerne mehr erfahren.

Mehr

Eine ganze Menge erstaunlicher Dinge, die Pseudoelemente tun können