A css - css, mdn változók használatával
Ez egy kísérleti technológia
Mivel a technika specifikációja még nem stabilizálódott, olvassa el a kompatibilitási táblázatot a különböző böngészőkben való használatra. Vegye figyelembe továbbá, hogy a kísérleti technológia szintaxisa és viselkedése a böngészők jövőbeni verzióiban változhat, a specifikációban bekövetkező változásokat követve.
A komplex weboldalaknak nagyon sok CSS van, gyakran sok másolatával. Például ugyanazt a színt használhatják több száz helyen, amelyek globális keresést és cserét követelnek meg, ha ezt a színt meg kell változtatni. A CSS változók lehetővé teszik, hogy az értéket egy helyen tárolja, majd újra felhasználja bármely más helyen. További előny a szemantikai azonosítók. Például: a rekord --main-text-color jobban érthető, mint a # 00ff00. különösen, ha ugyanazt a színt használják más összefüggésben.
A CSS változók engedelmeskednek a kaszkádnak, és örökölje az értékeket szüleiktől.
Elsődleges használat
Megjegyzés: A korábbi változatban a változók előtagja változó volt. de később megváltozott. A Firefox 31 és újabb követi az új specifikációt. (Bug 985838)
Az első lépés a CSS változókkal
Kezdjük ezzel az egyszerű CSS-rel, amely színt ad az azonos színű különböző osztályok elemeinek:
Ezt a HTML-kódot alkalmazzuk:
amely így vezet:
Ez ugyanazt az eredményt eredményezi, mint az előző példa, de lehetővé teszi, hogy csak egyszer adja meg a kívánt tulajdonságot.
A változók öröklése a CSS-ben és a visszatérési értékek
Az egyéni tulajdonságok örökölhetők. Ez azt jelenti, hogy ha nincs megadva érték az adott tulajdonság egyéni tulajdonságánál, akkor a szülő tulajdonsága használható:
a következő CSS-sel:
Ennek eredményeképpen a var (teszt) a következő lesz:
- egy osztály osztály = "kettő" elemre. 10px
- egy osztály osztály = "három" elemre. 2em
- egy elemhez az osztály osztály = "négy". 10px (öröklött a szülőktől)
- egy osztály osztály = "egy" elemhez. érvénytelen érték. amely az alapértelmezett érték bármelyik egyéni tulajdonság számára.
A var (), akkor állapítsa meg egy sor visszatérő értékeket ez a változó nincs definiálva, akkor hasznos lehet, ha dolgozik, egyedi elemek és árnyék DOM.
A függvény első argumentuma az egyéni tulajdonság neve. A függvény második argumentuma, ha jelen van, a visszatérési érték, amelyet helyettesítési értékként használnak, amikor a felhasználói tulajdonság nem érvényes. Például:
Ez a módszer teljesítményproblémákat is okoz. Az oldal a szokásosnál lassabban jelenik meg, mert időbe telik az elemzés.
Ésszerűség és hasznosság
A klasszikus CSS koncepciója, az egyes tulajdonságokkal való kapcsolat nem túl kényelmes a felhasználói tulajdonságok szempontjából. A felhasználói tulajdonságok feldolgozásakor a böngésző nem tudja, hol alkalmazzák őket, ezért szinte minden érvényes értéket meg kell vizsgálnia.
Sajnos ezeket az értékeket a var () függvénybejegyzésen keresztül lehet használni. olyan kontextusban, ahol nincs értelme. A tulajdonságok és a felhasználói változók érvénytelen CSS-kifejezéseket eredményezhetnek, ami futásidőben új érvényességi koncepciót eredményez.
Kompatibilitás a böngészőkkel
[1] A Chrome kezdetben végre ezt a funkciót egy másik szintaxis, amely szükséges előtag egyéni tulajdon nevek -webkit-kü- lönbözőképpen határozzák meg azokat. Ezeket a -webkit-var () függvényben előzetesen használhatják. Továbbá, a kivitelezést mögött a A kísérleti WebKit funkciók zászló alatt chrome: // flags. később átnevezték a kísérleti webes platform funkcióinak engedélyezésére.
[2] A Chrome 34.0 eltávolította ezt a funkciót a teljesítményproblémák miatt.
[3] Ez a szolgáltatás a preferencia layout.css.variables.enabled mögött kerül végrehajtásra. alapértelmezéseik hamis és a régi kü- lönbözőképpen változóNév szintaxis a Gecko 29. Kezdve Gecko 31 preferenciája alapértelmezés szerint engedélyezve van, és az új - változóNév szintaxisát használjuk.
Dokumentum címkék és résztvevők
Köszönöm! Kérjük, ellenőrizze be a Beérkező leveleket, hogy megerősítse az előfizetését.
Ha korábban nem erősített meg egy előfizetést a Mozilla hírlevélre, akkor esetleg meg kell tennie. Kérjük, ellenőrizze az Inbox vagy a Spam mappát a postaládájában, hogy megnézze, hogy az e-mail érkezett-e tőlünk.
A hírlevélre való előfizetés elrejtése