CSS-generierte Inhaltstechnologie

Einführung

Die Content-Eigenschaft wurde in CSS 2.1 eingeführt, um generierte Inhalte zu den Pseudoelementen :before und :after hinzuzufügen. Alle gängigen Browser (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+) unterstützen diese Funktion. Darüber hinaus unterstützt Opera 9.5+ Inhaltsattribute für alle Elemente, nicht nur für die Pseudoelemente :before und :after.

Im Arbeitsentwurf „CSS 3 Generated Content“ wurden der Inhaltseigenschaft weitere Funktionen hinzugefügt – zum Beispiel können Inhalte eingefügt und im Dokument verschoben werden, um Fußnoten, Endnoten und Abschnittskommentare zu erstellen. Aber kein Browser hat den erweiterten Funktionsinhalt implementiert.

In diesem Artikel behandeln wir die Grundlagen der Arbeit mit generierten Inhalten und erläutern anschließend spezifische Techniken für deren Verwendung.

Ein paar Vorbehalte

Bevor wir näher auf dieses Thema eingehen, sei darauf hingewiesen, dass der generierte Inhalt

nur in modernen Browsern mit aktiviertem CSS funktioniert

Nicht über DOM verfügbar. Das ist purer Ausdruck. Insbesondere aus Sicht der Barrierefreiheit wird der generierte Inhalt von aktuellen Screenreadern nicht unterstützt.

Generierter Inhalt – die Grundlagen

Inhalt wird wie folgt verwendet:

h2:before {

content: "some text";

}

Dadurch wird „etwas Text“ h2 vor dem Anfang jedes Elements auf der Seite eingefügt.

Anstatt den Textwert des Inhaltsattributs einzugeben, können Sie auch den Attributwert attr() wie folgt verwenden:

a:after {

content: attr (href)

}

Dadurch wird der Inhalt jedes Elements nach dem Ende des a-Elements href eingefügt.

Beachten Sie, dass Sie den Attributnamen attr() ohne Anführungszeichen verwenden müssen, wenn Sie darauf verweisen.

Sie können auch den Zähler verwenden oder ein eingefügtes Bild verwenden, um eine dynamische numerische URL (/Pfad/zu/Datei) zu generieren. Schauen wir uns einige Beispiele an.

Zahleninhalt mit Zähler

Wenn Sie in einer wiederholten Folge von Elementen, wie Frage 1, Frage 2, Frage 3, inkrementelle Werte einfügen möchten, können Sie zum Erhöhen einen Zähler verwenden den Zählerwert und verwenden Sie dann den Inhalt. Zeigen Sie die Anzahl auf folgende Weise an:

ol {

Listenstiltyp: Keine

Zähler zurücksetzen: Segmentierter Zähler

}

li: vor {

Inhalt: „Kapitel“-Zähler (Stall);

Anti-Inkrement

}

In der ersten Regel verwenden Sie die Eigenschaft counter-reset, um den Zähler auf 1 zurückzusetzen. In der zweiten Regel hat jedes li-Element eine gedruckte Zeichenfolge, wobei X der aktuelle Wert des Zählers ist. Das letzte Attribut in der zweiten Regel – erhöht den Wert des Zählers um 1, bevor zum nächsten Element in der Liste übergegangen wird. Kapitel

Natürlich wird die Nummer nicht in Browsern angezeigt, die diese CSS-Funktion nicht unterstützen. Wenn dies irgendwo auf Ihrer Webseite verwirrend ist, lesen Sie Kapitel 10 für weitere Details. Es ist ein schmaler Grat zwischen der Generierung von rein dekorativem Inhalt oder einem tatsächlichen Teil des Inhalts, der in echtem HTML geschrieben werden sollte.

Ich habe eine Demo geschrieben, die die Erstellung eines Zählers mit generierten Inhalten veranschaulicht. Weitere Einzelheiten zu diesem Thema finden Sie in David Storeys ausgezeichnetem Artikel über die automatische Nummerierung mithilfe von CSS-Zählern.

Fügen Sie korrekte Anführungszeichen für mehrsprachige Inhalte ein

Verschiedene Sprachen verwenden unterschiedliche Zeichen für Anführungszeichen. Ein englisches Zitat würde so geschrieben werden:

„Nur jemand bringt dich dazu, es zu tun,

Ein norwegisches Zitat würde so geschrieben werden:

«Hvis du forteller meg nok en vits, såskal jegslådeg til jorden»»

Anstatt einfachen Text mit fest codierten Anführungszeichen in HTML zu verwenden, können Sie das q-Element verwenden

< q>Es funktioniert nur, wenn Jemand zwingt Sie dazu

und geben Sie Anführungszeichen für jede Sprache an in Ihrem CSS

/* Anführungszeichen für zwei Sprachen angeben */

:lang (en) > q { quotes: '"' '"' }

:lang(no) > q { quotes: "«" "»"}

/* Anführungszeichen vor und nach einfügen */

q:before { content : open-quote }

q:after { content: close-quote }

you Diese Technik kann mit jedem Element verwendet werden, nicht nur mit q (obwohl dies die offensichtlichste und semantischste Verwendung ist). ). Beachten Sie, dass Safari 3 (und niedriger) und IE 7 (und niedriger) das Anführungszeichen-Attribut nicht unterstützen. >

Schauen Sie sich meine Zitat-Plugin-Demo an, um dies in Aktion zu sehen

