Benutzerspezifische Werkzeuge

Sektionen
Less CSS-Sprites und Hi-Res Displays

Direkt zum Inhalt | Direkt zur Navigation

Less CSS-Sprites und Hi-Res Displays

20.09.2016 in TechTalk
Sprites verwenden - flexibel und einfach.

Less CSS-Sprites und Hi-Res Displays

Glatte Sache: Stufenfreie Darstellung auf Retina bzw HiRes-Displays

Warum Sprites?

Um die Ladezeit von Webseiten zu minimieren, kommt für Grafiken wie Icons, Logos, etc. die Verwendung von Sprites in Frage.
Ein Sprite beinhaltet zB. alle einzelnen Icons die auf einer Webseite verwendet werden, in einer einzelnen Grafik Datei.
Der Vorteil besteht darin, dass die Serveranfragen (HTTP-Requests) reduziert werden (es wird nur eine Datei geladen) und die Webseite somit schneller angezeigt wird.
Das Sprite wird dann mit der CSS Eigenschaft background-image als Hintergrundbild eingebunden und mit background-position ein- bzw. ausgeblendet.

 

Warum ein LESS Mixin?

Vor allem wenn viele Icons verwendet werden oder später neue dazu kommen, kann die pixelgenaue Positionierung allerdings Nerven und Zeit kosten.
Hinzu kommt, dass heute auch hochauflösende Displays berücksichtigt werden müssen, sprich - das Sprite auch für diese Displays optimiert werden muss (doppelte Grösse), etc.

CSS Code

.icon-1 {
  background-image: url("../sprite.png");
  background-position: 0px 0px;
  width: 51px;
  height: 50px;
}
.icon-2 {
  background-image: url("../sprite.png");
  background-position: 0px -50px;
  width: 51px;
  height: 50px;
}}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .icon-1 {
    background-image: url("../sprite@2x.png");
    background-size: 52px 250px;
  }
  .icon-2 {
    background-image: url("../sprite@2x.png");
    background-size: 52px 250px;
  }
}

 

Um das Ganze zu vereinfachen habe ich ein less mixin erstellt, welches die Positionierung und das Laden des korrekten Sprites vereinfacht und dem Programmierer somit viel Arbeit abnimmt.

Mit Verwendung vom LESS Mixin

.mySprite(@x, @y, @xoffset:0, @yoffset:0) {
    .sprite("../sprite.png", 52px, 250px, 50px, @x, @y, @xoffset, @yoffset);
}
.icon-1 {
    .mySprite(0, 0);
    width: 51px;
    height: 50px;
}
.icon-2 {
    .mySprite(0, 1);
    width: 51px;
    height: 50px;
}

Das Less Mixin findet ihr zur freien Verwendung auf github:
https://github.com/webmeisterei/sprite_less/

Live Demo zum Ausprobieren

 

 


Kommentare unterstützt durch Disqus

Webmeisterei GmbH, Bildgasse 10d, 6850 Dornbirn, AT, Telefon +43 5572 908000, Fax +43 5572 908000-15, office@webmeisterei.com