Chrome bude konečne pod­po­ro­vať CSS pre­menné

Dárius Polák / 11. február 2016 / Tech a inovácie

Ak si už nie­kedy vytvá­ral hoci i tú naj­jed­no­duch­šiu stránku, s týmto prob­lé­mom si sa stre­tol — potreba zme­niť jednu z farieb akej­koľ­vek časti webu vyža­duje ris­kantné vyhľa­dá­va­nie a nahrá­dza­nie, pop­rí­pade nahá­ňa­nie kaž­dého výskytu danej triedy a násle­dovné vyhľa­dá­va­nie vo vlast­nej pamäti, či si nie­kde v kóde ešte tú triedu nepou­žil a nepre­far­bíš si prvok, ktorý si v prvom rade nech­cel meniť vôbec.

Pre obí­de­nie tohto prob­lému väč­šina vývo­já­rov pre­šla k tech­no­ló­gií ako SASS alebo LESS, ktoré umož­nili pou­ží­va­nie pre­men­ných v CSS, ale tak­tiež vyža­do­vali kom­pi­lá­ciu kódu po kaž­dej zmene. Pre vývo­jára to v skratke zna­me­nalo, že si dizajn stránky nemo­hol naživo upra­viť v pre­hlia­dači, pre­tože zmeny sa pre­ja­vili, až keď sa zme­nený kód ulo­žil a spra­co­val do podoby potreb­nej pre správne zobra­ze­nie pre­hlia­da­čom.

Príklad deklarácie a inicializácie CSS premennej main-color a jej použidie

Prí­klad dekla­rá­cie a ini­cia­li­zá­cie CSS pre­men­nej main-color a jej pou­ži­die, foto: The­Next­Web

Chrome 49 odte­raz dostáva plnú pod­poru CSS pre­men­ných. Vývo­jári budú schopní defi­no­vať pre­menné, ktoré majú byť pou­žité po celú dobu ich kódu a môžu ich meniť v reál­nom čase - bez ďal­šej kom­pi­lá­cie!

Na dekla­rá­ciu pre­men­nej stačí napí­sať pred jej meno dvo­j­itú pomlčku, naprí­klad ’ –hlavna–farba: #ccc ‘. Takýmto zápi­som sa pre­menná sprí­stupní v celom kóde a pre jej pou­ži­tie stačí volať fun­kciu ‘var( )’. Neskor­šie pou­ži­tie našej pre­men­nej ‘hlavna-farba’ na nasta­ve­nie farby poza­dia hla­vičky by teda vyze­ralo nejak nasle­dovne:

#hlavicka {
background: var(--hlavna-farba);
}

Pre­menné sa navyše môžu pou­žiť aj v Javasc­ripte a Chrome s tým nebude mať žia­den prob­lém.

CSS pre­menné sú napriek vývoju, ktorý trval roky stále novin­kou. Ich pod­pora medzi pre­hlia­dačmi je pomerne chabá (neho­vo­riac o spät­nej kom­pa­ti­bi­lite). Iba Chrome 49, Fire­fox 43+, Safari 9.1 a iOS 9.3 podpo­rujú tento štan­dard, zatiaľ čo plány pre Mic­ro­soft Edge, Operu alebo Android nie sú známe. Chrome je pou­ží­vaný polo­vi­cou pou­ží­va­te­ľov inter­netu, pre­menné sa teda prav­de­po­dobne roz­ší­ria pomerne rýchlo. Otáz­kou však ostáva čo spätná kom­pa­ti­bi­lita? Začneme staré CSS odsu­dzo­vať ako flash? :P

Konečne

Zdroj: The­Next­Web, zdroj titul­nej fotky: thenextweb.com

Pridať komentár (0)