Gyldig CSS Innhold

0
35

Det er et innhold eiendom i CSS som er laget for bruk i tandem med den ::før og ::etter pseudo-elementer. Det injiserer innholdet i elementet.

Her er et eksempel:

<div
data-ferdig=”&#x2705;”
class=”e-post”>
chriscoyier@gmail.com
</div>
.e-post::før {
innhold: attr(data-gjort) ” E: “; /* Dette blir satt inn før det e-postadresse */
}

Eiendommen tar vanligvis noe du slipper i det. Det er imidlertid noen ugyldige verdier det vil ikke godta. Jeg har hørt fra noen som nylig ble forvirret av dette, så hadde jeg en liten leke med det selv og lærte et par ting.

Dette fungerer fint:

/* Gyldig */
::etter {
innhold: “1”;
}

…men dette betyr ikke:

/* Ugyldig, ikke en string */
::etter {
innhold: 1;
}

Jeg er ikke helt sikker på hvorfor, men jeg antar det er fordi 1 er en enhet-mindre antall (dvs. 1 vs. 1px) og ikke en streng. Du kan ikke lure det heller! Jeg prøvde å være flink som dette:

/* Ugyldig, ingen triks */
::etter {
innhold: “” 1;
}

Du kan sende tall fra attributter om, som du kanskje mistenker:

<div data-pris=”4″>Kaffe</div>
/* Dette som “virker” */
div::etter {
innhold: “$” attr(data-pris);
}

Men selvfølgelig, vil du aldri bruker generert innhold for viktig informasjon som en pris, ikke sant?! (Vennligst ikke. Det er ikke veldig tilgjengelig, eller er teksten velges.)

Selv om du kan komme og vise at antall, det er bare en streng. Du kan egentlig ikke gjøre noe med det.

<div data-pris=”4″ data-salg-modifikator=”0.9″>Kaffe</div>
/* Ikke skje */
div::etter {
innhold: “$”
calc(attr(data-pris) * attr(data-salg-modifier));
}

Du kan ikke bruke tall, periode:

/* Nope */
::etter {
innhold: calc(2 + 2);
}

Heads up! Ikke prøv å slå sammen strenger som du kan i PHP eller JavaScript:

/* Disse vil bryte */
::etter {
innhold: “1” . “2” . “3”;
innhold: “1” + “2” + “3”;

/* Bruk mellomrom */
innhold: “1” “2” “3”;
/* Eller ingenting */
innhold: “1 2 3”;
/* Type tilbud (enkel eller dobbel) spiller ingen rolle, men innholdet ikke kommer tilbake fra attr() trenger å bli sitert. */
}

Det er en ting i spec for konvertering av egenskaper i den faktiske typen snarere enn å behandle dem alle som strenger…

<wood lengde=”12″ />
tre {
bredde: attr(lengde em); /* eller andre verdier som “number”, “px”, eller “url” */
}

…men jeg er ganske sikker på at ikke fungerer ennå. Plus, det hjelper oss ikke med pseudo elementer likevel, siden strenger allerede jobber og tallene ikke.

Personen som nådde ut til meg over e-post var spesielt forvirret hvorfor de var ikke i stand til å bruke calc – () på innhold. Jeg er ikke sikker på om jeg kan hjelpe deg å gjøre matematikk i denne situasjonen, men det er verdt å vite at pseudo-elementer kan være tellere, og de tellere kan gjøre sine egne begrensede form av matematikk. For eksempel, her er en teller som starter kl 12 og trinn ved -2 for hvert element på det nivået i DOM.

Se Penn Bakover Dobbeltrom Nedtelling av Chris Coyier (@chriscoyier) på CodePen.

Den eneste andre tingen vi ikke har nevnt her er at en pseudo-element kan være et bilde. For eksempel:

p:før {
innhold: url(image.jpg);
}

…men det er nifs begrenset. Du kan ikke selv endre størrelsen på bildet. _(ツ)_/

Mye mer vanlig er å bruke en tom streng for verdien (innhold: “”;) som kan gjøre ting som klart flyter, men også plasseres, størrelse og har en bakgrunn av sine egne.