Valid CSS Inhalt

0
30

Es ist eine content-Eigenschaft in CSS, die Verwendung im tandem mit den ::before und ::after pseudo-Elemente. Es injiziert Inhalt in das element.

Hier ein Beispiel:

<div
Daten-fertig=”&#x2705;”
class=”email”>
chriscoyier@gmail.com
</div>
.E-Mail::before {
Inhalt: attr(Daten-erledigt) ” E-Mail: “; /* hierdurch wird eingefügt, bevor die E-Mail-Adresse */
}

Die Immobilie dauert in der Regel alles, was Sie fallen in es. Es gibt jedoch einige ungültige Werte werden nicht akzeptiert. Ich hörte von jemandem vor kurzem, war verwirrt, so hatte ich ein wenig mit ihm spielen mich und lernte ein paar Dinge.

Dies funktioniert gut:

/* Gültig */
::after {
Inhalte: “1”;
}

…aber das nicht:

/* Ungültige, nicht auf einen string */
::after {
Inhalte: 1;
}

Ich bin mir nicht ganz sicher, warum, aber ich kann mir vorstellen, es ist, weil 1 ist eine Einheit-weniger Zahl (d.h. 1 vs. 1px) und nicht einen string. Können Sie nicht einen trick anwenden! Ich habe versucht, schlau zu sein wie diese:

/* Ungültige, keine tricks */
::after {
Inhalt: “” 1;
}

Sie können die output-zahlen von Parametern, obwohl, wie Sie vielleicht vermuten:

<div data-price=”4″>Kaffee</div>
/* Dieses “Werk” */
div::after {
Inhalt: “$” attr(data-Preis);
}

Aber natürlich würde Sie nie verwenden generated content für wichtige Informationen wie einen Preis, richtig?! (Bitte nicht. Es ist nicht sehr zugänglich, noch ist der text frei wählbar.)

Obwohl Sie bekommen können, und die Anzeige, dass die Nummer, es ist nur ein string. Sie können nicht wirklich etwas tun.

<div data-price=”4″ data-sale-modifier=”0.9″>Kaffee</div>
/* Das wird nicht passieren */
div::after {
Inhalt: “$”
calc(attr(Daten-Preis) * attr(Daten-Verkauf-Modifikator));
}

Sie können nicht zahlen, Zeitraum:

/* Nein */
::after {
Inhalt: calc(2 + 2);
}

Heads-up! Versuchen Sie nicht, die Verkettung von strings, wie Sie vielleicht in PHP oder JavaScript:

/* Diese Pause */
::after {
Inhalt: “1” . “2” . “3”;
Inhalt: “1” + “2” + “3”;

/* Leerzeichen */
Inhalt: “1” “2” “3”;
/* Oder nichts */
Inhalt: “1 2 3”;
/* Die Art der Anführungszeichen (einfach oder doppelt) egal, aber der Inhalt nicht wieder von attr() muss zitiert werden. */
}

Es ist eine Sache, die in der Spezifikation für die Konvertierung von Attributen in der eigentlichen Art, anstatt Sie zu behandeln wie alle Saiten…

<wood length=”12″ />
Holz {
Breite: attr(Länge em); /* oder andere Werte wie “Anzahl”, “px” oder “url” */
}

…aber ich bin mir ziemlich sicher, dass nicht irgendwo noch. Plus, es hilft uns nicht mit pseudo-Elemente sowieso, da die Saiten schon arbeiten und zahlen nicht.

Die person, die mich über E-Mail war besonders verwirrt, warum Sie nicht nutzen konnten calc() auf den Inhalt. Ich bin mir nicht sicher, ich kann dir helfen, Mathematik in dieser situation, aber es lohnt sich zu wissen, dass pseudo-Elemente Zähler, und zu den Indikatoren können Ihre eigene eingeschränkte form der Mathematik. Für Beispiel, hier ist ein Zähler, der beginnt am 12 und Schritten von -2 für jedes element auf dieser Ebene in der DOM.

Finden Sie den Stift nach Hinten Doppel-Countdown von Chris Coyier (@chriscoyier) auf CodePen.

Die einzige andere Sache, die wir noch nicht erwähnt ist hier, dass ein pseudo-element kann ein Bild sein. Zum Beispiel:

p:before {
content: url(image.jpg);
}

…aber es ist unheimlich begrenzt. Sie können nicht einmal das Bild vergrößern. _(ツ)_/

Viel häufiger ist Sie mit einer leeren Zeichenkette für den Wert (Inhalt: “”;), die Dinge tun kann, wie klar schwimmt, sondern sich auch positioniert, dimensioniert und haben einen hintergrund seiner eigenen.

SHARE
Previous articleValid CSS Content
Next articleEen geldige CSS-Inhoud