inline-sizelà một thuộc tính logic xác định chiều rộng của một phần tử khi chế độ ghi là chiều ngang hoặc chiều cao của phần tử khi writing-modelà chiều dọc.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Như bạn có thể đoán bằng ví dụ trên, thuộc writing-modetính thay đổi hướng của dòng văn bản và bố cục 90 độ. Có hai lý do chính khiến bạn muốn làm điều đó.
Đầu tiên, là một lựa chọn thiết kế, bạn có thể muốn hiển thị văn bản dọc trên một phần tử, chẳng hạn như tiêu đề:
Lý do thứ hai - và có lẽ là quan trọng nhất - bạn có thể muốn sử dụng thuộc tính logic như kích thước nội tuyến là để phù hợp với việc quốc tế hóa trên một trang web. Nhiều chữ viết Đông Á như Trung Quốc, Nhật Bản và Hàn Quốc có thể được viết theo chiều ngang hoặc chiều dọc. Sử dụng thuộc tính logic, chúng tôi có thể cung cấp hướng định cỡ chính xác của các phần tử dựa trên chế độ viết của người dùng.
Jen Simmons có một bài báo và bài thuyết trình đi sâu hơn về các chế độ viết CSS.
Tại sao chúng ta không thể chỉ sử dụng thuộc widthtính đáng tin cậy 'ol ?
Bạn có thể! Tuy nhiên, bạn có thể muốn liên hệ với inline-sizethay thế nếu bạn lo lắng về bối cảnh nội dung của bạn thay đổi dựa trên ngôn ngữ của người dùng. widthlà một thứ nguyên vật lý, vì vậy khi chế độ ghi thay đổi, một phần tử sẽ giữ nguyên kích thước chiều ngang của nó, phá vỡ bố cục khi nó được thiết lập thành chiều dọc. Các thuộc tính logic, chẳng hạn như inline-size, có thể phản ứng với những thay đổi đó và áp dụng chiều rộng theo hướng thích hợp.
Ví dụ: nếu một phần tử đoạn văn có chiều rộng 400px sử dụng chiều rộng, khi chế độ viết được đặt thành vertical-lr, nội dung sẽ xoay, thay đổi bố cục, nhưng đoạn văn đó sẽ vẫn có chiều rộng 400px thay vì chiều cao 400px.
Thấy chưa? Chà, inline-sizelà thông minh! Nó thay đổi từ chiều rộng sang chiều cao, tùy thuộc vào writing-modegiá trị.
Cú pháp
inline-size: - Ban đầu:
auto - Áp dụng cho: giống như
heightvàwidth - Kế thừa: không
- Phần trăm: đối với tài sản vật chất tương ứng
- Giá trị được tính toán: giống như
heightvàwidth - Loại hoạt ảnh: theo loại giá trị được tính toán
Giá trị
/* 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: Kích thước nội dòng của phần tử sẽ tuân theo kích thước của phần tử mẹ của nó.fit-content(): Chức năng này cho phép vùng chứa phát triển đến kích thước mong muốn, sau đó tạo màng bọc văn bản, kẹp nội dung một cách hiệu quả với giá trị kích thước đã cho. Nó có thể được sử dụng trên các hộp chứa Grid, cũng như kích thước hộp, và mặc dù caniuse cho thấy sự hỗ trợ mạnh mẽ cho chức năng với kích thước nội tuyến, thử nghiệm của chúng tôi ít kết luận hơn. Đó có thể là do trạng thái Bản thảo làm việc của Mô-đun kích thước hộp cấp 3.max-content: Chiều rộng ưu tiên nội tại, nghĩa là phần tử kéo dài văn bản ra đến mức có thể và sẽ làm cho hộp dài bằng văn bản.min-content: Chiều rộng tối thiểu nội tại, nghĩa là hộp của phần tử giảm đến kích thước tối thiểu của nội dung của nó. Hộp sẽ có kích thước của chuỗi văn bản lớn nhất.
Bản giới thiệu
Hỗ trợ trình duyệt
| I E | Cạnh | Firefox | Trình duyệt Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Không | 79+ | 41+ | 57 | 12,1+ | 44+ |
| Chrome dành cho Android | Android Firefox | Trình duyệt Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12,2+ | 59+ |
Lưu ý rằng hỗ trợ sử dụng các chức năng sau có thể khác với hỗ trợ của thuộc tính:
fit-content()max-content()min-content()
Thêm thông tin
- Thuộc tính và giá trị logic CSS Đặc tả cấp độ 1 (Bản thảo của người biên tập)
- Tài liệu MDN
- Thuộc tính logic CSS` (CSS-Tricks)
- Hiểu các thuộc tính và giá trị logic (Tạp chí Smashing)
- Thuộc tính logic CSS (Adrian Roselli)
- Định kích thước nội dung tối thiểu & tối đa trong CSS Grid (Jen Simmons, video)
- Quy tắc ngang hai chiều trong CSS (Hussein Al Hammad)