Tutorials / Webentwicklung / Webseiten-Optimierung / Ladezeit verbessern / CSS / Kurzschreibweise (Shorthand) / List-Style

Mit CSS die übertragene Datenmenge reduzieren

Die CSS Kurzschreibweise (Shorthand) verwenden

CSS Kurzschreibweise für die List-Style-Eigenschaften verwenden

Die List-Style-Eigenschaft ist eine CSS-Kurzschreibweise für die einzelnen Eigenschaften list-style-type, list-style-position und list-style-image.

Beispiel A mit 3 abweichenden Standardwerten

.bsp-ul {
        list-style-type: square;
        list-style-position: inside;
        list-style-image: url(bild_datei./png/jpg/gif/...);
}
.bsp-ul {
        list-style: square inside url(bild_datei./png/jpg/gif/...);
}
.bsp-ul{list-style:square inside url(bild_datei./png/jpg/gif/...)}

Beispiel B mit 2 abweichenden Standardwerten

.bsp-ul {
        list-style-type: square;
        list-style-position: inside;
}

Standard-Werte werden in der CSS-Kurzschreibweise ersatzlos weggelassen.

.bsp-ul {
        list-style: square inside;
}
.bsp-ul{list-style:square inside}

Beispiel C mit 2 abweichenden Standardwerten

.bsp-ul {
        list-style-type: disc;
        list-style-position: inside;
        list-style-image: url(bild_datei./png/jpg/gif/...);
}

Standard-Werte werden in der CSS-Kurzschreibweise ersatzlos weggelassen.

.bsp-ul {
        list-style: inside url(bild_datei./png/jpg/gif/...);
}
.bsp-ul{list-style:inside url(bild_datei./png/jpg/gif/...)}

Beispiel D mit 2 abweichenden Standardwerten

.bsp-ul {
        list-style-type: none;
        list-style-position: outside;
        list-style-image: url(bild_datei./png/jpg/gif/...);
}

Standard-Werte werden in der CSS-Kurzschreibweise ersatzlos weggelassen.

.bsp-ul {
        list-style: none url(bild_datei./png/jpg/gif/...);
}
.bsp-ul{list-style:none url(bild_datei./png/jpg/gif/...)}

Die Browser-Render-Engines erkennen in diesem Fall, dass es sich bei none um den Wert für list-style-type handeln muss, da es wegen der angegebenen url(bild_datei./png/jpg/gif/...) sich nicht auf den CSS-Standard-Wert von list-style-image beziehen kann und auch nicht auf list-style-position welches keinen CSS-Wert none annehmen kann.


Beispiel E mit 1 abweichenden Standardwert

.bsp-ul {
        list-style-type: square;
        list-style-position: outside;
}

Standard-Werte werden in der CSS-Kurzschreibweise ersatzlos weggelassen.

.bsp-ul {
        list-style: square;
}
.bsp-ul{list-style:square}

Beispiel F mit 1 abweichenden Standardwert

.bsp-ul {
        list-style-type: disc;
        list-style-position: outside;
        list-style: url(bild_datei./png/jpg/gif/...);
}

Standard-Werte werden in der CSS-Kurzschreibweise ersatzlos weggelassen.

.bsp-ul {
        list-style: url(bild_datei./png/jpg/gif/...);
}
.bsp-ul{url(bild_datei./png/jpg/gif/...)}

Beispiel G mit 1 abweichenden Standardwert

.bsp-ul {
        list-style-type: none;
        list-style-position: outside;
}

Standard-Werte werden in der CSS-Kurzschreibweise ersatzlos weggelassen.

.bsp-ul {
        list-style: none;
}
.bsp-ul{none}

Die Browser-Render-Engines interpretieren einen alleinstehenden none-Wert als Eigenschaft für list-style-type, da der none-Wert für die Eigenschaft list-style-image nicht angesprochen sein kann, da wegen der fehlenden url und dem Fehlen des Wertes inherit in der CSS-Kurzschreibweise sowieso der Standardwert none für die Eigenschaft list-style-image gesetzt wird.
In diesem Beispiel wird demzufolge von den Browser-Render-Engines kein Listen-Symbol und auch keine Listen-Symbol-Grafik angezeigt.

Zusammenfassung: Durch die Verwendung der List-Style-Kurzschreibweise kann die Ladezeit von Webseiten durch die verringerte Dateigröße optimiert werden.