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.

Podnikatel.cz: Novela zákoníku práce. Řeší homeworking

Novela zákoníku práce. Řeší homeworking

Lupa.cz: CzechInvest pomůže startupům na hi-tech akce

CzechInvest pomůže startupům na hi-tech akce

Vitalia.cz: „Sjíždět“ porno není bez rizika

„Sjíždět“ porno není bez rizika

120na80.cz: Víte, co je svobodná menstruace?

Víte, co je svobodná menstruace?

Lupa.cz: Co najdete uvnitř kosmické sondy?

Co najdete uvnitř kosmické sondy?

Měšec.cz: Ceny PHM v Evropě. Finty na úspory

Ceny PHM v Evropě. Finty na úspory

Měšec.cz: Se stavebkem k soudu už (většinou) nemusíte

Se stavebkem k soudu už (většinou) nemusíte

Vitalia.cz: Syfilis: To není „nemoc z lásky“

Syfilis: To není „nemoc z lásky“

Lupa.cz: Hackujete? Můžete mít problém sehnat práci

Hackujete? Můžete mít problém sehnat práci

DigiZone.cz: ČTÚ červenec: rušení trochu vzrostlo

ČTÚ červenec: rušení trochu vzrostlo

Měšec.cz: Investiční pasti. Děláte to, co ostatní, ale proděláváte

Investiční pasti. Děláte to, co ostatní, ale proděláváte

Lupa.cz: Samořídicí taxíky jsou tu. Začíná s nimi Uber

Samořídicí taxíky jsou tu. Začíná s nimi Uber

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

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

DigiZone.cz: Fotbal na O2 TV Sport posiluje

Fotbal na O2 TV Sport posiluje

Měšec.cz: Test: Výběry z bankomatů v cizině a kurzy

Test: Výběry z bankomatů v cizině a kurzy

Root.cz: Čína má nejvýkonnější počítač světa

Čína má nejvýkonnější počítač světa

Měšec.cz: Platíme NFC mobilem. Konečně to funguje!

Platíme NFC mobilem. Konečně to funguje!

Lupa.cz: Nechcete datacentrum? Jsou na prodej

Nechcete datacentrum? Jsou na prodej

Měšec.cz: Co když na dovolené přijdete o kartu?

Co když na dovolené přijdete o kartu?

Měšec.cz: Do ostravské MHD bez jízdenky. Stačí karta

Do ostravské MHD bez jízdenky. Stačí karta