Proměnné v CSS implementovány ve WebKitu

30. 6. 2008 21:56 (aktualizováno) | Martin Hassman

Po zařazení proměnných do kaskádových stylů volala řada webdesignerů (nedávno např. pixy).  Důvod je prostý. Při designování se řada hodnot opakuje (typicky rozměry nebo barvy) a tak možnost definování vlastních proměnných nebo konstant přijde vhod.

Letos na jaře bylo webdesignerům dopřáno sluchu (viz zápis ze 4. dubna – odstavec constants).
Shodou okolností se tak stalo v den nástupu nových předsedů pracovní skupiny pro kaskádové styly, kterými se stali Daniel Glazman a Peter Linss. Řekl bych, že to byl úspěšný nástup. S větší bombou snad ani nemohli přijít.

Na návrhu specifikace CSS Variables, která se stane součástí CSS3, pracuje přímo Daniel Glazman s Davidem Hyattem (Apple, vývojář WebKitu). Ukázka syntaxe:

@variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: var(CorporateLogoBGColor);
}

Implementace ve WebKitu

Poslední noční buildy WebKitu mají CSS proměnné implementované. Vyzkoušet si je můžete na vytvořených ukázkách (jeden přímý odkaz).

Protože specifikace je zatím jen v návrhu, zahrnul WebKit do implementace vendor prefix (pokud by se specifikace změnila, nedostane se tak do konfliktu s touto první implementací), takže výše uvedený příklad zatím ve WebKitu vypadá takto:

@-webkit-variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: -webkit-var(CorporateLogoBGColor);
}

Specifikace umožňuje hodnoty proměnných měnit z JavaScriptu. Změnou hodnoty CSS proměnné tak přestylujete celý dokument. Tak co webdesigneři, netěšíte se?

(via Latest Webkit nightlies now support CSS Variables)

  • 24. 6. 2008 18:02

    pixy (neregistrovaný)

    Těšit se? Slabé slovo!

    Mám fakt radost, notabene, když je to takřka v totožné podobě, jakou jsem sám navrhoval. Doufám, že to v CSS zůstane a ve finále to někdo ortodoxní nevyštípe...

  • 24. 6. 2008 18:21

    kaja47 - man with black hat (neregistrovaný)

    oh-uh-oh no tohle je bomba, škoda jenom, žr potrvá celou věčnost než to implementují všechny prohlížeče, aby se to dalo nějak rozumně používat.

  • 24. 6. 2008 19:51

    kukulich (neregistrovaný)

    Už aby to CSS3 bylo!

  • 24. 6. 2008 19:58

    daeltar (neregistrovaný)

    Skoro se člověk diví, že se to do specifikace má probojovat až tak pozdě.

  • 24. 6. 2008 20:07

    MArtin (neregistrovaný)

    Když se řekne A, musí se říct i B. Když už máme proměnné, potřebujeme i matematické výpočty. Minimálně je nutné sčítání a odečítání.

  • 25. 6. 2008 7:10

    Rejpal (neregistrovaný)

    Skvělé, už chybí jen rekurze a podmíněný příkaz a bude vymalováno! :]

  • 25. 6. 2008 8:43

    Tomáš Kavalek (neregistrovaný)

    Parada, fakt perfektni zprava, doufam, ze se implementace jeste doziji.

  • 25. 6. 2008 10:48

    Vin (neregistrovaný)

    No, já nevím. Je to hezké, ale vždyť se dá se styly za pomocí nějakých šablon (Smarty například) pracovat takhle už teď.

  • 25. 6. 2008 12:35

    ppp (neregistrovaný)

    <blockquote>...v den nástupu nových předsedů pracovní skupiny pro kaskádové styly, kterými se staly Daniel Glazman a Peter Linss.</blockquote>

    Ubohé ženy, mají jména úplně mužská! No ale když "se staly", tak to musejí být ženy, že? V těch cizích řečech se to někdy těžko pozná... Ale neměly by to pak být předsedkyně? ;-)

  • 25. 6. 2008 12:53

    Multimotyl (neregistrovaný)

    [5] a k pseudoelementům :before a :after ještě :inside a :outside (což by mohlo být podle mě ještě o chlup užitečnější):-)

  • 26. 6. 2008 0:04

    Harvie (neregistrovaný)

    Mno me by se taky hodilo umoznit nastavit styl i podle jinych atribut entity nez jsou typ, id a class. Treba abych mohl nastavit styl vsem linkum s urcitym targetem (a cokoli jineho).

  • 26. 6. 2008 1:04

    luky (neregistrovaný)

    neni to nutnost. ja nevidim zadnou nutnost proc tohle zavadet.. predstavte si web ktery treba meni styl webu podle toho jak si to nastavit uzivatel.. zmenit styl znamena pouzit pravdepodobne jiny. zmenu pravdepodobne zaridi serverovy skript, a serverovy skript je schopny dosadit si vlastni promenny do CSS. takze tak... nebo mi chcete rict ze v momente kdy se zavedou promenny v CSS tak se vsichni vykaslou na serverovy skripty? asi ne ze jo, a paklize ne, plati co jsem rekl.

  • 26. 6. 2008 4:43

    Rejpal (neregistrovaný)

    [10]: Možná je teď povinné nějaké to procento ženských rodů, doba je všelijaká... ;-)

  • 26. 6. 2008 7:25

    Martin Hassman (neregistrovaný)

    Vin: Během kreativního designování to člověku ale nepomůže.
    Harvie: Takový selector již dávno je v CSS2 (hledej hranaté závorky).
    luky: Nutnost ne, potřeba ano.

  • 26. 6. 2008 18:19

    Algi (neregistrovaný)

    Tak ten zavináč na začátku deklarace proměnné mě fakt dostal. Obzvlášť po tom, co jsem si přečetl, že to implementoval člověk od Applu. Velmi pravděpodobně to s tím nemá žádnou souvislost, ale první co mě napadlo bylo: "Ty jsou fakt už s těma zavináčema posedlí... ". Stačí se podívat na Objective-C a pochopíte :-D

  • 26. 6. 2008 22:17

    Socan (neregistrovaný)

    Myslenka hezka, ale promenne v CSS a dost! Doufam, ze se do CSS nebudou cpat cykly, podminky, funkce apod. a CSS nebude smerovat ke vzniku noveho skriptovaciho jazyka. By to bylo nestestim. Celkem by se zkomplikovala tvorba webu, kdyby k tomu vznikl dalsi spriktovaci jazyk. Myslim, ze v soucasnosti je dost prostredku, jak tuhle problematiku resit. Jinak ten zavinac, je tam opravdu jak pest na oko ;-) ale hned se pozna, co je promenna a co ne.

  • 26. 6. 2008 22:27

    Martin Hassman (neregistrovaný)

    Algi: A copak je na tom zvláštní? Zavináč jako označení klíčového slova (at-keyword) je v CSS zaveden už od CSS1 (viz @import) a je rozumné, že to dělají konzistentní.

  • 26. 6. 2008 22:29

    Martin Hassman (neregistrovaný)

    Socan: Žádné cykly ani nic dalšího tam nikdo nechce a ani to tam nebude (co by to tam taky dělalo).

  • 26. 6. 2008 23:41

    G_ (neregistrovaný)

    [12] target je lehce na odchodu, nebo se mylim, myslim ze,ve strictu je zakazan......

  • 27. 6. 2008 1:50

    Lukas Mach (neregistrovaný)

    Moc velkou radost z toho nemam. Podle me ten, kdo po tomto vola, nepise CSS spravne - nevyuziva dostatecne kaskady.

  • 27. 6. 2008 7:16

    Martin Hassman (neregistrovaný)

    G_: target na odchodu není, v HTML5 je to řádný atribut http://html456.blogspot.com/2008/05/atribut-target-v-html5.html

  • 27. 6. 2008 7:18

    Martin Hassman (neregistrovaný)

    Lukas Mach: Anebo taky naopak 8-) Pokud vim, tak po nich volali prave spicky oboru. Predpokladam, ze pisou CSS relativne spravne 8-)

  • 27. 6. 2008 8:47

    Algi (neregistrovaný)

    Sypu si popel na hlavu. Na @import jsem úplně zapomněl. Možná, že kdybych se před psaním komentáře věnoval CSS a ne Objective-C, tak by mě to tolik nepřekvapilo. Je to pravda, aspoň to bude konzistentní...

  • 29. 6. 2008 16:42

    paranoiq (neregistrovaný)

    [0] super :]

    [21] mylím, že někdy je přílišné kaskádování spíš na obtíž a zhoršuje čitelnost stylů. prostě všeho s mírou

    [24] také @media a @page

Přidávat nové názory je zakázáno.

Vitalia.cz: Bio vejce nepoznají ani veterináři

Bio vejce nepoznají ani veterináři

120na80.cz: I tuto vodu můžete pít

I tuto vodu můžete pít

Vitalia.cz: Tohle je Břicháč Tom, co zhubnul 27 kg

Tohle je Břicháč Tom, co zhubnul 27 kg

Podnikatel.cz: Na dovolenou s knížkou. Tipy na čtení o podnikání

Na dovolenou s knížkou. Tipy na čtení o podnikání

Měšec.cz: Udali ho na nelegální software a přišla Policie

Udali ho na nelegální software a přišla Policie

Lupa.cz: Největší torrentový web KickassTorrents padl

Největší torrentový web KickassTorrents padl

Měšec.cz: Dodavatele energií porovnáte snáz

Dodavatele energií porovnáte snáz

Podnikatel.cz: Přiznal prodej padělků. Pokuta ho nemine

Přiznal prodej padělků. Pokuta ho nemine

Měšec.cz: Co s reklamací, když e-shop krachuje?

Co s reklamací, když e-shop krachuje?

Vitalia.cz: Klíšťata letos řádí, skvrna se udělá jen někomu

Klíšťata letos řádí, skvrna se udělá jen někomu

Lupa.cz: IT scéna po brexitu: přijde exodus vývojářů?

IT scéna po brexitu: přijde exodus vývojářů?

Vitalia.cz: Nejdůležitější změny v potravinářské novele

Nejdůležitější změny v potravinářské novele

Lupa.cz: V Praze se otevřel první podnik s virtuální realitou

V Praze se otevřel první podnik s virtuální realitou

Podnikatel.cz: Fotogalerie: Jesenka už má skoro 50 let

Fotogalerie: Jesenka už má skoro 50 let

Měšec.cz: TEST: Vyzkoušeli jsme pražské taxikáře

TEST: Vyzkoušeli jsme pražské taxikáře

DigiZone.cz: Hra o trůny: natáčení 7. řady posunuto

Hra o trůny: natáčení 7. řady posunuto

Měšec.cz: Kurzy platebních karet: vyplatí se platit? (TEST)

Kurzy platebních karet: vyplatí se platit? (TEST)

Vitalia.cz: Petr Koukal: Až rakovina mi zkvalitnila život

Petr Koukal: Až rakovina mi zkvalitnila život

Podnikatel.cz: Daň z nemovitosti? Změny budou v říjnu

Daň z nemovitosti? Změny budou v říjnu

Lupa.cz: eIDAS: Nepřehnali jsme to s výjimkami?

eIDAS: Nepřehnali jsme to s výjimkami?