Thuộc tính Logic CSS Cấp độ 2: Xây dựng một trang Web thực sự toàn cầu với Hỗ trợ Chế độ Viết Nâng cao

Trong nhiều thập kỷ, các nhà phát triển web đã xây dựng bố cục bằng một bộ từ vựng bắt nguồn từ thế giới vật lý: trên, dưới, trái, và phải. Chúng ta đặt margin-left, một padding-top, và một border-right. Mô hình tư duy này đã phục vụ tốt cho chúng ta khi web chủ yếu là một phương tiện từ trái sang phải, từ trên xuống dưới. Tuy nhiên, web là toàn cầu. Nó là một nền tảng cho tất cả các ngôn ngữ và văn hóa, nhiều trong số đó không tuân theo dòng chảy định hướng đơn giản này.

Các ngôn ngữ như tiếng Ả Rập và tiếng Do Thái được viết từ phải sang trái. Tiếng Nhật và tiếng Trung truyền thống có thể được viết theo chiều dọc, từ trên xuống dưới và từ phải sang trái. Việc áp đặt một mô hình CSS vật lý, từ trái sang phải lên các hệ thống chữ viết này dẫn đến bố cục bị hỏng, trải nghiệm người dùng khó chịu và một núi mã ghi đè. Đây là lúc Thuộc tính và Giá trị Logic CSS xuất hiện, đại diện cho một sự thay đổi mô hình cơ bản từ các hướng vật lý sang các hướng logic, tương đối theo dòng chảy. Trong khi Cấp độ 1 đã đặt nền móng, Thuộc tính Logic CSS Cấp độ 2 hoàn thiện bức tranh, cung cấp các công cụ chúng ta cần để xây dựng giao diện người dùng thực sự phổ quát và nhận biết được chế độ viết.

Hướng dẫn toàn diện này sẽ đưa bạn đi sâu vào những cải tiến do Cấp độ 2 mang lại. Chúng ta sẽ bắt đầu bằng việc ôn lại các khái niệm cốt lõi, sau đó khám phá các thuộc tính và giá trị mới lấp đầy những khoảng trống, và cuối cùng, đưa tất cả vào thực tế bằng cách xây dựng một thành phần thích ứng liền mạch với bất kỳ chế độ viết nào. Hãy chuẩn bị để thay đổi cách bạn nghĩ về bố cục CSS mãi mãi.

Ôn lại nhanh: Các khái niệm cốt lõi của Thuộc tính Logic (Cấp độ 1)

Trước khi chúng ta có thể đánh giá cao những bổ sung trong Cấp độ 2, chúng ta phải có một sự hiểu biết vững chắc về nền tảng do Cấp độ 1 đặt ra. Toàn bộ hệ thống được xây dựng trên hai khái niệm chính: chế độ viết (writing mode) và kết quả là trục block và inline.

Bốn Chế độ Viết

Thuộc tính CSS writing-mode xác định hướng văn bản được bố trí. Mặc dù chúng ta thường coi giá trị mặc định là điều hiển nhiên, có một số giá trị thay đổi cơ bản cách nội dung chảy trên trang:

• horizontal-tb: Đây là mặc định cho hầu hết các ngôn ngữ phương Tây. Văn bản chảy theo chiều ngang (trục inline) từ trái sang phải (hoặc phải sang trái dựa trên hướng), và các dòng xếp chồng từ trên xuống dưới (trục block).
• vertical-rl: Được sử dụng cho kiểu chữ Đông Á truyền thống (ví dụ: tiếng Nhật, tiếng Trung). Văn bản chảy theo chiều dọc từ trên xuống dưới (trục inline), và các dòng xếp chồng từ phải sang trái (trục block).
• vertical-lr: Tương tự như trên, nhưng các dòng xếp chồng từ trái sang phải (trục block). Ít phổ biến hơn, nhưng được sử dụng trong một số ngữ cảnh như chữ Mông Cổ.
• sidelong-rl / sidelong-lr: Đây là cho các trường hợp sử dụng cụ thể khi bạn muốn đặt các ký tự nằm nghiêng. Chúng ít phổ biến hơn trong nội dung web nói chung.

