Een geldige CSS-Inhoud

0
29

Er is een content eigendom in CSS die is gemaakt om te gebruiken in combinatie met de ::before en ::after pseudo-elementen. Het injecteert inhoud in het element.

Hier is een voorbeeld:

<div
data-done=”&#x2705;”
class=”email”>
chriscoyier@gmail.com
</div>
.e-mail::before {
inhoud: attr(data-klaar) ” Email: “; /* Dit wordt ingevoegd vóór het e-mail adres */
}

De eigendom in het algemeen vindt u alles wat u drop er in. Echter, er zijn een aantal ongeldige waarden zal het niet accepteren. Ik hoorde van iemand die onlangs was in de war door dit, dus ik had een beetje spelen met mezelf en een paar dingen geleerd.

Dit werkt ook prima:

/* Geldig */
::after {
inhoud: “1”;
}

…maar deze niet:

/* Ongeldig, niet een string */
::after {
inhoud: 1;
}

Ik ben niet helemaal zeker waarom, maar ik veronderstel dat het is omdat 1 is een unit-minder aantal (d.w.z. 1 vs. 1) en niet een string. Kunt u niet verleiden het! Ik probeerde slim te zijn, zoals deze:

/* Ongeldig, geen trucs */
::after {
inhoud: “” 1;
}

U kunt de uitgang van de nummers van attributen hoewel, als je zou vermoeden:

<div data-prijs=”4″>Koffie</div>
/* Dit “werken” */
div::after {
inhoud: “$” attr(data-price);
}

Maar natuurlijk, je zou nooit gebruik generated content voor belangrijke informatie, zoals de prijs, toch?! (Gelieve niet. Het is niet erg toegankelijk is, noch is de tekst te selecteren.)

Ook al kun je het ophalen en weergeven van dat nummer, het is gewoon een string. Je kunt niet echt van alles mee doen.

<div data-prijs=”4″ data-verkoop-modifier=”0.9″>Koffie</div>
/* Niet gaat gebeuren */
div::after {
inhoud: “$”
calc(attr(data-prijs) * attr(data-verkoop-modifier));
}

U kunt geen gebruik maken van getallen, periode:

/* Nee */
::after {
inhoud: calc(2 + 2);
}

Heads up! Probeer niet het samenvoegen van strings, zoals je misschien in PHP of JavaScript:

/* Deze zal breken */
::after {
inhoud: “1” . “2” . “3”;
inhoud: “1” + “2” + “3”;

/* Gebruik spaties */
inhoud: “1” “2” “3”;
/* Of niets */
inhoud: “1 2 3”;
/* Het type van de offerte (enkel of dubbel) maakt niet uit, maar de inhoud niet terug te komen van attr() hoeft te worden aangehaald. */
}

Er is een ding in de spec-voor het omzetten van de attributen in het werkelijke type in plaats van hen te behandelen alle snaren…

<hout lengte=”12″ />
hout {
breedte: attr(lengte em); /* of andere waarden als “aantal”, “px” of “url” */
}

…maar ik ben vrij zeker dat werkt niet overal, maar toch. Plus, het maakt ons niet helpen met pseudo-elementen hoe dan ook, sinds de snaren al het werk en de cijfers niet.

De persoon die bereikt mij via e-mail werd specifiek in de war waarom ze niet in staat waren om gebruik calc() op de inhoud. Ik weet niet of ik kan je helpen met wiskunde in deze situatie, maar het is de moeite waard te weten dat pseudo-elementen kunnen worden tellers, en die items kunnen hun eigen beperkte vorm van wiskunde. Bijvoorbeeld, hier is een teller die begint op 12 en stappen -2 voor elk element bij dat niveau in de DOM.

Zie de Pen naar Achteren Dubbel Countdown door Chris Coyier (@chriscoyier) op CodePen.

Het enige wat we nog niet genoemd hier is dat een pseudo-element kan een afbeelding zijn. Bijvoorbeeld:

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

…maar het is vreemd beperkt. Je kunt niet eens de grootte van de afbeelding. _(ツ)_/

Veel vaker is het gebruik van een lege tekenreeks voor de waarde (inhoud: “”;) die kan dingen doen, zoals duidelijk drijft, maar ook worden gepositioneerd in grootte en hebben een achtergrond van zijn eigen.