Die CSS-Sprites sind eine sehr beliebte Methode um die Performance einer Website zu verbessern. Die CSS-Sprites sind zum einen sparsam bei der Dateigröße, das äußert sich vor allem bei vielen kleinen Grafiken (z. B. Icons) und zudem werden HTTP-Aufrufe gespart. Als Beispiel habe ich die Hintergrundgrafik eingefügt, mit der ich hier die Icons der diversen Netzwerke einbinde.
Standardmäßig eignen sich die CSS-Sprites dann wenn man entweder die Höher oder die Breite des Elements kennt. Kennt man die Breite, dann sortiert man die einzelnen Grafiken horizontal. Kennt man die Höhe, dann sortiert man dagegen vertikal. Wenn man aber weder die Breite noch die Höhe des Elements kennt, dann hat man ein Problem. Hier kann aber der Artikel Pseudo Spriting helfen.
Dort werden zwei Lösungswege vorgestellt. Zum einen greift man auf das Pseudoelement
:before zurück und in der zweiten Lösung ordnet man die einzelnen Grafiken diagonal an.
Neue Möglichkeit um Floats zu beenden (clearen)
Auf A new micro clearfix hack wird eine recht neue Methode vorgestellt um die Floats zu beenden bzw. zu clearen:
/* Für moderne Browser */
.cf:before,
.cf:after {content: ""; display: table;}
.cf:after {clear: both;}
/* Für IE 6/7 (löst hasLayout aus) */
.cf {zoom: 1;}Auf Über hasLayout gibt es eine ausführliche, deutschsprachige Beschreibung.
normalize.css vs. reset.css
Wer sich bis jetzt mit dem CSS-Reset nicht anfreunden konnte und sich über unterschiedliche Darstellung diverser Elemente in verschiedenen Browsern ärgert, für den könnte die normalize.css ein Blick wert sein.
Anstatt wie beim CSS-Reset alles auf “Null” zu setzen werden in der normalize.css die Elemente aneinander angeglichen und es wird versucht diverse Bugs auszubügeln.
Wer es als gegeben hinnimmt, dass sich manche Elemente von Browser zu Browser unterscheiden können, der lässt sowohl die reset.css wie die normalize.css links liegen.
Via Guido Mühlwitz.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