Khái niệm then chốt: Trục Block và Trục Inline

Đây là khái niệm quan trọng nhất cần nắm bắt. Trong một thế giới logic, chúng ta ngừng suy nghĩ về "dọc" và "ngang" và bắt đầu suy nghĩ theo trục block và trục inline. Hướng của chúng phụ thuộc hoàn toàn vào writing-mode.

• Trục Inline (Inline Axis) là hướng mà văn bản chảy trong một dòng duy nhất.
• Trục Block (Block Axis) là hướng mà các dòng mới được xếp chồng lên nhau.

Hãy xem điều này diễn ra như thế nào:

• Trong tiếng Anh tiêu chuẩn (writing-mode: horizontal-tb): Trục inline chạy theo chiều ngang, và trục block chạy theo chiều dọc.
• Trong tiếng Nhật truyền thống (writing-mode: vertical-rl): Trục inline chạy theo chiều dọc, và trục block chạy theo chiều ngang.

Bởi vì các trục này có thể hoán đổi, các thuộc tính như width và height trở nên mơ hồ. Width là kích thước dọc theo trục ngang hay trục inline? Các thuộc tính logic giải quyết sự mơ hồ này. Bây giờ chúng ta có start và end cho mỗi trục:

• block-start: Là "đầu" (top) trong tiếng Anh, nhưng là "phải" (right) trong tiếng Nhật dọc.
• block-end: Là "cuối" (bottom) trong tiếng Anh, nhưng là "trái" (left) trong tiếng Nhật dọc.
• inline-start: Là "trái" (left) trong tiếng Anh, nhưng là "đầu" (top) trong tiếng Nhật dọc.
• inline-end: Là "phải" (right) trong tiếng Anh, nhưng là "cuối" (bottom) trong tiếng Nhật dọc.

Ánh xạ Thuộc tính Vật lý sang Thuộc tính Logic (Cấp độ 1)

Cấp độ 1 đã giới thiệu một bộ ánh xạ toàn diện từ các thuộc tính vật lý sang các thuộc tính logic. Dưới đây là một vài ví dụ chính:

• 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 (cho định vị) → inset-inline-start / inset-inline-end
• top / bottom (cho định vị) → inset-block-start / inset-block-end

Cấp độ 1 cũng cung cấp cho chúng ta các cách viết tắt hữu ích như margin-inline (cho start và end) và padding-block (cho start và end).

Chào mừng đến với Cấp độ 2: Có gì mới và Tại sao nó quan trọng

Mặc dù Cấp độ 1 là một bước tiến lớn, nó vẫn còn một số khoảng trống đáng chú ý. Một số thuộc tính CSS cơ bản như float, clear, và resize không có tương đương logic. Hơn nữa, các thuộc tính như border-radius không thể được kiểm soát một cách logic, buộc các nhà phát triển phải quay lại các thuộc tính vật lý để tạo kiểu chi tiết. Điều này có nghĩa là bạn có thể xây dựng bố cục 90% bằng các thuộc tính logic, nhưng vẫn cần các ghi đè vật lý cho các chế độ viết khác nhau, phần nào làm mất đi mục đích ban đầu.

Thuộc tính Logic CSS Cấp độ 2 giải quyết trực tiếp những thiếu sót này. Nó không phải là việc giới thiệu một hệ thống hoàn toàn mới, mà là hoàn thiện hệ thống đã bắt đầu trong Cấp độ 1. Nó đạt được điều này theo hai cách chính:

1. Giới thiệu các thuộc tính và giá trị logic mới cho các tính năng CSS cũ vốn có tính vật lý (như float).
2. Thêm các ánh xạ thuộc tính logic cho các cách viết tắt phức tạp mà trước đây bị bỏ qua (như border-radius).

Với Cấp độ 2, tầm nhìn về một hệ thống tạo kiểu hoàn toàn tương đối theo dòng chảy gần như hoàn tất, cho phép chúng ta xây dựng các thành phần phức tạp, đẹp mắt và mạnh mẽ hoạt động ở mọi nơi, cho mọi người, mà không cần các thủ thuật hay ghi đè.

