Přejít k navigační liště

Zdroják » Webdesign » Bylo nebylo aneb jak proměnné do CSS pomalu přicházejí

Bylo nebylo aneb jak proměnné do CSS pomalu přicházejí

Články Webdesign

Proměnné pomalu míří do kaskádových stylů. Máme jásat? Nebo můžeme klidně spát? A co na to výrobci webových prohlížečů?

Nálepky:

Začal jsem s bylo nebylo, protože proměnné v kaskádových stylech, to je příběh dlouhý jak pohádka a stejně tak zamotaný. Zkusím to klubko v tomhle článku krapet rozmotat.

Patří proměnné do kaskádových stylů?

To je otázka, na kterou vám různí odborníci dají různou odpověď. Podle některých tam měly být už od začátku, podle jiných je to čiré zlo.

Odpověď platná k dnešnímu dni zní asi takto: Zdá se, že proměnné do CSS patří a nejspíš se tam jednoho dne také dostanou. (Pozn.: ztučnění zde má svůj důležitý smysl.)

Jak to celé bylo nebylo?

V původním návrhu kaskádových stylů z roku 1994 se proměnným přibouchly dveře před nosem. Přímo v návrhu je zmíněno, že onen návrh v zájmu webdesignerů i vývojářů prohlížečů záměrně obsahuje řadu omezení. Kaskádové styly mají být jednoduché – proměnné, podmíněné výrazy a další složité konstrukce do nich nepatří.

Pozn. 1: Návrh sice připouští některé výrazy, např. h1.font.size = font.size * 3, ale jejich možnosti silně omezuje a později zmizely výrazy kompletně a byly nahrazeny jinými možnostmi (z výše uvedeného výrazu se stal font-size: 300%).

Pozn 2.: Budoucnost nedala autorům za pravdu. Zamítnuté podmíněné výrazy přišly do hry koncem první dekády 21. století (znáte je pod názvem media queries), proměnné za nimi čekají ve frontě.

Jenže tehdy nebyl na podobné rozbory čas. Veškerá práce probíhala ve spěchu, autor návrhu Håkon Wium Lie to sám přiznal při své návštěvě Prahy. Jen tři dny po vydání návrhu CSS vyšla nová verze prohlížeče Netscape, který do HTML přidal vizuální formátování, zavedl značku font a atribut color. To na několik let určilo podobu celého Webu.

Činnost tvůrců CSS tak několik let spočívala převážně v tom nějak CSS rychle standardizovat a prosadit. Trvalo to řadu let, ale povedlo se.

Dejte nám tam proměnné!

Od nástupu popularity CSS se objevovaly žádosti o zařazení proměnných. Jeden příklad za všechny – návrh Petra Staníčka, Pixyho. Nemám po ruce patřičnou statistiku, ale odhadoval bych, že se možná jednalo o nejčastější návrh na úpravu kaskádových stylů vůbec.

Na každý návrh se ale objevil protinávrh, proč by proměnné v CSS nedělaly dobrotu. Jako příklad opět odkážu jeden takový článek.

Co na to konzorcium?

Ani W3C nebylo jednotné. Autor původního návrhu CSS Håkon Wium Lie se pomalu přikláněl na stranu zahrnutí proměnných. (Ve své doktorandské práci věnované CSS se proměnnými zabývá a později opakovaně zavedení proměnných připouští – např. v odpovědi z roku 2008, byť je opatrný ve způsobu jejich zavedení.) Ovšem jeho kolega, spolutvůrce CSS a původně i předseda pracovní skupiny pro CSS Bert Bos byl jednoznačně proti. Což poměrně jasně vyjádřil ve svém textu Why “variables” in CSS are harmful.

Celá situace se vyhrotila v roce 2008 (tehdy jsem ji popsal v článku) a Martin Michálek to komentoval slovy „Huh, poměrně akademický problém v létě 2008, kdy prohlížeče pořádně nepodporují některé vlastnosti CSS2 :)“ To jen, abyste viděli, jaká byla tehdy doba, stačí si přečíst i další komentáře pod oním článkem. Řešení nějakých proměnných v CSS bylo zkrátka a dobře stále mimo hlavní okruh zájmu.

Duo Hyatt-Glazman zasahuje

Přesto se tehdy dali dohromady David Hyatt (jeden z hlavních vývojářů WebKitu u Apple) a Daniel Glazman (tvůrce tehdy asi nejrozšířenějšího WYSIWYG editoru HTML) a vytvořili první návrh specifikace CSS Variables (tehdy ještě neoficiální).

Daniel Glazman se v té době stal místo Berta Bosse předsedou pracovní skupiny pro CSS, David Hyatt se postaral o zkušební implementaci ve WebKitu, a tak od téhle doby (léto 2008) se začlenění CSS proměnných začíná brát jako reálná možnost, byť se o tom stále (někdy i velmi ostře) diskutuje. Zájemci mohou nahlédnout do mailového archivu pracovní skupiny pro CSS, najděte si vlákno o CSS Variables a uvidíte, že jednota rozhodně nepanovala.

Jak je tomu dnes v roce 2014?

To byl rok 2008. Pak bylo po řadu let ticho po pěšině. Po šesti letech (!!!) můžeme konečně říct, že se situace začíná trochu hýbat. (Pozn.: ztučnění je opět na místě.)

