Iyara Aaye Rẹ pẹlu Awọn Sprites CSS

ayelujara spritemaster

Mo kọ nipa iyara oju-iwe diẹ diẹ lori aaye yii o jẹ apakan pataki ti itupalẹ ati awọn ilọsiwaju ti a ṣe si awọn aaye awọn alabara wa. Yato si gbigbe si awọn olupin alagbara ati lilo awọn irinṣẹ bii Awọn nẹtiwọọki Ifijiṣẹ Akoonu, nọmba awọn imuposi siseto miiran wa ti olugbala wẹẹbu apapọ le lo.

Idiwọn fun Iwe atilẹba Style Cascading ti ju ọdun 15 lọ ni bayi. CSS jẹ itankalẹ pataki ninu idagbasoke wẹẹbu nitori o ya akoonu kuro lati apẹrẹ. Wo buloogi yii ati eyikeyi miiran ati ọpọlọpọ ti iyatọ ti aṣa jẹ nìkan ninu iwe-aza ti a so. Awọn iwe apẹrẹ Styles tun ṣe pataki nitori wọn wa ni fipamọ ni agbegbe ni kaṣe kan ninu ẹrọ aṣawakiri rẹ. Bi abajade, bi awọn eniyan ṣe tẹsiwaju lati ṣabẹwo si aaye rẹ, wọn kii ṣe igbasilẹ iwe aṣa nigbakugba… kan ni oju-iwe oju-iwe.

Ọkan ano ti CSS ti igbagbogbo ko lo ni Awọn Sprites CSS. Nigbati olumulo kan ba ṣabẹwo si oju opo wẹẹbu rẹ, o le ma ṣe akiyesi pe wọn kii ṣe ibeere kan fun oju-iwe naa. Wọn ṣe awọn ibeere lọpọlọpọ… Ibeere fun oju-iwe naa, fun eyikeyi awọn awoṣe ara, fun eyikeyi awọn faili JavaScript ti a so, ati lẹhinna aworan kọọkan. Ti o ba ni akori ti o ni lẹsẹsẹ awọn aworan fun awọn aala, awọn ifipa kiri, awọn abẹlẹ, awọn bọtini, ati bẹbẹ lọ… aṣawakiri naa ni lati beere ọkọọkan, ni ẹẹkan lati olupin ayelujara rẹ. Ṣe isodipupo iyẹn nipasẹ ẹgbẹẹgbẹrun awọn alejo ati pe iyẹn le jẹ ẹgbẹẹgbẹẹgbẹrun awọn ibeere ti a ṣe si olupin rẹ!

Eyi, ni ọna, fa fifalẹ aaye rẹ. A aaye ti o lọra le ni ipa iyalẹnu lori adehun igbeyawo ati awọn iyipada ti awọn olugbọ rẹ ṣe. Igbimọ kan ti awọn olupilẹṣẹ wẹẹbu nla lo ni fifi gbogbo awọn aworan sinu faili kan… ti a pe ni sprite. Dipo ṣiṣe ibeere fun ọkọọkan awọn aworan faili rẹ, ni bayi o nilo lati jẹ ibeere kan nikan fun aworan ẹyọkan!

O le ka nipa bii CSS Sprites ṣe n ṣiṣẹ ni CSS-Awọn ẹtan or Asọ irohin CSS Sprite ifiweranṣẹ. Koko mi kii ṣe lati fihan ọ bi o ṣe le lo wọn, o kan lati gba ọ ni imọran lati rii daju pe ẹgbẹ idagbasoke rẹ ṣafikun wọn sinu aaye naa. Apẹẹrẹ ti Awọn ẹtan CSS pese fihan awọn aworan 10 ti o jẹ ibeere 10 ati ṣafikun si 20.5Kb. Nigbati a kojọpọ ni ẹyọkan kan, o jẹ 1 ibeere ti o jẹ 13kb! Ibeere irin-ajo yika ati awọn akoko idahun fun awọn aworan 9 ti lọ bayi ati iye data ti dinku nipasẹ diẹ sii ju 30%. Isodipupo pe nipasẹ nọmba awọn alejo lori aaye rẹ ati pe iwọ yoo fa irun diẹ ninu awọn orisun gaan!

agbayenavawọn Apple Pẹpẹ lilọ kiri jẹ apẹẹrẹ nla. Bọtini kọọkan ni awọn ipinlẹ diẹ… boya o wa ni oju-iwe, pa oju-iwe naa, tabi mouse lori bọtini naa. CSS ṣalaye awọn ipoidojuko ti bọtini ati ṣafihan agbegbe ti ipo ti o tọ si aṣàwákiri awọn olumulo. Gbogbo awọn ipinlẹ wọnyi ti wó papọ ni iwọn ayaworan kan - ṣugbọn agbegbe ti o han nipasẹ agbegbe bi a ṣe ṣalaye ninu iwe aṣa.

Ti awọn olupilẹṣẹ rẹ ba fẹran awọn irinṣẹ, toonu kan wa nibẹ ti o le ṣe iranlọwọ fun wọn, pẹlu awọn Kọmpasi CSS ilana, BeereRe fun ASP.NET, CSS-Spriter fun Ruby, CSSSprite akosile fun Photoshop, SpritePad, SpriteRight, SpriteCow, Awọn ZeroSprites, Generator Fondue's CSS Sprite Generator, Sprite Titunto Wẹẹbu, Ati awọn SpriteMe Iwe bukumaaki.

Sikirinifoto ti Sprite Titunto Wẹẹbu:
ayelujara spritemaster

Martech Zone ko lo awọn aworan abẹlẹ jakejado akori rẹ, nitorinaa a ko ni lati ran ilana yii ni akoko yii.

2 Comments

  1. 1

    Duro… kii ṣe gbogbo ikojọpọ jẹ “aworan” (tabi “ọkọ ofurufu”), ati aworan-aworan kọọkan (tabi ẹgbẹ-ẹgbẹ awọn aworan ni ọran ti ere idaraya tabi awọn iyipada ibaraenisepo) “sprite”?

    Boya nkan ti a ti fun lorukọmii lati igba to koja ti mo lököökan yi too ti ohun sugbon mo lea bura awọn Sprite wà ni ano ti o pari soke ni han, ko ni ńlá data tabili ti o ti fa lati.

    (“Tabili Sprite”… iyẹn kii ṣe bẹẹ?)

    • 2

      A le sọrọ meji ti o yatọ ohun, Mark. Pẹlu CSS, o le pato pato iru 'apakan' ti faili aworan kan lati ṣe afihan lilo awọn ipoidojuko. Eyi n gba ọ laaye lati fi gbogbo awọn aworan rẹ sinu 'sprite' ẹyọkan ati lẹhinna kan tọka si agbegbe ti o fẹ lati ṣafihan pẹlu CSS naa.

Kini o le ro?

Aaye yii nlo Akismet lati dinku apamọ. Mọ bi a ṣe n ṣalaye data rẹ ti o ṣawari.