Chro­me bude koneč­ne pod­po­ro­vať CSS pre­men­né

Dárius Polák / 11. februára 2016 / Lifehacking

Ak si už nie­ke­dy vytvá­ral hoci i tú naj­jed­no­duch­šiu strán­ku, s tým­to prob­lé­mom si sa stre­tol — potre­ba zme­niť jed­nu z farieb akej­koľ­vek čas­ti webu vyža­du­je ris­kant­né vyhľa­dá­va­nie a nahrá­dza­nie, pop­rí­pa­de nahá­ňa­nie kaž­dé­ho výsky­tu danej trie­dy a násle­dov­né vyhľa­dá­va­nie vo vlast­nej pamä­ti, či si nie­kde v kóde ešte tú trie­du nepou­žil a nepre­far­bíš si prvok, kto­rý si v prvom rade nech­cel meniť vôbec.

Pre obí­de­nie toh­to prob­lé­mu väč­ši­na vývo­já­rov pre­šla k tech­no­ló­gií ako SASS ale­bo LESS, kto­ré umož­ni­li pou­ží­va­nie pre­men­ných v CSS, ale tak­tiež vyža­do­va­li kom­pi­lá­ciu kódu po kaž­dej zme­ne. Pre vývo­já­ra to v skrat­ke zna­me­na­lo, že si dizajn strán­ky nemo­hol naži­vo upra­viť v pre­hlia­da­či, pre­to­že zme­ny sa pre­ja­vi­li, až keď sa zme­ne­ný kód ulo­žil a spra­co­val do podo­by potreb­nej pre správ­ne 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

Chro­me 49 odte­raz dostá­va plnú pod­po­ru CSS pre­men­ných. Vývo­já­ri budú schop­ní defi­no­vať pre­men­né, kto­ré majú byť pou­ži­té 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 ’ –hlav­na-far­ba: #ccc ‘. Takým­to zápi­som sa pre­men­ná sprí­stup­ní 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 ‘hlav­na-far­ba’ na nasta­ve­nie far­by poza­dia hla­vič­ky by teda vyze­ra­lo nejak nasle­dov­ne:

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

Pre­men­né sa navy­še môžu pou­žiť aj v Javasc­rip­te a Chro­me s tým nebu­de mať žia­den prob­lém.

CSS pre­men­né sú napriek vývo­ju, kto­rý trval roky stá­le novin­kou. Ich pod­po­ra medzi pre­hlia­dač­mi je pomer­ne cha­bá (neho­vo­riac o spät­nej kom­pa­ti­bi­li­te). Iba Chro­me 49, Fire­fox 43+, Safa­ri 9.1 a iOS 9.3 podpo­ru­jú ten­to štan­dard, zatiaľ čo plá­ny pre Mic­ro­soft Edge, Ope­ru ale­bo Andro­id nie sú zná­me. Chro­me je pou­ží­va­ný polo­vi­cou pou­ží­va­te­ľov inter­ne­tu, pre­men­né sa teda prav­de­po­dob­ne roz­ší­ria pomer­ne rých­lo. Otáz­kou však ostá­va čo spät­ná kom­pa­ti­bi­li­ta? Začne­me sta­ré CSS odsu­dzo­vať ako flash? :P

Konečne

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

Pridať komentár (0)