Viết tắt thuộc tính logic mới và thuộc tính lồng ghép mới cho Chromium.
Kể từ Chromium 69 (ngày 3 tháng 9 năm 2018), các thuộc tính logic và giá trị đã giúp nhà phát triển duy trì quyền kiểm soát bố cục quốc tế thông qua logic, thay vì kiểu vật lý, hướng và kích thước. Trong Chromium 87, các cách viết tắt và độ bù trừ đã được chuyển để giúp cho việc ghi các thuộc tính và giá trị logic này dễ dàng hơn một chút. Nhờ vậy, Chromium mới có thể kết nối với Firefox, trình duyệt đã hỗ trợ tính năng viết tắt kể từ phiên bản 66. Safari đã chuẩn bị sẵn các bước này trong bản xem trước công nghệ.
Quy trình tài liệu
Nếu đã quen thuộc với các thuộc tính logic, trục cùng dòng và trục khối và không muốn ôn lại kiến thức, bạn có thể bỏ qua. Nếu không, đây là phần tóm lược ngắn gọn.
Trong tiếng Anh, các chữ cái và từ di chuyển từ trái sang phải trong khi các đoạn văn được xếp chồng lên nhau. Trong tiếng Trung phồn thể, các chữ cái và từ ở trên cùng xuống dưới cùng trong khi các đoạn văn được xếp chồng từ phải sang trái. Chỉ trong 2 trường hợp này, nếu chúng tôi viết CSS đặt "lợi nhuận trên đầu trang" trên một đoạn văn bản, thì chúng tôi chỉ cách 1 kiểu ngôn ngữ sao cho phù hợp. Nếu trang được dịch từ tiếng Anh sang tiếng Trung phồn thể, thì lề có thể không hợp lý trong chế độ viết dọc mới.
Do đó, mặt vật lý của hộp không thực sự hữu ích trên toàn thế giới. Do đó, bắt đầu quá trình hỗ trợ nhiều ngôn ngữ; tìm hiểu về các khía cạnh thực tế và logic của mô hình hộp.
Bạn đã từng kiểm tra phần tử p trong Công cụ của Chrome cho nhà phát triển chưa? Nếu vậy, có thể bạn đã nhận thấy kiểu Tác nhân người dùng mặc định không phải là kiểu vật lý mà là kiểu logic.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
CSS từ Biểu định kiểu tác nhân người dùng của Chromium
Lề không nằm trên cùng hoặc dưới cùng như người đọc tiếng Anh có thể tin.
Đó là block-start và block-end! Các thuộc tính logic này gần giống với góc trên và dưới của người đọc tiếng Anh, nhưng cũng gần giống với góc trên bên phải và bên trái của người đọc tiếng Nhật. Chỉ viết một lần, có thể dùng ở mọi nơi.
Luồng thông thường là khi trang web nằm trong đa hướng này một cách có chủ ý. Khi nội dung trang cập nhật theo hướng tài liệu thay đổi, bố cục và các phần tử của bố cục đó sẽ được xem xét trong luồng. Hãy đọc thêm về "vào" và "ra" của luồng trên MDN hoặc trong thông số kỹ thuật của Mô-đun hiển thị CSS. Mặc dù các thuộc tính logic không bắt buộc phải đi theo luồng, nhưng chúng giúp bạn thực hiện nhiều công việc khó khăn khi hướng thay đổi. Luồng ngụ ý hướng, chữ cái, từ và nội dung cần truyền đi. Điều này dẫn đến việc chúng ta chặn và các hướng logic cùng dòng.
Hướng chặn là hướng mà khối nội dung mới tuân theo, chẳng hạn như tự hỏi "đặt đoạn tiếp theo ở đâu?". Bạn có thể coi đây là một "khối nội dung" hoặc "khối văn bản".
Mỗi ngôn ngữ sắp xếp các khối và sắp xếp chúng trên block-axis tương ứng. block-start là cạnh mà đoạn văn được đặt đầu tiên, trong khi block-end là cạnh của đoạn mới.
Ví dụ: trong chữ viết tay truyền thống của Nhật Bản, hướng khối di chuyển từ phải sang trái:
Hướng cùng dòng là hướng của chữ cái và từ. Hãy xem hướng di chuyển của cánh tay và bàn tay khi bạn viết; chúng di chuyển dọc theo inline-axis.
inline-start là phần bạn bắt đầu viết, còn inline-end là phần mà quá trình viết kết thúc hoặc kết thúc. Video trên, inline-axis từ trên xuống dưới, nhưng trong video tiếp theo, inline-axis di chuyển từ phải sang trái.
Việc dùng flow-relative có nghĩa là các kiểu viết cho một ngôn ngữ sẽ hiển thị theo ngữ cảnh và được áp dụng thích hợp trong các ngôn ngữ khác. Nội dung sẽ xuất hiện tương ứng với ngôn ngữ của nội dung đó.
Các cách viết tắt mới
Một số cách viết tắt sau đây không phải là tính năng mới cho trình duyệt, thay vào đó là các cách viết kiểu dễ dàng hơn nhờ tận dụng khả năng đặt giá trị trên cả hai cạnh khối hoặc cùng dòng cùng một lúc. Các thuộc tính logic inset-* có mang đến những khả năng mới, vì không có cách thức nào để chỉ định vị trí tuyệt đối bằng các thuộc tính logic trước đó. Tuy nhiên, các phần lồng ghép và ký tự viết tắt kết hợp với nhau quá tốt, tôi sẽ
cho bạn biết về tất cả tính năng thuộc tính logic mới xuất hiện trong Chromium 87 cùng một lúc.
Viết tắt lợi nhuận
Không có tính năng mới nào được phát hành, nhưng có một số tính năng viết tắt cực kỳ tiện dụng:
margin-block và
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Cho đến nay, không có cú pháp viết tắt cho "trên cùng và dưới cùng" hay "bên trái và bên phải"... cho đến bây giờ!
Bạn có thể tham chiếu cả 4 vế bằng cách sử dụng cú pháp viết tắt của margin: 10px;. Giờ đây, bạn có thể dễ dàng tham chiếu 2 vế bổ sung bằng cách sử dụng cú pháp viết tắt thuộc tính logic.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Phím tắt đệm đệm
Không có tính năng mới nào được phát hành, nhưng có nhiều tính năng viết tắt cực kỳ tiện dụng hơn:
padding-block và
padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Và bộ viết tắt miễn phí inline:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Phần lồng ghép và viết tắt
Các thuộc tính vật lý top, right, bottom và left đều có thể được viết dưới dạng giá trị cho thuộc tính inset. Bất kỳ giá trị nào của position đều có thể hưởng lợi từ việc đặt các cạnh bằng phần lồng ghép.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
Việc đó sẽ thuận tiện ngay lập tức! Phần lồng ghép là cách viết tắt của các cạnh thực và hoạt động giống như lề và khoảng đệm.
Tính năng mới
Thật thú vị giống như cách viết tắt của các mặt thực tế, thậm chí còn có nhiều hơn nữa từ các tính năng logic nhờ việc viết tắt inset bổ sung. Các cách viết tắt này mang lại sự thuận tiện cho tác giả của nhà phát triển (chúng ngắn hơn khi nhập) nhưng cũng làm tăng phạm vi tiếp cận tiềm năng cho bố cục vì chúng mang tính tương đối với luồng.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
Bạn có thể đọc thêm và danh sách đầy đủ các cú pháp viết tắt và viết tắt của phần lồng ghép trên MDN.
Viết tắt đường viền
Đường viền, cùng với các thuộc tính color, style và width lồng ghép cũng có cách viết tắt logic mới.
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
Bạn có thể đọc thêm và danh sách đầy đủ các cách viết tắt và viết dài của đường viền trên MDN.
Ví dụ về thuộc tính logic <figure>
Hãy cùng xem xét một ví dụ nhỏ. Các thuộc tính logic có thể bố cục hình ảnh với chú thích để xử lý nhiều hướng viết và ghi tài liệu.
Hoặc dùng thử!
Bạn không cần phải làm gì nhiều để thẻ có khả năng thích ứng quốc tế nhờ <figure> và một số thuộc tính logic. Nếu bạn muốn biết tất cả CSS chu đáo trên thế giới này hoạt động cùng nhau như thế nào, tôi hy vọng đây là một phần giới thiệu nhỏ, có ý nghĩa.
Chèn lấp đầy và hỗ trợ trên nhiều trình duyệt
Các công cụ phân tầng hoặc bản dựng là các lựa chọn khả thi để có trình duyệt cũ và trình duyệt mới, được đặt khoảng cách phù hợp với các thuộc tính logic được cập nhật. Đối với kiểu dự phòng Phân tầng, hãy tuân theo một thuộc tính thực tế bằng thuộc tính logic và trình duyệt sẽ sử dụng thuộc tính "cuối cùng" tìm thấy trong quá trình phân giải kiểu.
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
Tuy nhiên, đó không phải là một giải pháp đầy đủ cho tất cả mọi người. Dưới đây là một bản dự phòng viết tay tận dụng bộ chọn giả :lang() để nhắm mục tiêu các ngôn ngữ cụ thể, điều chỉnh khoảng cách thực tế cho phù hợp, sau đó cung cấp khoảng cách logic để hỗ trợ các trình duyệt:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
Bạn cũng có thể sử dụng @supports để xác định xem có cung cấp bản dự phòng thuộc tính thực hay không:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Emotion và những người khác có trình tạo gói tự động và/hoặc cung cấp thời gian tạo với nhiều phương án dự phòng hoặc giải pháp. Hãy xem từng chiến lược để xem chiến lược nào phù hợp với chuỗi công cụ và chiến lược tổng thể của trang web.
Các bước tiếp theo
Nhiều CSS hơn cung cấp các thuộc tính logic, điều này chưa được thực hiện! Tuy nhiên, còn thiếu một tập hợp viết tắt lớn và giải pháp vẫn đang chờ xử lý trong vấn đề GitHub này. Có một giải pháp tạm thời trong bản nháp. Điều gì sẽ xảy ra nếu bạn muốn tạo kiểu cho tất cả các cạnh logic của hộp bằng cách viết tắt?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
Đề xuất dự thảo hiện tại có nghĩa là bạn phải viết logical trong mọi bản viết tắt để áp dụng hàm logic tương đương. Điều này có vẻ không Dry đối với một số người.
Có những đề xuất khác để thay đổi kiểu khớp này ở cấp khối hoặc trang, nhưng điều đó có thể làm rò rỉ cách sử dụng hợp lý vào các kiểu vẫn giả định các mặt thực tế.
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
Đây là một câu hỏi khó! Hãy bỏ phiếu, nói lên quan điểm của bạn, chúng tôi muốn được nghe từ bạn.
Bạn muốn tìm hiểu hoặc nghiên cứu thêm về các tính chất logic? Dưới đây là tài liệu tham khảo chi tiết cùng với hướng dẫn và ví dụ trên MDN 🤓
Ý kiến phản hồi
- Để đề xuất những thay đổi đối với cú pháp CSS của các cách viết tắt tương đối về flow, trước tiên, hãy kiểm tra các vấn đề hiện có trên kho lưu trữ csswg-drafts. Nếu không có vấn đề nào hiện tại khớp với đề xuất của bạn, hãy tạo một vấn đề mới.
- Để báo cáo lỗi trong quá trình triển khai các cách viết ngắn liên quan đến luồng của Chromium, trước tiên, hãy kiểm tra các vấn đề hiện có trên Công cụ theo dõi lỗi Chromium. Nếu không có vấn đề nào hiện tại khớp với lỗi của bạn, hãy tạo vấn đề mới.