Michelle Barker mit meinem Lieblings-Blogbeitrag-Typ: kurz, praktisch und hinterlässt Ihnen einen wertvollen Gewinn für Ihre Zeit. Hier geht sie auf logische Kurzschriften in CSS ein, insbesondere auf solche, die Längen nur auf einer einzigen Achse festlegen, zum Beispiel nur auf der Blockachse (vertikal) oder nur auf der Inline-Achse (horizontal).
Ich sage „Block“ und „Inline“, weil die x-Achse in Bezug auf logische Eigenschaften genauso gut wie eine vertikale Achse fungieren kann, abhängig vom aktuellen writing-mode.
Wo wir also immer Kurzschriften für padding, margin und border hatten, die eine Mehrwertigkeitssyntax unterstützen konnten, erlaubt uns keine davon, Längen auf einer bestimmten Achse zu deklarieren, ohne auch eine Länge auf der anderen Achse festzulegen.
Zum Beispiel:
/* This gives us margin on the inline axis */
margin: 0 3rem;…aber wir mussten die andere Achse festlegen, um dorthin zu gelangen. Mit logischen Eigenschaften haben wir jedoch zusätzliche Kurzschriften für jede Achse, was bedeutet, dass wir die margin-inline Kurzschrift so einstellen können, dass sie spezifisch auf der Inline-Achse funktioniert.
margin-inline: 3rem;Michelle erwähnt nebenbei meine Lieblings-Kurzschrift für logische Eigenschaften. Wie oft positionieren Sie etwas auf diese Weise?
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Wir können diese vier Zeilen mit inset: 0 hineinbringen. Oder wir könnten die Block- und Inline-Achse direkt mit inset-block bzw. inset-inline ansprechen.
Während wir über Kurzschriften sprechen, möchte ich immer eine Warnung zu ”versehentlichen” CSS-Resets aussprechen. Nur einer der häufigen CSS-Fehler, die ich mache.