Các ký hiệu viết tắt thuộc tính logic mới và các 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), 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 các kiểu logic, thay vì kiểu thực, hướng và kích thước. Trong Chromium 87, các ký hiệu viết tắt và độ dời đã được cung cấp để giúp bạn dễ dàng viết các thuộc tính và giá trị logic này hơn một chút. Điều này giúp Chromium trở thành Firefox, trình duyệt đã hỗ trợ các cách viết tắt từ phiên bản 66. Safari đã sẵn sàng để đưa họ vào 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 nội tuyến và trục khối và không muốn làm mới, bạn có thể bỏ qua phần này. Nếu không, hãy tham khảo phần ôn tập ngắn sau đây.
Trong tiếng Anh, các chữ cái và từ được sắp xếp từ trái sang phải, còn các đoạn văn được xếp chồng từ trên xuống dưới. Trong tiếng Trung truyền thống, các chữ cái và từ được viết từ trên xuống dưới, còn 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 viết CSS đặt "margin top" (lề trên) trên một đoạn văn, chúng ta chỉ giãn cách một kiểu ngôn ngữ một cách thích 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 có ý nghĩa trong chế độ viết dọc mới.
Do đó, mặt thực của hộp không hữu ích lắm trên phạm vi quốc tế. Như vậy, quá trình hỗ trợ nhiều ngôn ngữ bắt đầu; 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 Chrome DevTools chưa? Nếu có, bạn có thể nhận thấy rằng các kiểu Tác nhân người dùng mặc định không phải là kiểu thực tế mà là kiểu logic.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
CSS trong Biểu định kiểu tác nhân người dùng của Chromium
Lề không phải ở 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 tương tự như phần trên cùng và dưới cùng của trình đọc tiếng Anh, nhưng cũng tương tự như trình đọc tiếng Nhật là bên phải và bên trái. Viết một lần, dùng được ở mọi nơi.
Luồng thông thường là khi trang web cố ý là một phần của luồng đa hướng này. Khi nội dung trang cập nhật theo các thay đổi về hướng tài liệu, bố cục và các phần tử của bố cục đó sẽ được xem xét trong luồng. Đọc thêm về "trong" và "ngoài" 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ù không bắt buộc phải có thuộc tính logic trong luồng, nhưng các thuộc tính này sẽ giúp bạn thực hiện nhiều thao tác nặng khi hướng thay đổi. Flow ngụ ý hướng, chữ cái, từ và nội dung cần di chuyển. Điều này dẫn chúng ta đến các hướng dẫn logic chặn và nội tuyến.
Hướng khối là hướng mà các khối nội dung mới tuân theo, chẳng hạn như tự hỏi "nên đặt đoạn văn tiếp theo ở đâu?". Bạn có thể coi đó là "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 các khối đó theo block-axis tương ứng. block-start là bên đặt đoạn văn đầu tiên, còn block-end là bên mà các đoạn văn mới sẽ chuyển đến.
Trong chữ viết tay tiếng Nhật truyền thống, ví dụ: hướng của khối sẽ di chuyển từ phải sang trái:
Hướng nội tuyến là hướng của các chữ cái và từ. Hãy xem xét hướng di chuyển của cánh tay và bàn tay khi bạn viết; chúng đang di chuyển dọc theo inline-axis.
inline-start là bên bạn bắt đầu viết, còn inline-end là bên kết thúc hoặc gói dữ liệu. Trong video ở trên, inline-axis chạy từ trên xuống, nhưng trong video tiếp theo, inline-axis chạy từ phải sang trái.
Việc có flow-relative nghĩa là các kiểu được viết cho một ngôn ngữ sẽ được áp dụng theo ngữ cảnh và phù hợp với các ngôn ngữ khác. Nội dung sẽ được trình bày tương ứng với ngôn ngữ mà nội dung đó được phân phối.
Cách viết tắt mới
Một số viết tắt sau đây không phải là tính năng mới cho trình duyệt, mà là cách dễ dàng hơn để viết kiểu bằng cách tận dụng khả năng thiết lập giá trị trên cả cạnh khối hoặc nội tuyến cùng một lúc. Các thuộc tính logic inset-* có mang lại các khả năng mới, vì trước đó không có cách nào để chỉ định các vị trí tuyệt đối bằng các thuộc tính logic. Mặc dù phần lồng ghép và viết tắt rất phù hợp với nhau, nhưng tôi sẽ giới thiệu cho bạn tất cả các tính năng mới về thuộc tính logic trong Chromium 87 cùng một lúc.
Ký hiệu viết tắt lề
Không có khả năng mới nào được cung cấp, nhưng một số viết tắt siêu tiện dụng đã được cung cấp:
margin-block và
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Trước đây, chúng tôi chưa có ký hiệu viết tắt cho "trên và dưới" hoặc "trái và phải"!
Bạn có thể tham chiếu cả 4 mặt bằng cách sử dụng viết tắt margin: 10px;. Giờ đây, bạn có thể dễ dàng tham chiếu 2 mặt bổ sung bằng cách sử dụng viết tắt thuộc tính logic.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Viết tắt của khoảng đệm
Không có tính năng mới nào được xuất hiện, nhưng đã có thêm nhiều tính năng viết tắt cực kỳ tiện dụng:
padding-block và padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Và bộ cách viết tắt miễn phí inline:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Chữ lồng ghép và chữ viết tắt
Bạn có thể viết tất cả các thuộc tính vật lý top, right, bottom và left 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 có 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 này sẽ rất tiện lợi! Phần lồng ghép là viết tắt của các cạnh thực tế và hoạt động giống như lề và khoảng đệm.
Tính năng mới
Mặc dù các ký hiệu viết tắt cho các mặt vật lý rất thú vị, nhưng các tính năng logic mà các ký hiệu viết tắt inset bổ sung mang lại còn thú vị hơn nữa. Những cú pháp viết tắt này mang lại sự thuận tiện cho hoạt động biên tập của nhà phát triển (ít phải nhập hơn) nhưng cũng giúp 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.
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à xem danh sách đầy đủ các ký hiệu viết tắt và viết dài của phần lồng ghép trên MDN.
Đường viền viết tắt
Border (Đường viền) cùng với các thuộc tính color, style và width lồng nhau đều có các ký hiệu 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à xem danh sách đầy đủ các 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 một ví dụ nhỏ về cách kết hợp tất cả các thành phần này. Các thuộc tính logic có thể bố cục hình ảnh bằng chú thích để xử lý các hướng viết và tài liệu khác nhau.
Hoặc dùng thử!
Bạn không cần phải làm gì nhiều để tạo một thẻ thích ứng trên toàn cầu bằng <figure> và một vài thuộc tính logic. Nếu bạn muốn biết về cách CSS được cân nhắc toàn cầu 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ỏ, hữu ích.
Tính năng tự động điền và hỗ trợ nhiều trình duyệt
Công cụ Cascade hoặc công cụ xây dựng là những lựa chọn khả thi để có trình duyệt cũ và mới giống nhau, có khoảng cách phù hợp với các thuộc tính logic đã cập nhật. Đối với phương thức dự phòng Cascade, hãy theo một thuộc tính thực bằng một thuộc tính logic và trình duyệt sẽ sử dụng thuộc tính "cuối cùng" mà trình duyệt 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à giải pháp hoàn chỉnh 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ế của các ngôn ngữ đó một cách thích hợp, sau đó cung cấp khoảng cách hợp lý để 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 phương án dự phòng cho thuộc tính thực tế 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 bên khác có các dịch vụ gói và/hoặc thời gian xây dựng tự động có nhiều giải pháp hoặc giải pháp dự phòng. Hãy kiểm tra từng trang để xem công cụ nào phù hợp với chuỗi công cụ và chiến lược trang web tổng thể của bạn.
Bước tiếp theo
CSS sẽ cung cấp nhiều thuộc tính logic hơn, nhưng chưa hoàn tất! Tuy nhiên, thiếu một tập hợp ký tự viết tắt lớn và vẫn đang chờ xử lý giải pháp trong vấn đề GitHub này. Có một giải pháp tạm thời trong bản nháp. Nếu bạn muốn tạo kiểu cho tất cả các cạnh logic của một hộp bằng ký hiệu viết tắt thì sao?
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 ký hiệu viết tắt để áp dụng giá trị tương đương logic, điều này nghe có vẻ không DRY (Khô khan) đối với một số người.
Có các đề xuất khác để thay đổi thuộc tính này ở cấp khối hoặc cấp trang, nhưng điều đó có thể làm rò rỉ các trường hợp sử dụng logic vào các kiểu vẫn giả định các mặt thực.
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, bày tỏ ý kiến của bạn. Chúng tôi rất mong được nghe ý kiến của bạn.
Bạn muốn tìm hiểu hoặc nghiên cứu thêm về các thuộc tính 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 🤓
Phản hồi
- Để đề xuất thay đổi cú pháp CSS của các từ viết tắt tương đối theo luồng, 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 có khớp với đề xuất của bạn, hãy tạo vấn đề mới.
- Để báo cáo lỗi về việc triển khai các ký hiệu viết tắt tương đối theo 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 của Chromium. Nếu không có vấn đề hiện tại nào trùng khớp với lỗi của bạn, hãy tạo vấn đề mới.