Specifikace již pod křídly W3C dozrála do stavu last call (aktuální verze vyšla 6. května, tj. včera) pod názvem CSS Custom Properties for Cascading Variables Module Level 1 (z původního názvu CSS Variables se přešlo na označení Custom Properties, přesto se ale používá syntaxe var(name) s var jako variable). Za tu doby byla překopaná a dost se od původního návrhu liší.

Můžeme říct, že CSS proměnné za tu dobu dozrály a poslední dobou se opět okolo nich začíná něco dít. Zdůrazňuji začíná, při pohledu na jejich aktuální podporu v prohlížečích je jasné, že žádné praktické použití v žádném případě nehrozí.

Jediná funkční implementace, o které v tuhle chvíli vím, je ve Firefoxu (je nutné ji zapnout předvolbou layout.css.variables.enabled, a navíc použitá syntaxe se od včera vydané specifikace ovšem liší!):

Pozn.: Safari a Chrome nějakou dobu implementaci CSS variables obsahovaly, můžete najít články z roku 2012, které na tuto implementaci odkazují. Později byla implementace odstraněna jak z WebKitu, tak z Blinku odstraněna coby problematická a čeká se na implementaci novou. V tuhle chvíli tedy existuje pouze zmíněná implementace ve Firefoxu.

Jak to bude s dalšími implementacemi, je v tuhle chvíli ještě nejasné, Chromium Dashboard, který jejich vývoj sleduje, uvádí u IE a Safari mixed public signals.

Dávám tomu rok, maximálně dva…

Osobně odhaduji, že ještě pár let potrvá, než se implementace v prohlížečích ustálí a proměnných se nakonec dočkáme. Je samozřejmě otázkou, zda je bude ještě někdo potřebovat, pokud by se CSS preprocesory, které proměnné řeší po svém, za tu dobu dostaly do webdesignerského mainstreamu, tak po nativních proměnných v CSS neštěkne pes. Ovšem i CSS preprocesory jsou zatím teprve v záběhu, kdo ví, kam se za ty dva roky posunou a jak se na nich nativní CSS proměnné projeví.

Definuj proměnnou

Podle včera vydaného pracovního návrhu specifikace se CSS proměnné definují pomocí dvou pomlček následovaných názvem, např.

:root {
  --moje-promenna: #444;
  --dalsi-promenna: #555
}

Což bylo nyní změněno oproti předchozímu zápisu var-moje-promenna: #444, který je použit v implementaci ve Firefoxu.

Použij proměnnou

Definované proměnné pak můžete požít pomocí zápisu var(promenna) takto:

h1 {
  color: var(--moje-promenna);
}

To bylo opět nedávno změněno, takže ve Firefoxu najdeme starší verzi bez počátečních pomlček, tj. var(moje-promenna).

Specifikace definuje i jednoduché aritmetické operace proměnných pomocí konstruktu calc, např.

:root {
  --moje-promenna: 10px;
  --nova-promenna: calc(var(--moje-promenna) + 20px)
}

Zároveň v dokumentu CSS Extensions se začíná rýsovat podoba custom selektorů, které by rovněž nebyly k zahození:

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading {
  /*
   * sem naservírujeme vlastnosti společné všem nadpisům
   */
}

Závěr

Historie CSS proměnných je dlouhá, trnitá, nejasná a stále není u konce. Po delší pauze se konečně začíná opět něco dít, ovšem spíše než čekat na implementaci CSS proměnných vám doporučíme naučit se některý z CSS preprocesorů, byť je to pole nejisté, vznikají preprocesory nové a nové, ty existující se pak dále vyvíjejí.

Ale pořád to bude lepší než jen čekat. A nic jiného než další čekání oblast CSS proměnných nečeká.

Odkazy

Komentáře

Subscribe
Upozornit na
guest
9 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
AugiCZ

Zajímavé, že to pojmenovali jako proměnné, když to na mě působí víc jako pojmenované konstanty :)

Samuel Hapák

Na premenné ozaj bohate postačuje preprocessor, custom properties sa však správajú úplne ako klasické CSS properties: funguje na nich kaskáding, dedenie, možno ich meniť za behu z JS. Názov custom properties je najvýstižnejší možný,

pre viac informácií kuk sem: http://fremycompany.com/BG/2012/Explaining-CSS-Custom-Properties/

Jan Pobořil

Často se zapomíná na hlavní „fíčuru“ proč potřebujeme CSS proměnné a co nejde z principu udělat v preprocesorech – sčítání různých jednotek. Např.: width: 75% + 5px;

David Světlík
S.

Za přípravu na příchod proměnných já osobně považuji animace v CSS3.

anonim

v css stylu potřebuji použít vzdálenost nadpisu zleva pro vzdálenost jiného textu, jak to mám udělat ???

anonim

mam nadpis velký cca 420px a potřebuji ho vycentrovat doprostřed pomocí position:absolute
mám to napsané takto
div.title
{
position: absolute; top: 0px;left :calc(50%-210px);
}
udělal jsem to přes style a nefungovalo to D=
jak to mm udělat

martin

musí tam být mezery: calc(50% – 210px);

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.