Likbez pe spioni CSS

CSS Sprites

Sprite-urile CSS sunt rezultatul elementelor individuale ale unei singure imagini pe o pagină web. Aceasta este o imagine mare, sau mai multe diferite, dar combinate într-un fișier una lângă cealaltă. Adesea, în mod similar au fost grupate o mulțime de icoane diferite. Dezvoltatorii numesc acest fișier o rețea principală. De exemplu, să facem o singură fotografie, din care trebuie să afișăm diferite elemente ale acesteia în diferite părți ale paginii. Alternativ, tăiați-l în bucăți și definiți fiecare parte separat, 1 element - 1 fișier separat. Cu toate acestea, acum câțiva ani exact asta a făcut toată lumea. Cea mai simplă versiune este în mod inerent. Dar această metodă are un dezavantaj semnificativ, și anume, numărul de cereri HTTP pe care serverul le trimite la browser. O imagine este o cerere. Mai multe dintre ele, cu atât mai mult va încărca pagina. Prin urmare, sprite CSS sunt destinate în primul rând pentru a reduce numărul acestor același zaprosov.Vyshe imaginea arată destul de clar principiul sprite funcționare CSS dacă este prezent în zona selectată a unui cerc drept câmp cu imaginea stranitse.Rabotaet noastre această tehnologie este după cum urmează. În pagina noastră există un bloc:

  • Noua metoda url () / clip, utilizând proprietatea conținutului pentru a insera un sprite, tăiat cu ajutorul proprietății clipului:
Cum funcționează. În loc de a modela pseudo-elementul ca fundal, îl folosim pentru a insera o imagine (prin conținut). Cu clipul, îl decupăm astfel încât să fie afișată numai partea necesară. Aceasta înseamnă că nu este necesar să inserați etichete goale în imagini, astfel încât să nu afișați alte părți ale imaginii (de obicei folosite ca imagine de fundal a elementelor mari). Vom muta valoarea clipului folosind proprietățile din stânga și / sau de sus. Dacă nu tăiați spritele, imaginile din aceasta ar trebui să se alinieze la marginea stângă sau dreaptă pentru a se potrivi contextului RTL / LTR (poz. Fundal: | [valoare verticală]). Probleme apar, de asemenea, atunci când se creează sprite, în care imaginile urmează unul după altul (deoarece alte imagini pot fi de asemenea afișate). Dacă tăiați sprite, atunci imaginile se găsesc unul pe celălalt. Exemplu: Avantajele acestei tehnici în comparație cu altele:
  • Afișați la imprimare. Spre deosebire de imaginile de fundal, atunci când sunt tipărite, ele sunt imprimate în document.
  • Disponibilitate. Spre deosebire de imaginile de fundal, acestea vor fi afișate în modul de contrast înalt sau în stiluri CSS contrastante.
  • Funcționează în IE. Metoda este potrivită pentru Internet Explorer 6 și 7.
Rețineți, de asemenea, că schema URI de date poate fi utilizată pentru a ignora solicitările HTTP. IE 6/7 nu acceptă această schemă, dar puteți utiliza MHTML pentru IE6 / 7. 3. Stylize link-uri folosind pseudo-elemente. Nicholas Galagher a arătat o mulțime de jetoane interesante legate de pseudoelemente. Singurul lucru pe care vreau să-l adaug este un exemplu de utilizare: după ce pentru link-uri de stil, cum ar fi "citește mai mult", de exemplu:

Articole similare

Pagina anterioară

Pagina următoare