Keverjük össze CSS-sprite, blog webmaster

Keverjük össze CSS-sprite, blog webmaster

Amikor ellenőrzi ezt a blogot Google Page Speed ​​kiadott egy megjegyzést, hogy szeretné egyesíteni több kisebb CSS-sprite. Tegnap megöltem egy csomó időt, hogy tanulmányozza ezt a témát. Sokan akkor valószínűleg látta a különböző mintákat egy nagy kép egy csomó kis ikonok. Sprite használja a Facebook, a Google és sok más internetes óriások.

Ez egy nagy kép, ha a megbízást sorakoznak egyéb apró részletek sablont. CSS segítségével akkor hívják, és beillesztjük a kívánt helyre. Mi a teendő? Talán, annak érdekében, hogy csökkentse a vizsgálatok száma, és töltse le a kis képek sablont. Sokkal könnyebb, ha letölthető sprite majd csak vissza belőle meghatározott részét, mint egy csomó kis ikonok. A neten találtam egy csomó érdekes anyagot létrehozni CSS-sprite a menü a honlap referencia. Sajnos, sem az anyag nem válaszolt a kérdésre, hogy mi a teendő. Ie Jelenlegi Google Page Speed ​​egyfajta sablon képet csoport, mely kiegészült a CSS-sprite. És hogyan kell csinálni? Mit és hol kell regisztrálni, és helyére? Egy szó róla.
Ma vagyok egy példát erre a blog megpróbálom elmagyarázni részletesen, hogy ez hogyan történik.
Először is, mit kínálok Google Page Speed ​​egyesíteni CSS-sprite.

Keverjük össze CSS-sprite, blog webmaster

Az összes tervezett kép egyértelmű, hogy van egy bizonyos sablon mappában kis képek dekoráció. Butaság lenne a Sprite és hozzá képeket a téma és a plug-inek. El sem tudom képzelni, hogyan lehet majd hallható. Ezért, hogy hozzon létre CSS-sprite, én választottam egy sablon mappa kis képekre.
A többit el kell menni, hogy a krími Sudak Birjuzova 83.

Hozzon létre egy sprite

Mentse a létrehozott fájlt, és optimalizálják, amikor smushit.com optimalizálása után szivattyúk FTP útján a kívánt mappát.

Integrálása a sprite a sablon

Van fokozatosan jön a legnehezebb. Most arra van szükség, hogy cserélje ki a régi kódot regisztrálhat egy új, amely a CSS-sprite.
Kezdeni, én megmutatom, hogyan levezettem korábban a CSS kódot ezeket a kis képeket.

A kódex ezt a képet egy sprite:

Hogy lesz:

Szóval cserélni összes kép. Azt szeretnénk, hogy néhány fontosabb megjegyzéseket.
[Fontos] a sprite kép legyen csak no-repeat pontosan meghatározott helyen és paraméterek előírt magasság, szélesség. Csak ebben az esetben nincs probléma. [/ Fontos]

Azt is olvasható:

  • Keverjük össze CSS-sprite, blog webmaster
    Növelje webhelysebességet Google Page Speed
  • Keverjük össze CSS-sprite, blog webmaster
    Telepítése Google Page Speed
  • Keverjük össze CSS-sprite, blog webmaster
    Csatlakozás API fordítási szolgáltatások dugó Codestyling Lokalizáció
  • Keverjük össze CSS-sprite, blog webmaster
    Hiba az eszközök webmestereknek Google

Kapcsolódó cikkek