Logical properties

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• wyjaśnić różnicę między osiami inline i block,
• zamienić fizyczne właściwości typu margin-left na logiczne odpowiedniki,
• stosować margin-inline, padding-block i border-inline-start,
• używać inline-size i block-size zamiast sztywnego width i height,
• pozycjonować elementy przez inset-inline-start i inset-block-start,
• projektować komponenty, które nie zakładają, że „start” zawsze oznacza lewą stronę.

Kontekst praktyczny

W klasycznym CSS często piszemy left, right, top i bottom. To działa, dopóki interfejs ma jeden kierunek tekstu i jeden sposób układania treści. Logical properties opisują intencję: początek tekstu, koniec tekstu, początek bloku albo koniec bloku.

Osie inline i block

Oś inline biegnie zgodnie z kierunkiem pisania tekstu w linii. Oś block biegnie w kierunku układania kolejnych bloków treści. W typowym polskim dokumencie inline to lewo-prawo, a block to góra-dół.

Kopiuj/* Zamiast myśleć: lewa i prawa strona */
.card {
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: 1.25rem;
}

/* inline: początek i koniec linii tekstu
   block: początek i koniec przepływu bloków */

To zmienia sposób myślenia z „ekran ma lewą i prawą stronę” na „treść ma początek i koniec”.

Physical vs logical

Physical properties odnoszą się do fizycznych stron: margin-left, padding-top, border-right. Logical properties odnoszą się do osi i kierunku pisania: margin-inline-start, padding-block-start, border-inline-end.

Kopiuj/* Physical */
.alert {
  padding-top: 1rem;
  padding-right: 1.25rem;
  padding-bottom: 1rem;
  padding-left: 1.25rem;
  border-left: .25rem solid #2563eb;
}

/* Logical */
.alert {
  padding-block: 1rem;
  padding-inline: 1.25rem;
  border-inline-start: .25rem solid #2563eb;
}

Drugi zapis jest krótszy i lepiej opisuje intencję: akcent ma być na początku treści, nie zawsze po lewej stronie ekranu.

Margin i padding

Najłatwiej zacząć od odstępów. margin-inline obejmuje początek i koniec osi inline, a padding-block obejmuje początek i koniec osi block.

Kopiuj.section {
  padding-block: clamp(2rem, 6vw, 5rem);
  padding-inline: 1rem;
}

.section__inner {
  max-inline-size: 68rem;
  margin-inline: auto;
}

.card + .card {
  margin-block-start: 1rem;
}

margin-inline: auto to logiczny odpowiednik centrowania kontenera w osi poziomej w typowym dokumencie LTR.

Border i sizing

Logical properties obejmują także obramowania i rozmiary. inline-size odpowiada rozmiarowi w osi inline, a block-size w osi block. W wielu komponentach to czytelniejsze niż width i height.

Kopiuj.timeline-item {
  max-inline-size: 42rem;
  min-block-size: 8rem;
  padding-block: 1rem;
  padding-inline: 1.25rem;
  border-inline-start: .25rem solid #22c55e;
}

To szczególnie przydatne w komponentach dokumentacyjnych, alertach, timeline'ach i układach, które mogą kiedyś działać w innym kierunku pisania.

Pozycjonowanie

Logical properties mają też odpowiedniki dla pozycjonowania. Zamiast top i left możesz użyć inset-block-start i inset-inline-start.

Kopiuj.card {
  position: relative;
}

.card__badge {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
}

Badge pozostaje przy początku bloku i końcu linii tekstu. W LTR będzie w prawym górnym rogu, a w RTL przeniesie się na lewą stronę.

Kierunki tekstu

Nie każdy projekt od razu obsługuje wiele języków, ale dobre komponenty nie powinny niepotrzebnie blokować takiej możliwości. Właściwość dir w HTML może zmienić kierunek tekstu, a logical properties dopasują spacing i akcenty bez osobnych wyjątków.

Kopiuj<article class="notice" dir="rtl">
  <h3>Komunikat</h3>
  <p>Ten komponent używa border-inline-start.</p>
</article>

W CSS nie musisz wtedy pisać osobnej reguły [dir="rtl"] .notice, jeśli używasz logicznych stron komponentu.

Demo logical properties

Dwie karty używają tej samej klasy i tej samej reguły border-inline-start. W wariancie LTR akcent jest po lewej stronie, a w wariancie RTL automatycznie przenosi się na prawą stronę.

Najczęstsze błędy początkujących

• Mechaniczne mieszanie left/right z inline-start/inline-end w tym samym komponencie.
• Zakładanie, że inline zawsze oznacza poziomą oś od lewej do prawej.
• Używanie logical properties tylko dla marginesów, ale pozostawianie fizycznych borderów i pozycji badge'y.
• Zapominanie, że width i height nadal są poprawne, gdy projekt faktycznie opisuje fizyczny wymiar.
• Przepisywanie całego CSS naraz zamiast zaczynania od komponentów, które realnie zyskają na logice kierunku.
• Brak testu z dir="rtl" nawet w prostym demo komponentu.

Mini zadanie

Przepisz komponent alertu z fizycznych właściwości na logical properties.

• Zamień padding-top, padding-right, padding-bottom i padding-left na padding-block i padding-inline.
• Zamień border-left na border-inline-start.
• Zamień width ograniczające komponent na max-inline-size.
• Dodaj badge z position: absolute, inset-block-start i inset-inline-end.
• Przetestuj alert w dwóch wariantach HTML: dir="ltr" i dir="rtl".
• Sprawdź, czy komponent nadal wygląda poprawnie bez dopisywania klas wariantów dla RTL.

Checklista

• Rozumiem różnicę między osiami inline i block.
• Potrafię zastąpić margin-left przez margin-inline-start, gdy opisuję początek treści.
• Używam padding-block i padding-inline do skracania powtarzalnych odstępów.
• Wiem, kiedy border-inline-start jest lepsze niż border-left.
• Potrafię pozycjonować badge przez inset-block-start i inset-inline-end.
• Testuję komponent z innym kierunkiem tekstu, jeśli ma wspierać wiele języków.

Podsumowanie lekcji

Logical properties pomagają pisać CSS bliżej znaczenia layoutu. Zamiast kodować fizyczną lewą i prawą stronę, opisujesz początek i koniec treści, co poprawia elastyczność komponentów oraz przygotowuje projekt na różne kierunki pisania.

Kolejny krok roadmapy to CSS nesting i nowoczesna składnia.