Bevezetés a css változókba
A CSS változók neve magáért beszél. Az előfeldolgozókhoz hasonlóan változók is tartalmaznak bizonyos értékeket, amelyeket újra kell használni.
A CSS változók a szokásos tulajdonságok alapján dolgoznak. A változók örökölnek, de az értéket nem lehet felülírni a kezdeti változó beállításával.
A változók az -, és a var (-myvar) konstrukcióval kezdődnek. Képzeld el, hogy ez egy előtag tulajdonság, de egy üres előtag (mint a -webkit - csak a webkit szó nélkül). Az előtagot úgy választottuk ki, hogy a Sass / Less változókat konfliktus nélkül használhassa.
A CSS változók be vannak állítva, mint más tulajdonságok. Még a stílus HTML attribútumán belül is megírhatóak, ami egy témát nyit meg. A CSS változók a kis- és nagybetűkre érzékenyek, és nem lehetnek üresek.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
Ha a változónak érvénytelen értéke van az adott tulajdonságra, akkor az "Invalid at computed-value time" hiba fordul elő, és az alapértelmezett érték kezdeti értéke meg van adva.
Ha egy változót nem ad meg, megadhat egy folke-t. Mivel a folke más változókat is képes fellépni, amelyek szintén saját follbackjeik lehetnek.
A CSS-ben nincs összefűzés (kivéve a tartalom tulajdonságát), így a CSS változók nem összefűzhetők. Ez például nem kombinálhatja a változókat a számokkal és változókkal mértékegységgel.
Adaptív tervezés, animáció és
Médiára vonatkozó kérelmek
A CSS változókat a média lekérdezésekben lehet használni. Egy nagyon hasznos dolog: egyszerűen beállítja a szabályt, és átírhatja a változó értékét a média lekérdezésen belül.
Billentyűzet animáció és sima átmenet
Mivel nem lehet pontosan meghatározni, hogy milyen típusú adatok tárolódnak a CSS változóban, attól a pillanattól, hogy nem alkalmasak animációra. A böngésző egyszerűen nem tudja, mi a teendő az animációval.
Ha megpróbálja animálni a változót az animáció kulcskeretein belül, akkor az elem egyszerűen ugrik egyik értékről a másikra.
Az animáció azonban bizonyos tulajdonságok esetén is működhet, ha megváltoztatja azt az ingatlantulajdonság értékét, amelyre az átmeneti tulajdonságot alkalmazza:
Az állami változó színének megváltoztatásával létrehozhatunk bármilyen színű gombot. A mi esetünkben a gomb piros szöveggel, keretrel és háttérrel fog lógni.
A JS használható a CSS változók visszakeresésére, telepítésére és módosítására - egy nagyon hatékony eszköz.
A következő példa (diákból vett) a változót a JS-en keresztül az egér mozgásával határozza meg. A változót a CSS-ben használják egy sugárirányú gradiens létrehozásához, amely az egérmutató mögött mozog.
Böngészők támogatása
A CSS változók támogatása valószínűleg jobb, mint gondolná. Azonban még mindig alacsony. A caniuse CSS site szerint a változók az összes fontos böngészőben támogatottak, az IE11 / Edge kivételével.
Kiadás: A webformyself parancs.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán
