Ինչպես օգտագործել CSS Sprites-ը թեթև և մութ ռեժիմով
CSS sprites-ը տեխնիկա է, որն օգտագործվում է վեբ մշակման մեջ՝ նվազեցնելու համարը HTTP վեբ էջի կողմից արված հարցումները: Դրանք ներառում են մի քանի փոքր պատկերների միավորում մեկ ավելի մեծ պատկերի ֆայլի մեջ և այնուհետև օգտագործում CSS՝ այդ պատկերի հատուկ հատվածները որպես առանձին տարրեր վեբ էջում ցուցադրելու համար:
CSS sprites-ի օգտագործման հիմնական առավելությունն այն է, որ դրանք կարող են օգնել բարելավել կայքի էջերի բեռնման ժամանակը: Ամեն անգամ, երբ պատկերը բեռնվում է վեբ էջում, այն պահանջում է առանձին HTTP հարցում, որը կարող է դանդաղեցնել բեռնման գործընթացը: Միավորելով բազմաթիվ պատկերներ մեկ սփրայթ պատկերի մեջ՝ մենք կարող ենք նվազեցնել HTTP հարցումների քանակը, որոնք անհրաժեշտ են էջը բեռնելու համար: Սա կարող է հանգեցնել ավելի արագ և ավելի պատասխանատու կայքէջի, հատկապես այն կայքերի համար, որոնք ունեն բազմաթիվ փոքր պատկերներ, ինչպիսիք են պատկերակները և կոճակները:
CSS sprites-ի օգտագործումը նաև թույլ է տալիս մեզ օգտվել բրաուզերի քեշավորման հնարավորությունից: Երբ օգտատերը այցելում է կայք, նրա զննարկիչը կքեշավորի սփրայթ պատկերը առաջին հարցումից հետո: Սա նշանակում է, որ վեբ էջի առանձին տարրերի հետագա հարցումները, որոնք օգտագործում են sprite պատկերը, շատ ավելի արագ կլինեն, քանի որ զննարկիչն արդեն կունենա պատկերն իր քեշում:
CSS Sprites-ը այնքան հայտնի չեն, որքան նախկինում
CSS sprites-ները դեռ սովորաբար օգտագործվում են կայքի արագությունը բարելավելու համար, թեև դրանք կարող են այնքան տարածված չլինել, որքան նախկինում: Բարձր թողունակության պատճառով, webp ձևաչափեր, պատկերի սեղմում, բովանդակության առաքման ցանցեր (CDN), ծույլ բեռնում, եւ ուժեղ քեշավորում տեխնոլոգիաներ, մենք չենք տեսնում այնքան CSS sprites, որքան նախկինում էինք համացանցում… թեև դա դեռ հիանալի ռազմավարություն է: Այն հատկապես օգտակար է, եթե ունեք մի էջ, որը հղում է կատարում բազմաթիվ փոքր պատկերների:
CSS Sprite օրինակ
CSS sprites օգտագործելու համար մենք պետք է սահմանենք յուրաքանչյուր առանձին պատկերի դիրքը sprite պատկերի ֆայլում՝ օգտագործելով CSS: Սա սովորաբար արվում է սահմանելով background-image
և background-position
հատկություններ վեբ էջի յուրաքանչյուր տարրի համար, որն օգտագործում է sprite պատկերը: Նշելով պատկերի x և y կոորդինատները sprite-ում, մենք կարող ենք առանձին պատկերներ ցուցադրել որպես առանձին տարրեր էջի վրա: Ահա մի օրինակ… մենք ունենք երկու կոճակ մեկ պատկերի ֆայլում.
Եթե ցանկանում ենք, որ ձախ կողմի պատկերը ցուցադրվի, մենք կարող ենք տրամադրել div-ը arrow-left
որպես դաս, այնպես որ կոորդինատները ցուցադրում են միայն այդ կողմը.
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Եվ եթե մենք ցանկանում ենք ցուցադրել ճիշտ սլաքը, մենք կսահմանենք դասը մեր div-ի համար arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites թեթև և մութ ռեժիմի համար
Դրա մի հետաքրքիր օգտագործումը լույսի և մութ ռեժիմների հետ է: Հավանաբար դուք ունեք պատկերանշան կամ պատկեր, որի վրա մուգ տեքստ կա, որը տեսանելի չէ մուգ ֆոնի վրա: Ես արել եմ կոճակի այս օրինակը, որն ունի սպիտակ կենտրոն լուսային ռեժիմի համար և մուգ կենտրոն՝ մուգ ռեժիմի համար:
Օգտագործելով CSS-ը, ես կարող եմ ցուցադրել համապատասխան պատկերի ֆոն՝ հիմնվելով այն բանի վրա, թե օգտատերը օգտագործում է թեթև կամ մութ ռեժիմ.
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
Բացառություն. էլփոստի հաճախորդները կարող են չաջակցել սա
Որոշ էլփոստի սպասառուներ, ինչպիսիք են Gmail-ը, չեն աջակցում CSS փոփոխականներին, որոնք օգտագործվում են իմ տրամադրած օրինակում լուսային և մութ ռեժիմների միջև անցնելու համար: Սա նշանակում է, որ ձեզ կարող է անհրաժեշտ լինել օգտագործել այլընտրանքային տեխնիկա՝ տարբեր գունային սխեմաների համար սփրայթ պատկերի տարբեր տարբերակների միջև անցնելու համար:
Մեկ այլ սահմանափակում այն է, որ որոշ էլ. background-position
. Սա կարող է դժվարացնել առանձին պատկերների տեղադրումը sprite պատկերի ֆայլում: