CSS Custom Properties v praxi s přesahem do teorie 13. 11. 2018

10. října 13. listopadu 2018

Zadání: mapa dodavatelů

• interaktivní mapa dodavatelů restaurace, kterou si budou sami spravovat

Řešení (jedno z mnoha)

• absolutně pozicované ikony nad obrázkem mapy
• převod zeměpisných souřadnic na CSS (počátek aj. záludnosti) => trocha matematiky a trpělivosti (pokus omyl)
• CSS souřadnice v procentech, kvůli responzivitě

Z Česka do Céeseska

/* Převod zeměpisných souřadnic ČR na CSS (v %) */

Ymax = 51.05 ~ nejsevernější bod
Ymin = 48.55 ~ nejjižnější bod
Xmax = 18.66 ~ nejvýchodnějí bod
Xmin = 12.1 ~ nejzápadnější bod
X0 = 0.067666667 = (Xmax ‒ Xmin)/100
Y0 = 0.025 = (Ymax ‒ Ymin)/100

x = 100% - (Xmax - longitude)/X0 ~ left
y = (Ymax - latitude)/Y0 ~ top

Note:

• pokus/omyl a něco čmárání, matematici prominou
• nechtěl jsem se babrat s výpočtem při ukládání uživatelských dat, modifikace CMS, nutná => nechci, proto výpočet až na frontendu, a to přímo v CSS
• uživatel zkopíruje z map.cz hodnotu ve správném formátu (popsáno v CMS)

CSS

.supplier {
  position: absolute;
  top: calc(1%*(51.05 - var(--latitude))/0.025);
  left: calc(100% - 1%*((18.8666 - var(--longitude))/0.0676));
}

Pozor, v calc() nutno vynásobit vypočtené jednotkou, zde %!

HTML

…

Hodnoty do style přes CMS.

Něco teorie o CSS Custom Properties

• jsou to vlastnosti (na míru)
• z toho plyne, že
  • se dědí
  • vnímají kaskádu
  • deklarují se vždy uvnitř {} a pro nějaký selektor
• volají se pomocí funkce var() se dvěma parametry: název vlastnosti, výchozí hodnota (nepovinné).

Note:

• 2 překážky k rozšířenějšímu používání
  • brzda z Redmondu
  • CSS variables => marketing a zjednodušení (proč, když mám proměnné v preprocesoru)
• obě se dají překonat, nastíním jak

.alert {
    --color: #f90;
    --weight: 700;
}

p {
    color: var(--color, #444);
    font-weight: var(--weight, 400);
}

Výchozí text
Zvýrazněný text

Jak používat Vlastnosti na míru

Smashing Book 6

A Strategy Guide To CSS Custom Properties, by Mike Riethmuller

(wheetzutz by Tomáš Kout)

Kombinovat s preprocesory, směle do toho

// předcházejí deklarace sassích proměnných
:root {
    --color: #{$text-color};
    --weight: #{$font-weight-normal};
}
.alert {
    --color: #{$alert-color};
    --weight: #{$font-weight-bold};
    --hue: 36;
}
p {
    color: var(--color);
    font-weight: var(--weight);
    background-color: hsl(calc(var(--hue) + 20), 70%, 80%);
}

Pozn.: $var je platná hodnota, pokud chceme $proměnnou vypsat,
musíme ji #{$interpolovat}! Platí pro Sass, v LESSe netřeba.

Note:

• formátováno s ohledem na rozměry slidu
• Globální proměnné jsou většinou statické => preprocesor.
• Pokud se CSS vlastnost mění (media query, kontext), zvaž použití custom property.
• zvaž používání HSL(A)/RGB(A) zápisu barev => můžeš využít custom properties
• nepřechytrač to…

Měň hodnotu, ne proměnnou

/* Tudy ne, přátelé. */
:root {
    --button-sm: 1em;
    --button-md: 1.5em;
    --button-lg: 2em;
}
.btn { font-size: var(--button-sm); }

@media screen and (min-width: 600px) {
    .btn { font-size: var(--button-md); }
@media screen and (min-width: (900px) {
    .btn { font-size: var(--button-lg); }
}

Note:

• pozor na návyk z preprocesoru

Odděluj logiku od dezénu.

/* Tudy jede kočár…! */
$button-sm: 1em; $button-md: 1.5em; $button-lg: 2em;

.btn { --button-size: #{$button-sm}; }

@media screen and (min-width: 600px) {
    .btn-md { --button-size: #{$button-md}; }
    .btn-lg { --button-size: #{$button-lg}; }
}

.btn {
    font-size: var(--button-size);
}

Note:

• formátováno s ohledem na rozměry slidu
• odděluj logiku od dezénu.

Brzda z Redmondu

Pokud by pro vás byly custom properties klíčové, ehm, stejně jako podpora IE11, lze použít techniku známou z criticalCSS.

Pomocí postcss-css-variables zkompilovat vedle plnohodnotné ještě statickou variantu CSS pro křápy.

Note:

• IE neumí CSS custom properties, ani @supports, lze použít jedině JS
• polyfill nedává smysl, byl by výpočetně velmi náročný vzhledem k popsaným vlastnostem custom properties (navíc nepodporu lze očekávat na slabších strojích)

Fallback pro IE

Ve svém příkladu jsem s ohledem na rozpočet zvolil jako fallback dekorativní obrázek mapy, kterou jsem dostal jako zadání… :satisfied:

Note:

• Buďme hospodární.

Zdroje

• Smashing Book 6, A Strategy Guide To CSS Custom Properties, by Mike Riethmuller
• On Switching from HEX & RGB to HSL, by Sara Soueidan
• Dark theme in a day, by Marcin Wichary
• PostCSS CSS Variables
• Ukázky kódu z přednášky na CodePen ‒ hrájte sa!

:root {
    --podekovani: 'Děkuji zdvořile!';
}

#frontendisti {
    --podekovani: 'Díky moc!!! Jste boží!';
}

.prednaska::after {
    content: var(--podekovani, 'Děkuju.')
}

/* Tomáš Kout, 2018; @TomKout */

Note:

• Mrkněte na HackMD.io