Tìm hiểu sâu: Các giá trị và thuộc tính Logic mới trong Cấp độ 2

Hãy cùng khám phá những bổ sung có tác động lớn nhất mà Cấp độ 2 mang đến cho bộ công cụ của nhà phát triển. Đây là những công cụ lấp đầy khoảng trống và trao quyền cho việc thiết kế thành phần thực sự phổ quát.

Float và Clear: Cuộc cách mạng Logic

Thuộc tính float đã là một nền tảng của bố cục CSS trong nhiều năm, nhưng các giá trị của nó, left và right, là định nghĩa của hướng vật lý. Nếu bạn float một hình ảnh sang left của một đoạn văn bằng tiếng Anh, nó trông đúng. Nhưng nếu chuyển hướng tài liệu sang từ phải sang trái (RTL) cho tiếng Ả Rập, hình ảnh bây giờ nằm ở phía "sai" của khối văn bản. Nó phải ở bên phải, là nơi bắt đầu của dòng.

Cấp độ 2 giới thiệu hai từ khóa logic mới cho thuộc tính float:

• float: inline-start; Thao tác này sẽ float một phần tử đến đầu của hướng inline. Trong các ngôn ngữ LTR, đây là bên trái. Trong các ngôn ngữ RTL, đây là bên phải. Trong chế độ viết vertical-rl, đây là phía trên.
• float: inline-end; Thao tác này sẽ float một phần tử đến cuối của hướng inline. Trong LTR, đây là bên phải. Trong RTL, đây là bên trái. Trong vertical-rl, đây là phía dưới.

Tương tự, thuộc tính clear, được sử dụng để kiểm soát việc bao bọc nội dung xung quanh các phần tử float, cũng có các đối tác logic của nó:

• clear: inline-start; Xóa các float ở phía inline-start.
• clear: inline-end; Xóa các float ở phía inline-end.

Đây là một thay đổi mang tính cách mạng. Bây giờ bạn có thể tạo các bố cục hình ảnh-với-văn-bản-bao-quanh cổ điển mà tự động thích ứng với bất kỳ hướng ngôn ngữ nào mà không cần một dòng CSS bổ sung nào.

Kiểm soát nâng cao với Resize Logic

Thuộc tính resize, thường được sử dụng trên textarea, cho phép người dùng thay đổi kích thước một phần tử. Các giá trị truyền thống của nó là horizontal, vertical, và both. Nhưng "horizontal" có nghĩa là gì trong một chế độ viết dọc? Nó vẫn có nghĩa là thay đổi kích thước dọc theo trục ngang vật lý, điều này có thể không phải là ý định của người dùng hoặc nhà thiết kế. Người dùng có thể muốn thay đổi kích thước phần tử dọc theo trục inline của nó để làm cho các dòng dài hơn hoặc ngắn hơn.

Cấp độ 2 giới thiệu các giá trị logic cho resize:

• resize: inline; Cho phép thay đổi kích thước dọc theo trục inline.
• resize: block; Cho phép thay đổi kích thước dọc theo trục block.

Sử dụng resize: block; trên một textarea bằng tiếng Anh cho phép người dùng làm cho nó cao hơn. Sử dụng nó trong một chế độ viết dọc cho phép người dùng làm cho nó rộng hơn (đó là hướng block). Nó chỉ đơn giản là hoạt động.

`caption-side`: Định vị Logic cho Chú thích Bảng

Thuộc tính caption-side xác định vị trí của caption của một bảng. Các giá trị cũ là top và bottom. Một lần nữa, đây là các giá trị vật lý. Nếu ý định của nhà thiết kế là đặt chú thích "trước" nội dung của bảng, top hoạt động cho các chế độ viết ngang. Nhưng trong chế độ vertical-rl, "bắt đầu" của dòng chảy block là ở bên phải, không phải ở trên cùng.

