Proměnné v CSS implementovány ve WebKitu
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?
Vše z Blog Root.cz
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...
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.
Už aby to CSS3 bylo!
Skoro se člověk diví, že se to do specifikace má probojovat až tak pozdě.
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í.
http://www.w3.org/TR/2006/WD-css3-values-20060919/#calc
Skvělé, už chybí jen rekurze a podmíněný příkaz a bude vymalováno! :]
Parada, fakt perfektni zprava, doufam, ze se implementace jeste doziji.
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ď.
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ě? ;-)
[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ší):-)
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).
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.
[10]: Možná je teď povinné nějaké to procento ženských rodů, doba je všelijaká... ;-)
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.
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
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.
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í.
Socan: Žádné cykly ani nic dalšího tam nikdo nechce a ani to tam nebude (co by to tam taky dělalo).
[12] target je lehce na odchodu, nebo se mylim, myslim ze,ve strictu je zakazan......
Moc velkou radost z toho nemam. Podle me ten, kdo po tomto vola, nepise CSS spravne - nevyuziva dostatecne kaskady.
G_: target na odchodu není, v HTML5 je to řádný atribut http://html456.blogspot.com/2008/05/atribut-target-v-html5.html
Lukas Mach: Anebo taky naopak 8-) Pokud vim, tak po nich volali prave spicky oboru. Predpokladam, ze pisou CSS relativne spravne 8-)
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í...
[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