Text durch Bild ersetzen

Es gibt verschiedene Techniken zum Ersetzen von Bildern, jede mit ihren eigenen Vor- und Nachteilen. Dies ist eine weitere Möglichkeit, Text durch einen Bildinhalt zu ersetzen

Inhalt: URL (logo.png);

}

Der Vorteil dieser Technik zur Bildersetzung besteht darin, dass sie den Text wirklich ersetzt, sodass Sie nicht auf die Verwendung zurückgreifen müssen Höhe und Breite, um Platz für das Bild zu schaffen,

Texteinzug

oder Polsterung, um den Originaltext auszublenden.

Es gibt jedoch einige Nachteile:

Sie können nicht wiederholen Bilder oder verwenden Sie Bild-Sprites

Es funktioniert nur in Opera 9.5+, Safari 4+ und Chrome. Es unterstützt die Inhalts-URL auf allen Selektoren als Wertattribut, nicht nur :before oder :after

Es gibt keine Möglichkeit, This zu verwenden ist eine Möglichkeit, alternativen Text einzufügen, damit Screenreader Ihren Inhalt nicht verstehen können, indem sie das Bild ersetzen.

Um mehr zu erfahren, sehen Sie sich meine Demo zum Ersetzen von Bildern mithilfe von Inhalten an.

Linksymbol anzeigen

Sie können die Attributauswahl des Inhaltsattributs verwenden, um ein Symbol nach einem Link basierend auf dem Dateiformat, zu dem er gehört, oder einem externen Dateiformat zu rendern.

a[href $='.pdf']:after {

content:url(icon-pdf.png);

}

a [rel="external"]:after { /* Sie können auch a[href ^="http"]:after */

content:url(icon-external.png);

}

Die erste Regel verwendet einen CSS3-Selektor mit Teilstring-Übereinstimmung – href $='.pdf' bedeutet, dass der href am Ende des Werts das Attribut .pdf hat.

Aufgrund des

regulären Ausdrucks beziehen sich ^ und $ auf den Anfang bzw. das Ende der Zeichenfolge. Mit den CSS 3-Attributselektoren für den Teilstring-Abgleich [attribute^=value] und [attribute$=value] können Sie [attribute*=value]-Elemente abgleichen, deren Attributinhalt mit einem angegebenen Wert beginnt oder endet, während Sie alle darin enthaltenen Elemente auswählen Attribut Positionselement.

Dies ist eine Demo, die PDF-Dateien und externe Symbole auf Links zeigt.

Attributwerte als Inhalt verwenden

Wir haben bereits erwähnt, dass Sie mit content: attr(val) den Wert des Attributs eines Elements auf dem Bildschirm anzeigen können. Dies kann auf viele nützliche Arten genutzt werden – hier ein paar Beispiele.

URLs/Abkürzungen in CSS drucken

Wie im Artikel zum Drucken in getrennten Listen erwähnt, können Sie den generierten Inhalt nach dem Drucken zur Bereicherung Ihrer Seite verwenden. Geben Sie beispielsweise die URL des folgenden Links im Druck-CSS aus:

a:after {

content: "(" attr(href) ")";

}

Sie können die gleiche Methode verwenden, um die Erweiterung des abbr-Elements zu drucken. Fügen Sie einfach Folgendes zu Ihrem Druck-Stylesheet hinzu:

abbr: after {

content: "("attr(title)")";

}

Sehen Sie sich meine Druck-URL- und Abkürzungserweiterungsdemo an, um mehr zu erfahren.

Vorausschauend: attr() CSS3 Leistungsstark

Der CSS3-Wert- und Einheitenentwurf erweitert den Bereich der attr()-Ausdrücke – zusätzlich zur Rückgabe von Zeichenfolgen können auch Werte zurückgegeben werden, z Einheitentypen CSS-Farbe, CSS-Ganzzahl, Länge, Winkel, Zeit, Frequenz und andere Einheiten.

Zusätzlich zu benutzerdefinierten Datenattributen kann dies beim Rendern einfacher Diagramme, Grafiken und Animationen sehr hilfreich sein. Beispielsweise können wir die Hintergrundfarbe eines Elements basierend auf dem Attributwert festlegen. Dies kann in Anwendungen nützlich sein, die Farbpaletten im Web anzeigen. Wir können die Größe eines Elements auch basierend auf einem Wert angeben, der in einer benutzerdefinierten Dateneigenschaft festgelegt ist. Beispielsweise kann die Länge eines Balkens in einem Balkendiagramm durch eine Eigenschaft des Elements festgelegt werden, das den Balken darstellt. Leider hat diese Funktion eine niedrige

Priorität und wird in absehbarer Zeit nicht verfügbar sein.

Fazit

Ich hoffe, dieser Artikel hat Ihnen ein besseres Verständnis des Inhaltsattributs und seiner Verwendungsmöglichkeiten vermittelt. Da IE 8 nun auch Inhalte unterstützt, ist für uns klar, dass wir diese CSS-Funktion in unserer Produktionsarbeit nutzen können. Verwenden Sie es einfach dort, wo es angebracht ist, und berücksichtigen Sie die Auswirkungen auf die Barrierefreiheit, die der resultierende Inhalt weiterhin hat.

Das obige ist der detaillierte Inhalt vonCSS-generierte Inhaltstechnologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!