Cấp độ 2 cung cấp giải pháp logic:

• caption-side: block-start; Đặt chú thích ở đầu dòng chảy block.
• caption-side: block-end; Đặt chú thích ở cuối dòng chảy block.

`text-align`: Một giá trị Logic nền tảng

Mặc dù các giá trị start và end cho text-align đã tồn tại một thời gian, chúng là một phần cốt lõi của triết lý thuộc tính logic và đáng được củng cố. Sử dụng text-align: left; là một lỗi phổ biến gây ra vấn đề bố cục ngay lập tức trong các ngôn ngữ RTL. Cách tiếp cận hiện đại, đúng đắn là luôn sử dụng:

• text-align: start; Căn chỉnh văn bản về phía bắt đầu của hướng inline.
• text-align: end; Căn chỉnh văn bản về phía kết thúc của hướng inline.

Viên ngọc quý của Cấp độ 2: `border-radius` Logic

Có lẽ bổ sung quan trọng và mạnh mẽ nhất trong Cấp độ 2 là bộ thuộc tính để kiểm soát bo góc một cách logic. Trước đây, nếu bạn muốn một thẻ chỉ có các góc được bo tròn ở phía "trên", bạn sẽ sử dụng border-top-left-radius và border-top-right-radius. Điều này hoàn toàn bị phá vỡ trong chế độ viết dọc, nơi các góc "trên" bây giờ là các góc start-start và end-start.

Cấp độ 2 giới thiệu bốn thuộc tính chi tiết mới ánh xạ tới bốn góc của một phần tử theo cách tương đối với dòng chảy. Quy ước đặt tên là border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Góc nơi cạnh block-start và inline-start gặp nhau.
• border-start-end-radius: Góc nơi cạnh block-start và inline-end gặp nhau.
• border-end-start-radius: Góc nơi cạnh block-end và inline-start gặp nhau.
• border-end-end-radius: Góc nơi cạnh block-end và inline-end gặp nhau.

Điều này có thể khó hình dung lúc đầu, vì vậy hãy cùng ánh xạ nó cho các chế độ viết khác nhau:

Ánh xạ `border-radius` trong `writing-mode: horizontal-tb` (ví dụ: tiếng Anh)

• border-start-start-radius ánh xạ tới top-left-radius.
• border-start-end-radius ánh xạ tới top-right-radius.
• border-end-start-radius ánh xạ tới bottom-left-radius.
• border-end-end-radius ánh xạ tới bottom-right-radius.

Ánh xạ `border-radius` trong `writing-mode: horizontal-tb` với `dir="rtl"` (ví dụ: tiếng Ả Rập)

Ở đây, hướng inline bị đảo ngược.

• border-start-start-radius ánh xạ tới top-right-radius. (Block-start là trên, inline-start là phải).
• border-start-end-radius ánh xạ tới top-left-radius.
• border-end-start-radius ánh xạ tới bottom-right-radius.
• border-end-end-radius ánh xạ tới bottom-left-radius.

Ánh xạ `border-radius` trong `writing-mode: vertical-rl` (ví dụ: tiếng Nhật)

Ở đây, cả hai trục đều được xoay.

• border-start-start-radius ánh xạ tới top-right-radius. (Block-start là phải, inline-start là trên).
• border-start-end-radius ánh xạ tới bottom-right-radius.
• border-end-start-radius ánh xạ tới top-left-radius.
• border-end-end-radius ánh xạ tới bottom-left-radius.

Bằng cách sử dụng các thuộc tính mới này, bạn có thể xác định bán kính góc được gắn kết về mặt ngữ nghĩa với dòng chảy của nội dung, chứ không phải màn hình vật lý. Một góc "start-start" sẽ luôn là góc chính xác, bất kể ngôn ngữ hay hướng văn bản.

Triển khai thực tế: Xây dựng một Component sẵn sàng cho toàn cầu

Lý thuyết thì tuyệt vời, nhưng hãy xem nó hoạt động như thế nào trong thực tế. Chúng ta sẽ xây dựng một thành phần thẻ hồ sơ đơn giản, đầu tiên sử dụng các thuộc tính vật lý cũ, sau đó tái cấu trúc nó để sử dụng các thuộc tính logic hiện đại từ cả Cấp độ 1 và Cấp độ 2.

Thẻ sẽ có một hình ảnh được float sang một bên, một tiêu đề, một ít văn bản, và một đường viền trang trí cùng các góc bo tròn.

Cách "Cũ": Thẻ với Thuộc tính Vật lý, dễ vỡ

Đây là cách chúng ta có thể đã tạo kiểu cho thẻ này vài năm trước:

/* --- CSS (Thuộc tính Vật lý) --- */

.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;

}

Trong bối cảnh LTR tiếng Anh tiêu chuẩn, điều này trông ổn. Nhưng nếu chúng ta đặt nó bên trong một container có dir="rtl" hoặc writing-mode: vertical-rl, bố cục sẽ bị hỏng. Đường viền trang trí ở sai phía, ảnh đại diện ở sai phía, lề không chính xác và các góc bo tròn bị đặt sai vị trí.

Cách "Mới": Thẻ với Thuộc tính Logic, bền vững

Bây giờ, hãy tái cấu trúc cùng một thành phần bằng cách sử dụng các thuộc tính logic. Chúng ta sẽ tận dụng các thuộc tính từ cả Cấp độ 1 và các bổ sung mới từ Cấp độ 2.

/* --- CSS (Thuộc tính Logic) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` shorthand đã là logic! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Sức mạnh của Cấp độ 2! */

  border-end-start-radius: 8px; /* Sức mạnh của Cấp độ 2! */

}

