Content Marketing

Ինչպես օգտագործել 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-ում, մենք կարող ենք առանձին պատկերներ ցուցադրել որպես առանձին տարրեր էջի վրա: Ահա մի օրինակ… մենք ունենք երկու կոճակ մեկ պատկերի ֆայլում.

CSS 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 sprite բաց մուգ

Օգտագործելով 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 պատկերի ֆայլում:

Douglas Karr

Douglas Karr -ի CMO-ն է OpenINSIGHTS և հիմնադիրը Martech Zone. Դուգլասը օգնել է MarTech-ի տասնյակ հաջողակ ստարտափների, աջակցել է ավելի քան 5 միլիարդ դոլարի չափով Martech-ի ձեռքբերումների և ներդրումների պատշաճ ուսումնասիրությանը և շարունակում է աջակցել ընկերություններին իրենց վաճառքի և շուկայավարման ռազմավարությունների իրականացման և ավտոմատացման գործում: Դուգլասը միջազգայնորեն ճանաչված թվային փոխակերպման և MarTech փորձագետ և խոսնակ է: Դուգլասը նաև Դումմիի ուղեցույցի և բիզնեսի առաջնորդության գրքի հրատարակված հեղինակ է:

Առնչվող հոդվածներ

Վերադառնալ սկիզբ կոճակը
փակել

Հայտնաբերվել է Adblock

Martech Zone կարող է անվճար տրամադրել ձեզ այս բովանդակությունը, քանի որ մենք դրամայնացնում ենք մեր կայքը գովազդից ստացված եկամուտների, փոխկապակցված հղումների և հովանավորությունների միջոցով: Մենք երախտապարտ կլինենք, եթե մեր կայքը դիտելիս հեռացնեիք ձեր գովազդային արգելափակիչը: