Właściwości Logiczne CSS Poziom 2: Budowanie Prawdziwie Globalnej Sieci z Rozszerzonym Wsparciem Trybu Pisania

Od dziesięcioleci twórcy stron internetowych budują układy, używając słownictwa zakorzenionego w świecie fizycznym: góra, dół, lewo i prawo. Ustawiamy margin-left, padding-top i border-right. Ten model myślowy dobrze nam służył, gdy sieć była głównie medium od lewej do prawej i od góry do dołu. Jednak sieć jest globalna. To platforma dla wszystkich języków i kultur, z których wiele nie podąża za tym prostym kierunkowym przepływem.

Języki takie jak arabski i hebrajski są pisane od prawej do lewej. Tradycyjny japoński i chiński mogą być pisane pionowo, od góry do dołu i od prawej do lewej. Wymuszanie fizycznego modelu CSS od lewej do prawej na te systemy pisma powoduje zepsute układy, frustrujące doświadczenie użytkownika i górę obejść w kodzie. W tym miejscu pojawiają się Właściwości i Wartości Logiczne CSS, reprezentujące fundamentalną zmianę paradygmatu z kierunków fizycznych na relatywne do przepływu, logiczne kierunki. Podczas gdy Poziom 1 stworzył podstawy, Właściwości Logiczne CSS Poziom 2 dopełniają obrazu, dostarczając narzędzi, których potrzebujemy do budowania prawdziwie uniwersalnych interfejsów użytkownika, uwzględniających tryb pisania.

Ten obszerny przewodnik zabierze Cię w głębokie zanurzenie w ulepszenia wprowadzone przez Poziom 2. Zaczniemy od odświeżenia podstawowych koncepcji, następnie zbadamy nowe właściwości i wartości, które wypełniają luki, a na koniec wykorzystamy to wszystko w praktyce, budując komponent, który płynnie dostosowuje się do każdego trybu pisania. Przygotuj się na zmianę sposobu myślenia o układzie CSS na zawsze.

Szybkie Odświeżenie: Podstawowe Koncepcje Właściwości Logicznych (Poziom 1)

Zanim będziemy mogli docenić dodatki w Poziomie 2, musimy mieć solidne zrozumienie fundamentów położonych przez Poziom 1. Cały system jest zbudowany na dwóch kluczowych koncepcjach: trybie pisania i wynikających z niego osi blokowej i liniowej.

Cztery Tryby Pisania

Właściwość CSS writing-mode określa kierunek układania tekstu. Chociaż często bierzemy domyślne ustawienie za pewnik, istnieje kilka wartości, które fundamentalnie zmieniają sposób przepływu treści na stronie:

• horizontal-tb: Jest to domyślne ustawienie dla większości języków zachodnich. Tekst płynie poziomo (oś liniowa) od lewej do prawej (lub od prawej do lewej w zależności od kierunku), a linie układają się od góry do dołu (oś blokowa).
• vertical-rl: Używane dla tradycyjnej typografii wschodnioazjatyckiej (np. japońskiej, chińskiej). Tekst płynie pionowo od góry do dołu (oś liniowa), a linie układają się od prawej do lewej (oś blokowa).
• vertical-lr: Podobne do powyższego, ale linie układają się od lewej do prawej (oś blokowa). Mniej powszechne, ale używane w niektórych kontekstach, takich jak pismo mongolskie.
• sidelong-rl / sidelong-lr: Są to wartości dla konkretnych przypadków użycia, w których chcesz ułożyć glify na boku. Są one mniej powszechne w ogólnej treści internetowej.

Kluczowa Koncepcja: Oś Blokowa vs. Oś Liniowa

To jest najważniejsza koncepcja do zrozumienia. W logicznym świecie przestajemy myśleć o "pionowym" i "poziomym" i zaczynamy myśleć w kategoriach osi blokowej i osi liniowej. Ich orientacja zależy całkowicie od writing-mode.

• Oś Liniowa to kierunek, w którym tekst płynie w obrębie jednej linii.
• Oś Blokowa to kierunek, w którym układane są nowe linie.

Zobaczmy, jak to wygląda w praktyce:

• W standardowym języku angielskim (writing-mode: horizontal-tb): oś liniowa biegnie poziomo, a oś blokowa biegnie pionowo.
• W tradycyjnym języku japońskim (writing-mode: vertical-rl): oś liniowa biegnie pionowo, a oś blokowa biegnie poziomo.

Ponieważ te osie mogą się przełączać, właściwości takie jak width i height stają się niejednoznaczne. Czy width to rozmiar wzdłuż osi poziomej, czy osi liniowej? Właściwości logiczne rozwiązują tę niejednoznaczność. Mamy teraz start i end dla każdej osi:

• block-start: "Góra" w języku angielskim, ale "prawo" w pionowym japońskim.
• block-end: "Dół" w języku angielskim, ale "lewo" w pionowym japońskim.
• inline-start: "Lewo" w języku angielskim, ale "góra" w pionowym japońskim.
• inline-end: "Prawo" w języku angielskim, ale "dół" w pionowym japońskim.

Mapowanie Właściwości Fizycznych na Logiczne (Poziom 1)

Poziom 1 wprowadził kompleksowy zestaw mapowań z właściwości fizycznych na logiczne. Oto kilka kluczowych przykładów:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (dla pozycjonowania) → inset-inline-start / inset-inline-end
• top / bottom (dla pozycjonowania) → inset-block-start / inset-block-end

Poziom 1 dał nam również przydatne skróty, takie jak margin-inline (dla start i end) i padding-block (dla start i end).

Witamy w Poziomie 2: Co Nowego i Dlaczego to Ma Znaczenie

Chociaż Poziom 1 był monumentalnym krokiem naprzód, pozostawił pewne zauważalne luki. Niektóre podstawowe właściwości CSS, takie jak float, clear i resize, nie miały logicznych odpowiedników. Ponadto właściwości takie jak border-radius nie mogły być kontrolowane logicznie, co zmuszało programistów do powrotu do właściwości fizycznych w celu precyzyjnego stylowania. Oznaczało to, że możesz zbudować układ w 90% za pomocą właściwości logicznych, ale nadal potrzebowałbyś fizycznych obejść dla różnych trybów pisania, co częściowo niweczyło cel.

Właściwości Logiczne CSS Poziom 2 bezpośrednio rozwiązuje te niedociągnięcia. Nie chodzi o wprowadzanie radykalnie nowego systemu, ale o ukończenie tego, który został rozpoczęty w Poziomie 1. Osiąga to na dwa główne sposoby:

1. Wprowadzenie nowych logicznych właściwości i wartości dla starszych funkcji CSS, które były z natury fizyczne (jak float).
2. Dodanie mapowań właściwości logicznych dla złożonych skrótów, które były wcześniej ignorowane (jak border-radius).

Wraz z Poziomem 2 wizja w pełni relatywnego do przepływu systemu stylowania jest prawie ukończona, co pozwala nam budować złożone, piękne i solidne komponenty, które działają wszędzie, dla każdego, bez hacków i obejść.

Dogłębne Zanurzenie: Nowe Logiczne Wartości i Właściwości w Poziomie 2

Zbadajmy najbardziej wpływowe dodatki, które Poziom 2 wnosi do naszego zestawu narzędzi programisty. Są to narzędzia, które wypełniają luki i umożliwiają prawdziwie uniwersalne projektowanie komponentów.

Float i Clear: Logiczna Rewolucja

Właściwość float od lat jest podstawą układu CSS, ale jej wartości, left i right, są definicją kierunku fizycznego. Jeśli umieścisz obraz po lewej stronie akapitu w języku angielskim, wygląda to poprawnie. Ale zmień kierunek dokumentu na od prawej do lewej (RTL) dla arabskiego, a obraz znajduje się teraz po "złej" stronie bloku tekstowego. Powinien znajdować się po prawej stronie, czyli na początku linii.

Poziom 2 wprowadza dwa nowe, logiczne słowa kluczowe dla właściwości float:

• float: inline-start; To ustawia element na początku kierunku liniowego. W językach LTR jest to lewa strona. W językach RTL jest to prawa strona. W trybie pisania vertical-rl jest to góra.
• float: inline-end; To ustawia element na końcu kierunku liniowego. W LTR jest to prawa strona. W RTL jest to lewa strona. W vertical-rl jest to dół.

Podobnie właściwość clear, używana do kontrolowania zawijania treści wokół elementów ustawionych za pomocą float, otrzymuje swoje logiczne odpowiedniki:

• clear: inline-start; Czyści float po stronie początku liniowego.
• clear: inline-end; Czyści float po stronie końca liniowego.

To zmienia zasady gry. Możesz teraz tworzyć klasyczne układy obrazu z zawijaniem tekstu, które automatycznie dostosowują się do każdego kierunku języka bez jednej linii dodatkowego CSS.

Ulepszona Kontrola dzięki Logicznemu Resize

Właściwość resize, powszechnie używana na textarea, pozwala użytkownikom na zmianę rozmiaru elementu. Jej tradycyjne wartości to horizontal, vertical i both. Ale co oznacza "horizontal" w pionowym trybie pisania? Nadal oznacza zmianę rozmiaru wzdłuż fizycznej osi poziomej, co może nie być tym, czego zamierza użytkownik lub projektant. Użytkownik prawdopodobnie chce zmienić rozmiar elementu wzdłuż osi liniowej, aby linie były dłuższe lub krótsze.

Poziom 2 wprowadza logiczne wartości dla resize:

• resize: inline; Umożliwia zmianę rozmiaru wzdłuż osi liniowej.
• resize: block; Umożliwia zmianę rozmiaru wzdłuż osi blokowej.

Użycie resize: block; na textarea w języku angielskim pozwala użytkownikowi na zwiększenie jego wysokości. Użycie go w pionowym trybie pisania pozwala użytkownikowi na zwiększenie jego szerokości (co jest kierunkiem blokowym). To po prostu działa.

`caption-side`: Logiczne Pozycjonowanie dla Podpisów Tabel

Właściwość caption-side określa położenie caption tabeli. Stare wartości to top i bottom. Znowu, są one fizyczne. Jeśli zamiarem projektanta jest umieszczenie podpisu "przed" zawartością tabeli, top działa dla poziomych trybów pisania. Ale w trybie vertical-rl "początek" przepływu blokowego znajduje się po prawej stronie, a nie na górze.

Poziom 2 zapewnia logiczne rozwiązanie:

• caption-side: block-start; Umieszcza podpis na początku przepływu blokowego.
• caption-side: block-end; Umieszcza podpis na końcu przepływu blokowego.

`text-align`: Podstawowa Logiczna Wartość

Chociaż wartości start i end dla text-align istnieją już od jakiegoś czasu, są one podstawową częścią filozofii właściwości logicznych i warto je wzmocnić. Używanie text-align: left; jest częstym błędem, który natychmiast powoduje problemy z układem w językach RTL. Prawidłowym, nowoczesnym podejściem jest zawsze używanie:

• text-align: start; Wyrównuje tekst do początku kierunku liniowego.
• text-align: end; Wyrównuje tekst do końca kierunku liniowego.

Klejnot Koronny Poziomu 2: Logiczny `border-radius`

Być może najbardziej znaczącym i potężnym dodatkiem w Poziomie 2 jest zestaw właściwości do logicznego kontrolowania promieni obramowania. Wcześniej, jeśli chciałeś, aby karta miała zaokrąglone rogi tylko na "górze", używałbyś border-top-left-radius i border-top-right-radius. To całkowicie załamuje się w pionowym trybie pisania, gdzie "górne" rogi są teraz rogami start-start i end-start.

Poziom 2 wprowadza cztery nowe długie właściwości, które mapują się na cztery rogi elementu w sposób relatywny do przepływu. Konwencja nazewnictwa to border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Róg, w którym spotykają się boki block-start i inline-start.
• border-start-end-radius: Róg, w którym spotykają się boki block-start i inline-end.
• border-end-start-radius: Róg, w którym spotykają się boki block-end i inline-start.
• border-end-end-radius: Róg, w którym spotykają się boki block-end i inline-end.

Na początku może być to trudne do zwizualizowania, więc zmapujmy to dla różnych trybów pisania:

Mapowanie `border-radius` w `writing-mode: horizontal-tb` (np. angielski)

• border-start-start-radius mapuje się na top-left-radius.
• border-start-end-radius mapuje się na top-right-radius.
• border-end-start-radius mapuje się na bottom-left-radius.
• border-end-end-radius mapuje się na bottom-right-radius.

Mapowanie `border-radius` w `writing-mode: horizontal-tb` z `dir="rtl"` (np. arabski)

Tutaj kierunek liniowy jest odwrócony.

• border-start-start-radius mapuje się na top-right-radius. (Block-start to góra, inline-start to prawo).
• border-start-end-radius mapuje się na top-left-radius.
• border-end-start-radius mapuje się na bottom-right-radius.
• border-end-end-radius mapuje się na bottom-left-radius.

Mapowanie `border-radius` w `writing-mode: vertical-rl` (np. japoński)

Tutaj obie osie są obrócone.

• border-start-start-radius mapuje się na top-right-radius. (Block-start to prawo, inline-start to góra).
• border-start-end-radius mapuje się na bottom-right-radius.
• border-end-start-radius mapuje się na top-left-radius.
• border-end-end-radius mapuje się na bottom-left-radius.

Używając tych nowych właściwości, możesz definiować promienie narożników, które są semantycznie powiązane z przepływem treści, a nie z fizycznym ekranem. Róg "start-start" zawsze będzie prawidłowym rogiem, niezależnie od języka lub kierunku tekstu.

Praktyczna Implementacja: Budowanie Komponentu Gotowego na Globalną Skalę

Teoria jest świetna, ale zobaczmy, jak to działa w praktyce. Zbudujemy prosty komponent karty profilu, najpierw używając starych właściwości fizycznych, a następnie refaktoryzując go, aby użyć nowoczesnych właściwości logicznych zarówno z Poziomu 1, jak i Poziomu 2.

Karta będzie miała obraz ustawiony za pomocą float po jednej stronie, tytuł, trochę tekstu oraz dekoracyjną obwódkę i zaokrąglone rogi.

"Stary" Sposób: Krucha Karta z Właściwościami Fizycznymi

Oto jak mogliśmy stylować tę kartę kilka lat temu:

/* --- CSS (Właściwości Fizyczne) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

W standardowym angielskim kontekście LTR wygląda to dobrze. Ale jeśli umieścimy to wewnątrz kontenera z dir="rtl" lub writing-mode: vertical-rl, układ się psuje. Dekoracyjna obwódka jest po złej stronie, awatar jest po złej stronie, margines jest nieprawidłowy, a zaokrąglone rogi są źle umieszczone.

"Nowy" Sposób: Solidna Karta z Właściwościami Logicznymi

Teraz refaktoryzujmy ten sam komponent, używając właściwości logicznych. Wykorzystamy właściwości zarówno z Poziomu 1, jak i nowe dodatki z Poziomu 2.

/* --- CSS (Właściwości Logiczne) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` shorthand jest już logiczny! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Moc Poziomu 2! */

  border-end-start-radius: 8px; /* Moc Poziomu 2! */

}

