Így css rövidebb via currentcolor
Mielőtt elkezdenénk ásni figyelembe gyakorlati példák, ad egy kis darab az elmélet. Itt van, hogyan currentColor leírt MDN site:
Kulcsszó számítjuk currentColor color tulajdonság értéke egy adott elem. Ez lehetővé teszi, hogy a szín tulajdonságait örökölte egyéb tulajdonságai szín vagy tulajdonságainak a gyermek elem, ami nem öröklik az alapértelmezett tulajdonság.
Ez az én kedvenc esemény. Vegyük például a nagyon gyakori az interneten - SVG gombot egy ikon és nevet a gombot. Nekem is van ezeknek a honlapomon:
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
Természetesen, ha nagyon felelősségteljes webdesigner, ezért úgy gondoljuk át stílusok különböző államok a cella, azaz hover. összpontosítani. aktív, annak érdekében, hogy javítsa a felhasználói beavatkozás. Itt van, hogy a kód általában így néz ki:
Én jelenleg részt vesz írásban frontend kliens oldalon a területen az elektronikus kereskedelem, amely a gombok több tervez. Sőt, hivatkozásokat tartalmaz, amelyek kiegészítő teret az állam: látogatták meg. És még mindig vannak olyan esetek száma segítségével SVG (eszköztárak, stb) ha az SVG kell lennie a szöveg színét. Kulcsszó currentColor csökkenti kódot kétszer:
Kulcsszó currentColor lehet alkalmazni, ahol kijelölése érték szín, beleértve színátmenetek. Az én előző post, beszéltem egy kicsit arról, hogyan kell végrehajtani a feladatot a divatos aláhúzás linkek:
Jellemző példa a CSS, tartalmaz egy interaktív állam:
Background-image tulajdonság felelős aláhúzás, és ugyanolyan színű, mint a szöveg. A kód így néz terjedelmes. Általában azonban nem korlátozza magát, hogy csak egy szín a referencia. A személyes tapasztalat azt lehet mondani, hogy azok legalább három: az általános szín referencia, szürke és fehér (sötét háttér). Ez növekedést jelent kódot háromszor. De a kulcsszó currentColor ismét csodát:
Pszeudo-elemek
Biztos vagyok benne, hogy akkor szembesülnek a használata háromszögek CSS és többször használja őket. Én is. És nagyon gyakran, annak érdekében, hogy megragadják a megjelenése a linkek:
Ebben az esetben a CSS pszeudo-elem. után jár, mint egy háromszög. Segítségével currentColor, akkor nem kell megismételni a szín beállításokat a háromszög és interaktív kimondja:
A vízszintes vonal
Ez nem egy példa az írás egy kisebb mennyiségű kódot. Ez inkább egy példa az írás egy hatékonyabb és karbantartható kódot. A cél a vízszintes vonal, a címke
, a szétválasztása különböző részein a tartalmat. Úgy vélem, hogy a vonal nem szabad hagyni, hogy vizuálisan látszanak, és vonzza a figyelmet a:
Dudley (Dudley) már említette ezt az én példa, hogy én csak megismétlem, és egy kis módosítással:
A trükk az, hogy ha valaha is kell változtatni a szöveg színét, akkor nem kell változtatni a színét a vízszintes vonal. Folyamat automatizálás - ez az, amit mindig arra törekszünk, munkánk. Minél több kódot írunk, a nagyobb értéket egy automatizált megoldás.
Végül ...
Felülvizsgálat: Team webformyself.
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
