Root.czBlogyMartin Hassman: nejen o prohlížečích

Proměnné v CSS implementovány ve WebKitu

Martin Hassman, 24. 06. 2008, 16:19 v kategorii WWW, štítky: ,

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)

Komentáře (29)

  1. 24. 06. 2008, 18:02 pixy napsal:

    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...

  2. 24. 06. 2008, 18:21 kaja47 - man with black hat napsal:

    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.

  3. 24. 06. 2008, 19:51 kukulich napsal:

    Už aby to CSS3 bylo!

  4. 24. 06. 2008, 19:58 daeltar napsal:

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

  5. 24. 06. 2008, 20:07 MArtin napsal:

    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í.

  6. 24. 06. 2008, 22:42 Jan Tvrdík napsal:

    http://www.w3.org/TR/2006/WD-css3-values-20060919/#calc

  7. 25. 06. 2008, 07:10 Rejpal napsal:

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

  8. 25. 06. 2008, 08:43 Tomáš Kavalek napsal:

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

  9. 25. 06. 2008, 10:48 Vin napsal:

    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ď.

  10. 25. 06. 2008, 12:35 ppp napsal:

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

    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ě? ;-)

  11. 25. 06. 2008, 12:53 Multimotyl napsal:

    [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ší):-)

  12. 26. 06. 2008, 00:04 Harvie napsal:

    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).

  13. 26. 06. 2008, 01:04 luky napsal:

    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.

  14. 26. 06. 2008, 04:43 Rejpal napsal:

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

  15. 26. 06. 2008, 07:25 Martin Hassman napsal:

    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.

  16. 26. 06. 2008, 18:19 Algi napsal:

    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

  17. 26. 06. 2008, 22:17 Socan napsal:

    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.

  18. 26. 06. 2008, 22:27 Martin Hassman napsal:

    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í.

  19. 26. 06. 2008, 22:29 Martin Hassman napsal:

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

  20. 26. 06. 2008, 23:41 G_ napsal:

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

  21. 27. 06. 2008, 01:50 Lukas Mach napsal:

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

  22. 27. 06. 2008, 07:16 Martin Hassman napsal:

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

  23. 27. 06. 2008, 07:18 Martin Hassman napsal:

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

  24. 27. 06. 2008, 08:47 Algi napsal:

    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í...

  25. 29. 06. 2008, 16:42 paranoiq napsal:

    [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

  1. 4 Trackback(s)

  2. Srp 10, 2008: Proměnné v CSS. A není to chyba? - Martin Hassman: blog nejen o prohlížečích
  3. Zář 9, 2008: CSS v IE8 získávají vendor prefix - Martin Hassman: blog nejen o prohlížečích
  4. Zář 10, 2008: K čemu jsou v CSS potřeba vendor prefixy - Martin Hassman: blog nejen o prohlížečích
  5. Čvc 29, 2009: » CSS3 rozšíří možnosti obrázků, přidá podporu pro spripty - Martin Hassman: blog nejen o prohlížečích

K tomuto spotu není povoleno přidávání komentářů.