Eine Einführung in die Bedeutung, Vor- und Nachteile von CSS-Sprites für das CSS-Layout

CSS Sprites-Technologie Bereits 2005 veröffentlichte Dave Shea, der Besitzer von CSS Zengarden, eine ausführliche Erläuterung dieser Technologie in ALA.

Ursprünglich wurde es nur unter CSS-Spielern als Produktionsmethode verbreitet. Später wurden 14 Regeln für schneller ladende Websites veröffentlicht und unter Technikern verbreitet. Die erste Regel, „Weniger HTTP-Anfragen stellen“, erwähnte CSS Sprites. So wurde dieser kleine Kobold populär und es erschienen sogar Online-Generierungstools, was nicht mehr aufzuhalten war. In letzter Zeit haben viele inländische Blogs CSS Sprites erwähnt. Das bekannteste Beispiel sind die Animationen unter google.co.kr. In der neuesten Version von YUI werden auch CSS-Sprites verwendet. Fast alle dekorativen CSS-Bilder werden von einem 40×2000-Bild abgedeckt. Facebook, eine große Social-Networking-Site, verwendete kürzlich ein 22×1150-Bild, um alle Symbole abzudecken. Plötzlich waren CSS-Sprites überall.

So funktionieren CSS-Sprites

Wir wissen, dass HTML seit der CSS-Revolution tendenziell semantisch ist. Im Allgemeinen werden dekorative Inhalte nicht mehr in Tags geschrieben, sondern die Rendering-Aufgabe wird CSS übergeben. Die GUI ist farbenfroh und für die Dekoration mit verschiedenen schönen Bildern unverzichtbar. Die Produktionsmethode in der neuen Ära besteht darin, HTML mit verschiedenen Hooks zu füllen und diese dann von CSS verarbeiten zu lassen.

Wenn Bilder verwendet werden müssen, wird dies derzeit durch das CSS-Attribut „background-image“ in Kombination mit „background-repeat“, „background-position“ usw. erreicht. (Exkurs: Warum entferne ich die aktuelle Stufe, wenn der Browser in Zukunft Inhalte unterstützt , zusätzliche Implementierungsmethode). Unser Protagonist ist, Sie müssen es erraten haben, eine Hintergrundposition. Durch Anpassen des Werts von „background-position“ kann das Hintergrundbild in unterschiedlichen Erscheinungsformen vor Ihnen erscheinen. Tatsächlich hat sich das Gesamtbild des Bildes nicht verändert. Durch die Änderung der Bildposition sehen Sie nur das, was Sie sehen sollten. Es ist wie das Datum auf einer Uhr. Sie sehen es heute als 21 und morgen als 22, weil seine Position um eine Stelle nach oben gesprungen ist. Sie wissen also wahrscheinlich, dass CSS-Sprites im Allgemeinen nur in einer Box (Box) mit fester Größe verwendet werden können, sodass die Teile, die nicht sichtbar sein sollen, blockiert werden können.

Nehmen wir als Beispiel YUIs sprite.png. Wenn wir einen solchen Code haben, steht max für Maximierung und min für Minimierung. Wir müssen sie mit entsprechenden schönen Bildern abgleichen (damit unsere Website attraktiv sein kann).

Beide Klassen verwenden dasselbe Bild:

Wir sehen eine graue Wolke, ja, weil wir die Hintergrundposition nicht angegeben haben, die standardmäßig 0 0 ist. Sie können sich sprite.png ansehen. Diese Position ist der graue Block. Okay, wir müssen die Positionen des Pluszeichens finden, das die Maximierung darstellt, und des Minuszeichens, das die Minimierung darstellt. Nach der Messung befindet sich die Schaltfläche zum Maximieren bei 350 Pixel auf der Y-Achse und die Schaltfläche zum Minimieren bei 400 Pixel auf der Y-Achse. Überlegen Sie, wie wir sie anzeigen können. Offensichtlich müssen wir sprite.png aktualisieren. Der Code lautet wie folgt:

Diesmal ist es uns gelungen!

Vorteile von CSS Sprites

Wir haben bereits zuvor gelernt, dass der Grund, warum CSS Sprites plötzlich nicht mehr funktioniert, mit seiner Fähigkeit zusammenhängt, die Website-Leistung zu verbessern. Offensichtlich ist dies einer seiner großen Vorteile. Bei der normalen Produktionsmethode wird jetzt eine große Anzahl von Bildern zu einem Bild zusammengeführt, wodurch die Anzahl der HTTP-Verbindungen erheblich reduziert wird. Die Anzahl der HTTP-Verbindungen hat einen wichtigen Einfluss auf die Ladeleistung der Website.

Nachteile von CSS Sprites

Was die Wartbarkeit betrifft, ist dies im Allgemeinen ein zweischneidiges Schwert. Manchen gefällt es vielleicht, anderen vielleicht nicht, denn jedes Mal, wenn das Bild geändert wird, muss man Inhalte löschen oder dem Bild hinzufügen, was etwas umständlich erscheint. Und auch das Berechnen der Position von Bildern (insbesondere Bildern mit Tausenden von Pixeln) ist ziemlich unangenehm. Unter dem Motto „Leistung“ können diese natürlich allesamt überwunden werden.

Da die Position des Bildes auf einen absoluten Wert festgelegt werden muss, geht Flexibilität wie die Mitte verloren.

Wie bereits erwähnt, muss die Größe der Box begrenzt werden, bevor CSS-Sprites verwendet werden können, da es sonst zu Störungen des Bildes kommen kann. Das heißt, CSS-Sprites sind in manchen Situationen nicht geeignet, in denen nicht unidirektionale gekachelte Hintergründe und Webseitenskalierung erforderlich sind. Die Lösung von YUI besteht darin, den Abstand zwischen Bildern zu vergrößern, sodass eine begrenzte Skalierung beibehalten werden kann.

Zusammenfassung der CSS-Sprites

Leistung übertrifft alles andere. CSS Sprites sind eine Technologie, die es wert ist, gefördert zu werden. Es eignet sich besonders für FIR, z. B. das Ersetzen von Symbolen mit fester Größe. Um die Kompatibilität zu gewährleisten, empfiehlt es sich, Teile des Bildes in einem gewissen Abstand voneinander zu halten.