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), tính chất 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ế của họ thông qua những cách hợp lý, thay vì so với kiểu vật lý, kiểu phương diện và kiểu kích thước. Trong Chromium 87, cách viết tắt và đã được chuyển để giúp các thuộc tính và giá trị logic này dễ ghi hơn một chút. Điều này giúp Chromium phát triển đến với Firefox, trình duyệt đã hỗ trợ các cú pháp viết tắt từ 66 Safari đã sẵn sàng để đưa họ vào bản xem trước công nghệ.
Luồng tài liệu
Nếu bạn đã quen thuộc với các thuộc tính logic, trục cùng dòng và trục khối, đồng thời muốn ôn lại nội dung, bạn có thể bỏ qua. Nếu không, tôi sẽ ôn lại kiến thức ngắn gọn sau đây.
Trong tiếng Anh, các chữ cái và từ chạy từ trái sang phải trong khi các đoạn được xếp chồng lên nhau từ trên xuống dưới. Trong tiếng Trung phồn thể, các chữ cái và từ được xếp chồng lên nhau phải sang trái. Chỉ trong 2 trường hợp này, nếu chúng ta viết CSS đặt "lợi nhuận hàng đầu" trên một đoạn, chúng ta chỉ cần giãn cách 1 kiểu ngôn ngữ thích hợp. Nếu trang này được chuyển sang ngôn ngữ phồn thể Tiếng Trung trong tiếng Anh, lề có thể không hợp lý trong chế độ viết mới theo chiều dọc.
Do đó, khía cạnh vật lý của hộp không thực sự hữu ích trên phạm vi quốc tế. Do đó, bắt đầu quy trình hỗ trợ nhiều ngôn ngữ; tìm hiểu về mặt vật lý và mặt logic của mô hình hộp.
Bạn đã bao giờ kiểm tra phần tử p trong Công cụ của Chrome cho nhà phát triển chưa? Nếu có, có thể bạn
nhận thấy rằng kiểu Tác nhân người dùng mặc định
không mang tính vật lý mà mang tính 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 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! Những tính chất logic này giống với
trên cùng và dưới cùng, nhưng cũng giống với người đọc tiếng Nhật là bên phải và bên trái. Viết một lần, hoạt động ở mọi nơi.
Luồng thông thường là khi trang web là một phần của tính đ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à bố cục được xem xét trong luồng. Đọc thêm về từ "in" và "out" lưu lượng trên MDN hoặc trong Quy cách của Mô-đun hiển thị CSS. Trong khi thuộc tính logic không bắt buộc phải vận hành, mà chúng sẽ đảm nhận nhiều công việc khó khăn cho bạn 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 sẽ khiến chúng tôi chặn và cùng dòng các chỉ dẫn logic.
Hướng chặn là hướng mà nội dung mới sẽ chặn theo, chẳng hạn như tự hỏi bản thân
"đặ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ữ đều sắp xếp các khối và sắp xếp chúng theo
block-axis tương ứng. block-start là cạnh được đặt đầu tiên
còn block-end là bên cạnh các đoạn văn mới.
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 cùng dòng là hướng của các chữ cái và từ. Cân nhắc phương hướng
cánh tay và bàn tay của bạn di chuyển khi bạn viết; chúng sẽ di chuyển dọc theo inline-axis.
inline-start là phía bạn bắt đầu viết, còn inline-end là bên cạnh
khi chữ viết kết thúc hoặc kết thúc. Video ở trên, inline-axis ở trên cùng xuống dưới cùng
nhưng trong video tiếp theo này, inline-axis sẽ di chuyển từ phải sang trái.
Là flow-relative
có nghĩa là các kiểu được viết cho một ngôn ngữ sẽ phù hợp với ngữ cảnh và phù hợp
sang 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ố cách viết tắt sau đây không phải là tính năng mới của trình duyệt, mà dễ dàng hơn
cách viết kiểu bằng cách tận dụng khả năng đặt giá trị trên cả hai khối
hoặc các cạnh cùng dòng cùng một lúc. Thuộc tính logic inset-* có mang lại các khả năng mới,
vì không có cách nào lâu dài để chỉ định vị trí tuyệt đối bằng các tính chất logic
trước nó. Tuy nhiên, các phần lồng ghép và cách viết tắt kết hợp rất ăn ý với nhau. Tôi sẽ
cho bạn biết về tất cả tính năng mới liên quan đến thuộc tính logic mới có trong Chromium 87 cùng một lúc.
Viết tắt của lề
Chưa có kỹ năng mới nào được xuất xưởng, nhưng đã có một số cách viết tắt cực kỳ tiện lợi:
margin-block và
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Không có cách viết tắt của "trên cùng và dưới cùng" hay "trái và phải"... cho đến bây giờ!
Bạn có thể tham chiếu cả 4 mặt bằng cách sử dụng cách viết tắt của 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
Chưa có kỹ năng mới nào được xuất xưởng, nhưng đã có thêm nhiều cách viết tắt vô cùng 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
Các tính chất vật lý top, right, bottom và left đều có thể được viết
làm giá trị cho thuộc tính inset. Mọi giá trị của position đều có thể hưởng lợi từ
đặ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 đó trông sẽ thuận tiện ngay lập tức! Phần lồng ghép là viết tắt của các khía cạnh thực tế, và hoạt động giống như lề và khoảng đệm.
Tính năng mới
Thú vị như viết tắt về khía cạnh vật chất, thậm chí còn có nhiều điều thú vị hơn từ
các tính năng logic do cách viết tắt khác của inset mang lại. Những cách viết tắt này mang đến
sự thuận tiện cho việc soạn thảo của nhà phát triển (thời gian nhập ngắn 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 có 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;
Tài liệu đọc thêm và danh sách đầy đủ các chữ viết tắt và dài tay có trên MDN.
Viết tắt đường viền
Đường viền, cùng các thuộc tính color, style và width lồng nhau đều có tất cả
cả cách viết tắt lôgic 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;
Tài liệu đọc thêm và danh sách đầy đủ về viết tắt và dài tay biên giới có trên MDN.
Ví dụ về thuộc tính logic <figure>
Hãy tóm tắt tất cả trong một ví dụ nhỏ. Thuộc tính logic có thể bố cục hình ảnh có chú thích để xử lý các hướng viết và hướng dẫn tài liệu khác nhau.
Hoặc dùng thử!
Bạn không cần phải làm nhiều để thẻ có thể phản hồi ở cấp quốc tế bằng
<figure> và một vài thuộc tính logic. Nếu bạn muốn biết tất cả những thay đổi này trên phạm vi quốc tế
Hãy cân nhắc về CSS cùng nhau, tôi hy vọng đây là một đoạn giới thiệu ngắn gọn, có ý nghĩa.
Hỗ trợ sử dụng tính năng polyfilling và hỗ trợ trên nhiều trình duyệt
Công cụ Cascade hoặc bản dựng là những tuỳ chọn khả thi để có các trình duyệt cũ và mới như nhau, được giãn cách hợp lý với các thuộc tính logic được cập nhật. Đối với tính năng Dự phòng tầng, hãy theo dõi một thuộc tính thực với một ký tự hợp lý và trình duyệt sẽ sử dụng ký tự "cuối cùng" thuộc tính tìm thấy trong quá trình tạo kiểu độ phân giải.
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. Sau đây là một bảng dự phòng viết tay
tận dụng bộ chọn giả :lang() để nhắm mục tiêu đến các ngôn ngữ cụ thể, điều chỉnh
giãn cách vật lý của chúng một cách thích hợp, sau đó cuối cùng cung cấp các
giãn cách cho các trình duyệt hỗ trợ:
/* 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ó cần cung cấp địa chỉ email thực
dự phòng thuộc tính:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Cảm xúc và các yếu tố khác đã được tạo tự động bằng trình gói và/hoặc bản dựng có cung cấp nhiều phương án dự phòng hoặc giải pháp hay không. Xem từng phần để xem chuỗi 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.
Các bước tiếp theo
Nhiều CSS khác sẽ cung cấp các thuộc tính logic. Tính năng này chưa hoàn tất! Thiếu một vấn đề lớn và cách viết tắt 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. Nếu bạn muốn tạo kiểu cho mặt logic của một hình hộp 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 ghi logical trong mỗi
để áp dụng quy tắc tương đương về mặt logic, mà nghe không có vẻ
rất Khô đối với một số người.
Có các đề xuất khác để thay đổi điều này ở cấp độ khối hoặc cấp trang, nhưng điều đó có thể làm rò rỉ cách sử dụng logic thành các kiểu vẫn giả định các khía cạnh 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 ý kiến của bạn và chúng tôi muốn nghe ý kiến của bạn.
Bạn muốn tìm hiể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 🤓
Phản hồi
- Để đề xuất thay đổi cú pháp CSS của cách viết tắt tương đối 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 đề hiện tại nào phù hợ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ách viết tắt tương đối luồng của Chromium, trước tiên, hãy kiểm tra các vấn đề hiện tại trên Trình theo dõi lỗi của Chromium. Nếu không có vấn đề hiện tại nào trùng với lỗi của bạn, hãy tạo vấn đề mới.