.logical-card .avatar {

  float: inline-start; /* Sức mạnh của Cấp độ 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Kiểm tra và Xác minh

Với đoạn CSS mới này, bạn có thể thả thành phần vào bất kỳ container nào, và nó sẽ tự động thích ứng.

• Trong bối cảnh LTR: Nó sẽ trông giống hệt phiên bản vật lý ban đầu.
• Trong bối cảnh RTL (dir="rtl"): Ảnh đại diện sẽ float sang phải, lề của nó sẽ ở bên trái, đường viền trang trí sẽ ở bên phải, và văn bản sẽ được căn lề đầu (về phía phải). Các góc bo tròn sẽ chính xác ở phía trên-phải và dưới-phải. Nó chỉ đơn giản là hoạt động.
• Trong bối cảnh dọc (writing-mode: vertical-rl): "Chiều rộng" của thẻ (bây giờ là inline-size dọc của nó) sẽ là 300px. Ảnh đại diện sẽ float lên "trên" (inline-start) với một lề ở "dưới" của nó (inline-end). Đường viền trang trí sẽ ở bên phải (inline-start), và các góc bo tròn sẽ ở phía trên-phải và trên-trái. Thành phần đã hoàn toàn tự định hướng lại một cách chính xác mà không cần bất kỳ media query hay ghi đè nào.

Hỗ trợ trình duyệt và Phương án dự phòng (Fallbacks)

Tất cả những điều này nghe có vẻ tuyệt vời, nhưng còn hỗ trợ trình duyệt thì sao? Tin tốt là sự hỗ trợ cho các thuộc tính logic Cấp độ 1 là rất tốt trên tất cả các trình duyệt hiện đại. Bạn có thể và nên sử dụng các thuộc tính như margin-inline-start và padding-block ngay hôm nay.

Hỗ trợ cho các tính năng mới hơn của Cấp độ 2 đang được cải thiện nhanh chóng nhưng chưa phổ biến hoàn toàn. Các giá trị logic cho float, clear, và resize được hỗ trợ tốt. Các thuộc tính border-radius logic là mới nhất và có thể vẫn còn sau các cờ tính năng hoặc trong các phiên bản trình duyệt gần đây. Như mọi khi, bạn nên tham khảo các tài nguyên như MDN Web Docs hoặc CanIUse.com để có dữ liệu tương thích cập nhật nhất.

Chiến lược Cải tiến lũy tiến (Progressive Enhancement)

Vì CSS được thiết kế để có khả năng phục hồi, chúng ta có thể dễ dàng cung cấp các phương án dự phòng cho các trình duyệt cũ hơn. Cơ chế xếp tầng (cascade) sẽ đảm bảo rằng nếu một trình duyệt không hiểu một thuộc tính logic, nó sẽ đơn giản bỏ qua và sử dụng thuộc tính vật lý được định nghĩa trước đó.

Đây là cách bạn có thể viết CSS sẵn sàng cho fallback:

.card {

  /* Fallback cho các trình duyệt cũ hơn */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Thuộc tính logic hiện đại sẽ ghi đè lên fallback */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Cách tiếp cận này đảm bảo một trải nghiệm cơ bản vững chắc cho mọi người trong khi cung cấp bố cục nâng cao, thích ứng cho người dùng trên các trình duyệt hiện đại. Đối với các dự án không cần hỗ trợ nhiều chế độ viết, điều này có thể là thừa. Nhưng đối với bất kỳ ứng dụng toàn cầu, hệ thống thiết kế hoặc chủ đề nào, đây là một chiến lược mạnh mẽ và chứng minh cho tương lai.

Tương lai là Logic: Vượt ra ngoài Cấp độ 2

Sự chuyển đổi từ tư duy vật lý sang tư duy logic là một trong những thay đổi quan trọng nhất trong CSS hiện đại. Nó điều chỉnh ngôn ngữ tạo kiểu của chúng ta với thực tế của một web đa dạng, toàn cầu. Nó đưa chúng ta ra khỏi những thủ thuật giòn giã, hướng màn hình để tiến tới thiết kế bền vững, hướng nội dung.

Vẫn còn những khoảng trống không? Một vài. Các giá trị logic cho các thuộc tính như background-position hoặc gradient vẫn đang được thảo luận. Nhưng với việc phát hành Cấp độ 2, đại đa số các tác vụ bố cục và tạo kiểu hàng ngày giờ đây có thể được thực hiện bằng một phương pháp hoàn toàn logic.

Lời kêu gọi hành động cho các nhà phát triển rất rõ ràng: hãy bắt đầu mặc định sử dụng các thuộc tính logic. Hãy biến inline-size thành lựa chọn hàng đầu của bạn thay vì width. Sử dụng margin-inline thay vì đặt lề trái và phải riêng biệt. Điều này không chỉ là về việc hỗ trợ các ngôn ngữ khác nhau; nó là về việc viết CSS tốt hơn, bền vững hơn. Một thành phần được xây dựng với các thuộc tính logic vốn dĩ có khả năng tái sử dụng và thích ứng cao hơn, cho dù nó được sử dụng trong bố cục LTR, RTL hay dọc. Đơn giản đó là kỹ thuật tốt hơn.

Kết luận: Hãy đón nhận Dòng chảy (Flow)

Thuộc tính Logic CSS Cấp độ 2 không chỉ là một bộ sưu tập các tính năng mới; nó là sự hoàn thiện của một tầm nhìn. Nó cung cấp những mảnh ghép cuối cùng, quan trọng cần thiết để xây dựng các bố cục tôn trọng dòng chảy tự nhiên của nội dung, bất kể dòng chảy đó là gì. Bằng cách đón nhận các thuộc tính như float: inline-start và border-start-start-radius, chúng ta nâng cao tay nghề của mình từ việc chỉ đơn thuần định vị các hộp trên màn hình lên việc thiết kế các trải nghiệm web thực sự toàn cầu, bao hàm và chứng minh cho tương lai.

Lần tới khi bạn bắt đầu một dự án mới hoặc xây dựng một thành phần mới, hãy dừng lại trước khi gõ margin-left. Hãy tự hỏi, "Ý tôi là bên trái, hay ý tôi là điểm bắt đầu?" Bằng cách thực hiện sự thay đổi nhỏ trong tư duy đó, bạn sẽ góp phần vào một web dễ thích ứng và dễ truy cập hơn cho mọi người, ở mọi nơi.