Kawałek Kodu

W poprzednim wpisie (Counter and content are kings, czyli zmienna CSS jako wartość dla właściwości content), usadziliśmy na tronie counter i content, choć brakuje chyba jeszcze nadwornego błazna albo czarodzieja. Bo to co dziś Ci pokażę może z jednej strony wywołać lekki uśmiech i drapanie w głowę, a z drugiej zdziwienie i... drapanie w głowę.

Jarmark rozmaitości.

Jeśli chcemy dla właściwości content przypisać wartość liczbową (stricte liczbową, całkowitą), należy użyć właściwości counter. To już wiemy. Ale czy da się content przypisać string? Spróbujmy z metodą, która w poprzednim wpisie nie działała.

<div style="--zmienna:abc"></div>

+

div:before {
  content: var(--zmienna);
}

Sztuczka się nie udała... Ale przecież wiemy, że stringi umieszcza się w pojedynczych albo podwójnych cudzysłowach.

<div style="--zmienna:'abc'"></div>

Sim sala bim! Działa!

Kuglarska praktyka.

Teraz kilka udanych i nieudanych sztuczek.

<div style="--kat:'75deg'"></div>

+

div {
  width: 200px;
  height: 200px;
  background: #f00;
  transform: rotate(var(--kat));
}

div:before {
  content: var(--kat);
}

W powyższej zadziała przekazanie wartości do content, ale nie do transform. Transform przyjmie niepoprawną postać: rotate('75deg');

<div style="--kolor:red"></div>

+

div {
  width: 200px;
  height: 200px;
  background-color: var(--kolor);
}

div:before {
  content: var(--kolor);
}

Tu niby mamy do czynienia ze stringiem, ale dla content musiałby być w cudzysłowach. Natomiast kolor tła zadziała poprawnie, bo to swego rodzaju stała CSS. Tak będzie z każdą wartością znakową właściwości (fixed, scroll, none, inline-block, itd.). I nie, nie podstawi się tu wartość koloru czerwonego, bo zresztą w jakiej formie miałaby się podstawić, hex, rgb, rgba? A z wartościami dla display to już w ogóle!

I kolejna sztuczka:

<div style="--kolor:'red'"></div>

Tym razem wyświetlony zostanie tekst w content, ale DIV nie będzie mieć koloru tła. Czyli bez cudzysłowów możemy użyć jako wartość dla właściwości, ale nie dla content. Z cudzysłowami natomiast możemy użyć w content, ale nie zadziała jako wartość dla innych właściwości.

Łącząc przygody głównych bohaterów z powiązanego, głównego wpisu oraz perypetii ze stringami z dzisiejszego spin-off, wygląda to tak:

Przydatne linki:
Counter and content are kings, czyli zmienna CSS jako wartość dla właściwości content