So verwenden Sie CSS-Sprites mit hellem und dunklem Modus
CSS Sprites sind eine Technik, die in der Webentwicklung verwendet wird, um die Anzahl von HTTP Anfragen einer Webseite. Dabei werden mehrere kleine Bilder zu einer einzigen größeren Bilddatei kombiniert und dann CSS verwendet, um bestimmte Abschnitte dieses Bildes als einzelne Elemente auf der Webseite anzuzeigen.
Der Hauptvorteil der Verwendung von CSS-Sprites besteht darin, dass sie dazu beitragen können, die Seitenladezeit einer Website zu verbessern. Jedes Mal, wenn ein Bild auf einer Webseite geladen wird, erfordert es eine separate HTTP-Anfrage, was den Ladevorgang verlangsamen kann. Durch Kombinieren mehrerer Bilder zu einem einzigen Sprite-Bild können wir die Anzahl der zum Laden der Seite erforderlichen HTTP-Anforderungen reduzieren. Dies kann zu einer schnelleren und reaktionsschnelleren Website führen, insbesondere bei Websites mit vielen kleinen Bildern wie Symbolen und Schaltflächen.
Durch die Verwendung von CSS-Sprites können wir auch das Browser-Caching nutzen. Wenn ein Benutzer eine Website besucht, wird sein Browser das Sprite-Bild nach der ersten Anfrage zwischenspeichern. Das bedeutet, dass nachfolgende Anfragen für einzelne Elemente auf der Webseite, die das Sprite-Bild verwenden, viel schneller sind, da der Browser das Bild bereits in seinem Cache hat.
CSS-Sprites sind nicht mehr so beliebt wie früher
CSS-Sprites werden immer noch häufig verwendet, um die Website-Geschwindigkeit zu verbessern, obwohl sie möglicherweise nicht mehr so beliebt sind wie früher. Aufgrund der hohen Bandbreite webp Formate, Bildkompression, Content-Delivery-Netzwerke (CDN), faul laden und starkes Caching Technologien sehen wir im Web nicht mehr so viele CSS-Sprites wie früher … obwohl es immer noch eine großartige Strategie ist. Dies ist besonders nützlich, wenn Sie eine Seite haben, die auf eine Vielzahl kleiner Bilder verweist.
CSS-Sprite-Beispiel
Um CSS-Sprites zu verwenden, müssen wir die Position jedes einzelnen Bildes innerhalb der Sprite-Bilddatei mit CSS definieren. Dies geschieht normalerweise durch die Einstellung von background-image
und background-position
Eigenschaften für jedes Element auf der Webseite, das das Sprite-Bild verwendet. Indem wir die x- und y-Koordinaten des Bildes innerhalb des Sprites angeben, können wir einzelne Bilder als separate Elemente auf der Seite anzeigen. Hier ist ein Beispiel … wir haben zwei Schaltflächen in einer einzigen Bilddatei:
Wenn wir wollen, dass das Bild auf der linken Seite angezeigt wird, können wir das div mit bereitstellen arrow-left
als Klasse, also zeigen die Koordinaten nur diese Seite an:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Und wenn wir den Pfeil nach rechts anzeigen möchten, würden wir die Klasse für unser div auf setzen arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS-Sprites für hellen und dunklen Modus
Eine interessante Verwendung davon sind helle und dunkle Modi. Vielleicht haben Sie ein Logo oder Bild mit dunklem Text, der auf einem dunklen Hintergrund nicht sichtbar ist. Ich habe dieses Beispiel für eine Schaltfläche erstellt, die eine weiße Mitte für den hellen Modus und eine dunkle Mitte für den dunklen Modus hat.
Mit CSS kann ich den entsprechenden Bildhintergrund anzeigen, je nachdem, ob der Benutzer den hellen oder dunklen Modus verwendet:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
Ausnahme: E-Mail-Clients unterstützen dies möglicherweise nicht
Einige E-Mail-Clients wie Gmail unterstützen keine CSS-Variablen, die in dem von mir bereitgestellten Beispiel verwendet werden, um zwischen hellen und dunklen Modi zu wechseln. Dies bedeutet, dass Sie möglicherweise alternative Techniken verwenden müssen, um zwischen verschiedenen Versionen des Sprite-Bildes für verschiedene Farbschemata zu wechseln.
Eine weitere Einschränkung besteht darin, dass einige E-Mail-Clients bestimmte CSS-Eigenschaften nicht unterstützen, die häufig in CSS-Sprites verwendet werden, wie z background-position
. Dadurch kann es schwierig werden, einzelne Bilder innerhalb der Sprite-Bilddatei zu positionieren.