Kurzschreibweise für top, right, bottom, left

Autor: Aykut Şensoy, Datum: 01.01.2023

Obwohl es die übliche Regel ist, in CSS Deklarationen top, right, bottom und left auszuschreiben, gibt es tatsächlich für diese Properties eine Kurzschreibweise, die den Entwicklern hilft, den Code erheblich schlanker und leserlicher zu schreiben.

Ich möchte hier gleich mit einem Beispiel beginnen. Folgende Schreibweise ist die übliche Art, wenn man z.B. einen absolut platzierten Container über die volle verfügbare Fläche aufspannen möchte.

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Jede Position wird einzeln für sich definiert. Das ist bemerkenswert, denn in der Regel werden von den Entwicklern immer Kurzschreibweisen bevorzugt, z.B. für margin, padding, border, background, etc. Warum also nicht genauso für top, right, bottom und left?

Auch Linting-Tools empfehlen gerne Kurzschreibweisen per default-Einstellung, aber monieren interessanterweise diese Schreibeweise nicht.

Ich denke es ist einfach "best practice" oder nur mangelnde Kenntnis. Wobei ja "best practice" nicht automatisch bedeutet, das etwas wirklich gut ist. Tatsächlich sieht der Web-Standard eine Kurzschreibweise für diesen Fall vor. Die Property dafür heißt inset. Das obere Code-Beispiel lässt sich also wesentlich kürzer deklarieren mit dem identischen Ergebnis.

.container {
    position: absolute;
    inset: 0;
}

Die inset Property lässt sich analog zu den Kurzschreibweisen von margin und padding schreiben. Hier ein paar weitere Beispiele, die selbsterklärend sein sollten.

.container {
    position: absolute;
    inset: 16px 8px;
    // top: 16px; right: 8px; bottom: 16px; left: 8px;
    inset: 16px 8px 4px;
    // top: 16px; right: 8px; bottom: 4px; left: 8px;
    inset: 16px 8px 4px 2px;
    // top: 16px; right: 8px; bottom: 4px; left: 2px;
}