منځپانګه بازار

د رڼا او تیاره حالت سره د CSS سپریټس کارولو څرنګوالی

سی ایس ایس sprites یو تخنیک دی چې د ویب پراختیا کې کارول کیږي ترڅو د شمیر کمولو لپاره HTTP غوښتنې د ویب پاڼې لخوا ترسره شوي. دوی په یو لوی لوی عکس فایل کې د ډیری کوچني عکسونو یوځای کول او بیا په ویب پا onه کې د انفرادي عناصرو په توګه د دې عکس ځانګړي برخې ښودلو لپاره د CSS کارول شامل دي.

د CSS سپریټونو کارولو لومړنۍ ګټه دا ده چې دوی کولی شي د ویب پاڼې لپاره د پاڼې بار وخت ښه کولو کې مرسته وکړي. هرکله چې یو انځور په ویب پاڼه کې پورته کیږي، دا د جلا HTTP غوښتنې ته اړتیا لري، کوم چې کولی شي د بارولو پروسه ورو کړي. په یو واحد سپریټ عکس کې د ډیری عکسونو په یوځای کولو سره، موږ کولی شو د پاڼې پورته کولو لپاره د HTTP غوښتنو شمیر کم کړو. دا کولی شي د چټک او ډیر ځواب ویونکي ویب پاڼې پایله ولري، په ځانګړې توګه د هغو سایټونو لپاره چې ډیری کوچني عکسونه لکه شبیه او بټونه لري.

د سی ایس ایس سپریټونو کارول موږ ته اجازه راکوي چې د براوزر کیچنګ څخه ګټه واخلو. کله چې یو کاروونکی ویب پاڼې ته مراجعه کوي، د دوی براوزر به د لومړي غوښتنې وروسته د سپریټ عکس ذخیره کړي. دا پدې مانا ده چې په ویب پا onه کې د انفرادي عناصرو لپاره راتلونکي غوښتنې چې د سپریټ عکس کاروي به خورا ګړندي وي ځکه چې براوزر به دمخه عکس په خپل کیچ کې ولري.

CSS سپرایټس دومره مشهور نه دي لکه څنګه چې دوی یو ځل وو

د سی ایس ایس سپریټونه لاهم د سایټ سرعت ښه کولو لپاره کارول کیږي، که څه هم دوی ممکن دومره مشهور نه وي لکه څنګه چې دوی یو ځل وو. د لوړ بینډ ویت له امله، ویب پاه شکلونه د انځور فشارد منځپانګې رسولو شبکې (CDN), سست وزلی، او قوي کیشینګ ټیکنالوژي، موږ دومره ډیری CSS سپریټونه نه ګورو لکه څنګه چې موږ په ویب کې کارول ... که څه هم دا لاهم یوه عالي ستراتیژي ده. دا په ځانګړې توګه ګټور دی که تاسو داسې پاڼه لرئ چې د ډیری کوچنیو انځورونو حواله کوي.

د سی ایس ایس سپریټ مثال

د CSS سپریټ کارولو لپاره، موږ اړتیا لرو چې د CSS په کارولو سره د سپریټ عکس فایل کې د هر انفرادي عکس موقعیت تعریف کړو. دا عموما د تنظیم کولو له لارې ترسره کیږي background-image او background-position په ویب پاڼه کې د هر عنصر لپاره ځانګړتیاوې چې د سپریټ انځور کاروي. په سپرایټ کې د عکس د x او y همغږي مشخص کولو سره، موږ کولی شو انفرادي انځورونه په پاڼه کې د جلا عناصرو په توګه ښکاره کړو. دلته یو مثال دی ... موږ په یوه عکس فایل کې دوه بټونه لرو:

د سی ایس ایس سپریټ مثال

که موږ غواړو عکس په ښي خوا کې ښکاره شي، موږ کولی شو 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 سپریټونه

د دې یو په زړه پورې کارول د سپک او تیاره حالتونو سره دي. شاید تاسو یو لوګو یا عکس ولرئ چې تیاره متن لري چې په تیاره پس منظر کې نه لیدل کیږي. ما دا د یوې تڼۍ مثال ترسره کړ چې د سپک حالت لپاره سپین مرکز او د تیاره حالت لپاره تیاره مرکز لري.

css سپریټ رڼا تیاره

د 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 متغیرونو ملاتړ نه کوي، کوم چې په مثال کې کارول کیږي چې ما د رڼا او تیاره حالتونو ترمنځ بدلولو لپاره چمتو کړی. دا پدې مانا ده چې تاسو ممکن د مختلف رنګ سکیمونو لپاره د سپریټ عکس مختلف نسخو ترمینځ بدلولو لپاره بدیل تخنیکونو کارولو ته اړتیا ولرئ.

بل محدودیت دا دی چې ځینې بریښنالیک پیرودونکي د ځانګړو CSS ملکیتونو ملاتړ نه کوي چې معمولا په CSS سپریټونو کې کارول کیږي، لکه background-position. دا کولی شي د سپریټ عکس فایل کې د انفرادي عکسونو موقعیت ستونزمن کړي.

Douglas Karr

Douglas Karr د CMO دی OpenINSIGHTS او بنسټ ایښودونکی Martech Zone. ډګلاس د لسګونو بریالي مارټیک پیلونو سره مرسته کړې ، د مارټیک استملاک او پانګوونې کې د 5 ملیارد ډالرو څخه ډیر په پام کې نیولو کې مرسته کړې ، او د دوی د پلور او بازار موندنې ستراتیژیو پلي کولو او اتومات کولو کې شرکتونو سره مرستې ته دوام ورکوي. ډګلاس په نړیواله کچه پیژندل شوی ډیجیټل بدلون او د مار ټیک ماهر او سپیکر دی. ډګلاس د ډمي لارښود او د سوداګرۍ مشرتابه کتاب یو خپور شوی لیکوال هم دی.

اړونده بیشتر

بېرته پورته تڼۍ ته
نژدې

اډ بلاک کشف شو

Martech Zone د دې وړتیا لري چې تاسو ته دا مینځپانګه په هیڅ لګښت چمتو کړي ځکه چې موږ د اعلاناتو عاید ، وابسته لینکونو ، او سپانسرشپونو له لارې زموږ سایټ منیټ کوو. موږ به ستاینه وکړو که تاسو زموږ د سایټ لیدو سره سم خپل د اعلاناتو بلاکر لرې کړئ.