inline-sizeto właściwość logiczna, która definiuje szerokość elementu, gdy tryb pisania jest poziomy, lub wysokość elementu, gdy writing-modejest ustawiony pionowo.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Jak można się domyślić na powyższym przykładzie, writing-modewłaściwość zmienia orientację tekstu i układ o 90 stopni. Są dwa główne powody, dla których chcesz to zrobić.
Po pierwsze, jako wybór projektu, możesz chcieć wyświetlić pionowy tekst na elemencie, powiedzmy nagłówek:
Drugim - i prawdopodobnie najważniejszym - powodem, dla którego możesz chcieć użyć właściwości logicznej, takiej jak rozmiar inline, jest uwzględnienie internacjonalizacji witryny. Wiele skryptów wschodnioazjatyckich, takich jak chiński, japoński i koreański, można pisać poziomo lub pionowo. Korzystając z właściwości logicznych, możemy zapewnić prawidłowy kierunek wymiarowania elementów w oparciu o tryb pisania użytkownika.
Jen Simmons ma artykuł i prezentację, które bardziej szczegółowo opisują tryby pisania CSS.
Dlaczego nie możemy po prostu skorzystać z 'ol trusty widthproperty'?
Możesz! Możesz jednak sięgnąć po inline-sizezamiast tego, jeśli obawiasz się, że kontekst Twoich treści zmienia się w zależności od języka użytkownika. widthjest wymiarem fizycznym, więc gdy zmienia się tryb pisania, element zachowuje szerokość w poziomie, przerywając układ, gdy jest ustawiony jako pionowy. Właściwości logiczne, takie jak inline-size, mogą reagować na te zmiany i stosować szerokość we właściwym kierunku.
Na przykład, jeśli element akapitu ma szerokość 400 pikseli i szerokość, a tryb pisania jest ustawiony na vertical-lr, zawartość będzie się obracać, zmieniając układ, ale akapit pozostanie szeroki na 400 pikseli zamiast wysokości 400 pikseli.
Zobaczyć, że? Cóż, inline-sizejest mądry! Zmienia się od szerokości do wysokości, w zależności od writing-modewartości.
Składnia
inline-size: - Inicjał:
auto - Dotyczy: tak samo jak
heightiwidth - Odziedziczone: nie
- Procenty: jak dla odpowiedniej własności fizycznej
- Wartość obliczona: taka sama jak
heightiwidth - Typ animacji: według obliczonego typu wartości
Wartości
/* Length values */ inline-size: 250px; inline-size: 5rem;
/* Percentage values */ inline-size: 75%;
/* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content;
/* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset; auto: Rozmiar elementu w wierszu będzie zgodny z rozmiarem elementu nadrzędnego.fit-content(): Ta funkcja umożliwia powiększanie kontenera do pożądanego rozmiaru, a następnie zawijanie tekstu, skutecznie zaciskając zawartość do podanej wartości rozmiaru. Może być używany na pojemnikach Grid, a także w rozmiarach pudełek, a chociaż caniuse wykazuje silne wsparcie dla funkcji z rozmiarem w linii, nasze testy były mniej rozstrzygające. Może to być spowodowane statusem roboczym specyfikacji modułu wielkości pudełka na poziomie 3.max-content: Wewnętrzna preferowana szerokość, co oznacza, że element rozciąga tekst tak długo, jak to możliwe, i sprawi, że ramka będzie tak długa, jak tekst.min-content: Wewnętrzna minimalna szerokość, co oznacza, że pole elementu zmniejsza się do minimalnego rozmiaru jego zawartości. Pole będzie miało rozmiar największego ciągu tekstowego.
Próbny
Wsparcie przeglądarki
| TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Przeglądarka Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Należy pamiętać, że obsługa korzystania z następujących funkcji może różnić się od obsługi właściwości:
fit-content()max-content()min-content()
Więcej informacji
- Specyfikacja logicznych właściwości i wartości CSS na poziomie 1 (wersja robocza redakcji)
- Dokumentacja MDN
- Właściwości logiczne CSS (sztuczki CSS)
- Zrozumienie właściwości i wartości logicznych (magazyn Smashing)
- Właściwości logiczne CSS (Adrian Roselli)
- Minimalny i maksymalny rozmiar treści w siatce CSS (Jen Simmons, wideo)
- Dwukierunkowe reguły poziome w CSS (Hussein Al Hammad)