.logical-card .avatar {

  float: inline-start; /* Moc Poziomu 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testowanie i Weryfikacja

Dzięki nowemu CSS możesz upuścić komponent do dowolnego kontenera, a on automatycznie się dostosuje.

• W kontekście LTR: Będzie wyglądać identycznie jak oryginalna wersja fizyczna.
• W kontekście RTL (dir="rtl"): Awatar będzie unosił się po prawej stronie, jego margines będzie po lewej stronie, dekoracyjna obwódka będzie po prawej stronie, a tekst będzie wyrównany do początku (do prawej). Zaokrąglone rogi będą poprawnie na górze po prawej i na dole po prawej. To po prostu działa.
• W kontekście pionowym (writing-mode: vertical-rl): "Szerokość" karty (teraz jej pionowy inline-size) wyniesie 300px. Awatar będzie unosił się do "góry" (inline-start) z marginesem na "dole" (inline-end). Dekoracyjna obwódka będzie po prawej stronie (inline-start), a zaokrąglone rogi będą na górze po prawej i na górze po lewej. Komponent całkowicie zorientował się poprawnie bez żadnych media queries ani obejść.

Wsparcie Przeglądarek i Obejścia

To wszystko brzmi fantastycznie, ale co z obsługą przeglądarek? Dobra wiadomość jest taka, że wsparcie dla Poziomu 1 właściwości logicznych jest doskonałe we wszystkich nowoczesnych przeglądarkach. Możesz i powinieneś używać właściwości takich jak margin-inline-start i padding-block już dziś.

Wsparcie dla nowszych funkcji Poziomu 2 szybko się poprawia, ale nie jest jeszcze uniwersalne. Logiczne wartości dla float, clear i resize są dobrze obsługiwane. Logiczne właściwości border-radius są najnowsze i mogą być jeszcze za flagami funkcji lub w najnowszych wersjach przeglądarek. Jak zawsze, powinieneś konsultować zasoby takie jak MDN Web Docs lub CanIUse.com, aby uzyskać najbardziej aktualne dane dotyczące kompatybilności.

Strategie Progresywnego Ulepszania

Ponieważ CSS jest zaprojektowany tak, aby był odporny, możemy łatwo zapewnić obejścia dla starszych przeglądarek. Kaskada zapewni, że jeśli przeglądarka nie rozumie właściwości logicznej, po prostu ją zignoruje i użyje właściwości fizycznej zdefiniowanej przed nią.

Oto jak możesz pisać CSS gotowy na obejścia:

.card {

  /* Obejście dla starszych przeglądarek */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Nowoczesna właściwość logiczna, która zastąpi obejście */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

To podejście zapewnia solidne podstawowe doświadczenie dla wszystkich, zapewniając jednocześnie ulepszony, adaptacyjny układ dla użytkowników na nowoczesnych przeglądarkach. W przypadku projektów, które nie muszą obsługiwać wielu trybów pisania, może to być przesada. Ale dla każdej globalnej aplikacji, systemu projektowania lub motywu jest to solidna i przyszłościowa strategia.

Przyszłość jest Logiczna: Poza Poziomem 2

Przejście z fizycznego na logiczny sposób myślenia jest jedną z najważniejszych zmian w nowoczesnym CSS. Dostosowuje nasz język stylowania do rzeczywistości zróżnicowanej, globalnej sieci. Oddala nas od kruchych, zorientowanych na ekran hacków w kierunku odpornego, zorientowanego na treść projektowania.

Czy nadal są luki? Kilka. Logiczne wartości dla właściwości takich jak background-position lub gradienty są nadal omawiane. Ale wraz z wydaniem Poziomu 2, zdecydowana większość codziennych zadań związanych z układem i stylowaniem może być teraz wykonywana przy użyciu czysto logicznego podejścia.

Wezwanie do działania dla programistów jest jasne: zacznij domyślnie używać właściwości logicznych. Ustaw inline-size jako domyślny zamiast width. Używaj margin-inline zamiast ustawiać oddzielnie lewy i prawy margines. Nie chodzi tylko o obsługę różnych języków; chodzi o pisanie lepszego, bardziej odpornego CSS. Komponent zbudowany z logicznymi właściwościami jest z natury bardziej użyteczny i adaptowalny, niezależnie od tego, czy jest używany w układzie LTR, RTL, czy pionowym. To po prostu lepsze inżynierstwo.

Wniosek: Obejmij Przepływ

Właściwości Logiczne CSS Poziom 2 to nie tylko zbiór nowych funkcji; to ukończenie wizji. Zapewnia ostatnie, kluczowe elementy potrzebne do budowania układów, które szanują naturalny przepływ ich treści, niezależnie od tego, jaki może być ten przepływ. Obejmując właściwości takie jak float: inline-start i border-start-start-radius, podnosimy nasze rzemiosło z prostego pozycjonowania pól na ekranie do projektowania prawdziwie globalnych, inkluzywnych i przyszłościowych doświadczeń internetowych.

Następnym razem, gdy zaczniesz nowy projekt lub zbudujesz nowy komponent, zatrzymaj się, zanim wpiszesz margin-left. Zapytaj siebie: "Czy mam na myśli lewo, czy mam na myśli początek?" Dokonując tej małej zmiany myślowej, przyczynisz się do bardziej adaptowalnej i dostępnej sieci dla wszystkich, wszędzie.