Chrome bude konečne podporovať CSS premenné

  • Ak si už niekedy vytváral hoci i tú najjednoduchšiu stránku, s týmto problémom si sa stretol - potreba zmeniť jednu z farieb akejkoľvek časti webu vyžaduje riskantné vyhľadávanie a nahrádzanie, poprípade naháňanie každého výskytu danej triedy a následovné vyhľadávanie vo vlastnej pamäti, či si niekde v kóde ešte tú triedu nepoužil a neprefarbíš si prvok, ktorý si v prvom rade nechcel meniť vôbec.
css
  • Ak si už niekedy vytváral hoci i tú najjednoduchšiu stránku, s týmto problémom si sa stretol - potreba zmeniť jednu z farieb akejkoľvek časti webu vyžaduje riskantné vyhľadávanie a nahrádzanie, poprípade naháňanie každého výskytu danej triedy a následovné vyhľadávanie vo vlastnej pamäti, či si niekde v kóde ešte tú triedu nepoužil a neprefarbíš si prvok, ktorý si v prvom rade nechcel meniť vôbec.

Pre obídenie tohto problému väčšina vývojárov prešla k technológií ako SASS alebo LESS, ktoré umožnili používanie premenných v CSS, ale taktiež vyžadovali kompiláciu kódu po každej zmene. Pre vývojára to v skratke znamenalo, že si dizajn stránky nemohol naživo upraviť v prehliadači, pretože zmeny sa prejavili, až keď sa zmenený kód uložil a spracoval do podoby potrebnej pre správne zobrazenie prehliadačom.

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

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

Chrome 49 odteraz dostáva plnú podporu CSS premenných. Vývojári budú schopní definovať premenné, ktoré majú byť použité po celú dobu ich kódu a môžu ich meniť v reálnom čase  bez ďalšej kompilácie!

Na deklaráciu premennej stačí napísať pred jej meno dvojitú pomlčku, napríklad ‚ –hlavna-farba: #ccc ‚. Takýmto zápisom sa premenná sprístupní v celom kóde a pre jej použitie stačí volať funkciu ‚var( )‘. Neskoršie použitie našej premennej ‚hlavna-farba‘ na nastavenie farby pozadia hlavičky by teda vyzeralo nejak nasledovne:

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

Premenné sa navyše môžu použiť aj v Javascripte a Chrome s tým nebude mať žiaden problém.

CSS premenné sú napriek vývoju, ktorý trval roky stále novinkou. Ich podpora medzi prehliadačmi je pomerne chabá (nehovoriac o spätnej kompatibilite). Iba Chrome 49, Firefox 43+, Safari 9.1 a iOS 9.3 podporujú tento štandard, zatiaľ čo plány pre Microsoft Edge, Operu alebo Android nie sú známe. Chrome je používaný polovicou používateľov internetu, premenné sa teda pravdepodobne rozšíria pomerne rýchlo. Otázkou však ostáva čo spätná kompatibilita? Začneme staré CSS odsudzovať ako flash? :P

Konečne

Zdroj: TheNextWeb, zdroj titulnej fotky: thenextweb.com

Najnovšie video

Najnovší podcast

Plavíš sa a na brehu horí ľudské telo, vedľa toho stojí krava. India je šialená

Najnovšie