Giltig CSS Innehåll

0
14

Det är ett innehåll egendom i CSS som är gjort för att användas tillsammans med ::före och ::after pseudo-element. Det sprutar innehållet i elementet.

Här är ett exempel:

<div
data-done=”&#x2705;”
class=”e-post”>
chriscoyier@gmail.com
</div>
.e-post::innan {
innehåll: attr(data-gjort) ” Epost: “; /* Här får införas innan den e-postadress */
}

Den egendom i allmänhet tar allt du orkar i det. Men det finns några ogiltiga värden det kommer inte att acceptera. Jag hörde från någon nyligen som blev förvirrad av detta, så jag hade en liten lek med mig själv och lärt mig några saker.

Detta fungerar bra:

/* Giltiga */
::efter {
innehåll: “1”;
}

…men det gör det inte:

/* Ogiltig, inte en sträng */
::efter {
innehåll: 1;
}

Jag är inte helt säker på varför, men jag antar att det beror på att 1 är en enhet mindre antal (dvs 1 vs 1px) och inte en sträng. Du kan inte lura den heller! Jag försökte vara smart så här:

/* Ogiltig, inga tricks */
::efter {
innehåll: “” 1;
}

Du kan exportera siffror från attribut men som ni kanske misstänker:

<div data-priset=”4″>Kaffe</div>
/* Detta “verk” */
div::efter {
innehåll: “$” attr(data-pris);
}

Men naturligtvis du skulle aldrig använda användargenererat innehåll för att få viktig information som pris, eller hur?! (Snälla gör det inte. Det är inte mycket tillgänglig, inte heller är valbar text.)

Även om du kan få och visa på det antal, det är bara en sträng. Du kan inte riktigt göra något med det.

<div data-priset=”4″ data-försäljning-modifier=”0.9″>Kaffe</div>
/* Inte kommer att hända */
div::efter {
innehåll: “$”
calc(attr(data-pris) * attr(data-försäljning-modifierare));
}

Du kan inte använda siffror, tid:

/* Nej */
::efter {
innehåll: calc(2 + 2);
}

Heads up! Försök inte att sammanfoga strängar som du kan göra i PHP eller JavaScript:

/* Detta kommer att bryta */
::efter {
innehåll: “1” . “2” . “3”;
innehåll: “1” + “2” + “3”;

/* Använd mellanslag */
innehåll: “1” “2” “3”;
/* Eller inget */
innehåll: “1 2 3”;
/* Typ av citat (enkel eller dubbel) spelar ingen roll, men innehållet kommer inte tillbaka från attr() behöver anges. */
}

Det är en sak i spec för att konvertera attribut i den aktuella typen snarare än att behandla dem alla som strängar…

<trä längd=”12″ />
trä {
bredd: attr(längd em); /* eller andra värden som “nummer”, “px”, eller “url” */
}

…men jag är ganska säker på att det inte fungerar någonstans ännu. Plus att den inte hjälper oss med pseudo-element i alla fall, eftersom strängar som redan fungerar och siffror inte.

Den person som nådde ut till mig via e-post var särskilt förvirrad varför de inte kunde använda calc() på innehåll. Jag är inte säker på att jag kan hjälpa dig att göra matte i den här situationen, men det är värt att veta är att pseudo-element kan vara räknare, och dessa räknare kan göra sin egen begränsade form av matematik. Till exempel, här är en räknare som börjar kl 12 och steg med -2 för varje element på en nivå som DOM.

Se Pennan Bakåt Dubbel Nedräkning av Chris Coyier (@chriscoyier) på CodePen.

Den enda sak som vi inte har nämnt här är att en pseudo-element kan vara en bild. Till exempel:

s:innan {
innehåll: url(image.jpg);
}

…men det är konstigt begränsad. Du kan inte ens ändra storlek på bilden. _(ツ)_/

Mycket vanligare är att använda en tom sträng för värde (innehåll: “”;) som kan göra saker som att rensa flyter men också vara placerade, medelstora och har en bakgrund av sina egna.

SHARE
Previous articleGyldig CSS Innhold
Next articleValid CSS Content