Tấm lót - Thủ thuật CSS

Các insetbất động sản trong CSS là viết tắt của bốn thuộc tính inset, top, right, bottomvà lefttrong một tuyên bố. Cũng giống như bản thân bốn thuộc tính riêng lẻ, insetkhông ảnh hưởng đến các phần tử không được định vị (tĩnh). Nói cách khác, một phần tử phải khai báo một positiongiá trị rõ ràng trước khi các thuộc tính nội bộ có thể có hiệu lực.

.box ( inset: 10px 20px 30px 40px; position: relative; )

inset ban đầu được xác định trong đặc tả Giá trị và Thuộc tính logic CSS Cấp độ 1, nằm trong Bản nháp của Người biên tập kể từ ngày 20 tháng 4 năm 2020.

Cú pháp

Như bạn có thể đã thu thập được từ ví dụ trên, hãy làm insettheo cùng một cú pháp đa giá trị của paddingvà margin. Điều đó có nghĩa nó chấp nhận bao nhiêu là bốn giá trị (để bù đắp cho khai báo top, right, bottomvà left) và càng ít là một giá trị (tuyên bố một bằng bù đắp cho tất cả bốn thuộc tính). Và, như paddingvà margin, các giá trị chảy theo chiều kim đồng hồ, bắt đầu bằng top.

.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )

Trước đây inset, chúng ta phải khai báo từng insetthuộc tính phụ riêng biệt, như sau:

.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )

Bây giờ, chúng ta có thể chỉ đơn giản là với một dòng CSS:

.box ( position: absolute; inset: 0; /* ? */ )

Giá trị

Các insetbất động sản chấp nhận các giá trị số giống như top, right, bottom và trái. Những giá trị có thể là bất kỳ chiều dài CSS hợp lệ, chẳng hạn như px, em, remvà %, trong số những người khác.

Hãy nói về các thuộc tính logic

Ở đây chúng ta sẽ chỉ làm sơ qua bề mặt của các thuộc tính logic vì trọng tâm thực sự là insetvà các thuộc tính phụ liên quan của nó. Tìm hiểu sâu về chủ đề này trong bài viết trên Tạp chí Smashing của Rachel Andrew.

Có rất nhiều insetphụ thuộc hơn top, right, bottomvà leftnhưng, để hiểu họ, đó là giá trị làm quen với tính hợp lý và giá trị.

Nội dung có thể được hiển thị theo các hướng khác nhau (tức là các chế độ viết), bao gồm từ trái sang phải, từ phải sang trái, từ trên xuống dưới và từ dưới lên trên. Khi chúng ta nói về các khái niệm "logic", chúng ta thực sự đang đề cập đến điểm xuất phát dựa trên hướng viết của nội dung.

Hãy tưởng tượng bạn đang xây dựng một trang web cần hỗ trợ cả hai ngôn ngữ từ trái sang phải (LTR), như tiếng Anh và tiếng Tây Ban Nha và ngôn ngữ từ phải sang trái (RTL) như tiếng Ba Tư hoặc tiếng Ả Rập. Giả sử bạn muốn thêm lề giữa một biểu tượng và một dòng văn bản bên cạnh nó.

Đương nhiên, bạn có thể tiếp cận thuộc margin-righttính để hỗ trợ LTR, sau đó thêm một bộ quy tắc khác loại bỏ lợi nhuận đó và thay thế bằng margin-leftcho RTL:

.icon ( margin-right: 1em; ) 
 /* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )

Đây là một phần nhỏ của một trang. Bây giờ hãy tưởng tượng việc xây dựng một trang web lớn theo cách này - đó là rất nhiều công việc! Nhưng các thuộc tính logic sẽ giúp chúng ta trở nên nhanh chóng bằng cách xem xét chế độ viết. Ví dụ: chúng ta có thể thêm lề vào cuối phần tử, bất cứ nơi nào xảy ra:

.icon ( margin-inline-end: 1em; )

Đây là ý của chúng tôi khi đề cập đến các thuộc tính logic - chúng liên quan đến chế độ ghi hơn là hướng vật lý. Xem cách các thuộc tính logic hợp lý hơn nhiều để làm việc với?

Chèn các thuộc tính logic

Vì vậy, biết những gì bạn biết bây giờ về các thuộc tính logic, đây là bốn thuộc tính phụ bổ sung của thiết lập:

Thuộc tính logic	Dòng chảy ngang tương đương	Những gì nó làm
inset-block-start	top	Chỉ định độ lệch cho cạnh bắt đầu theo hướng vuông góc với hướng viết.
inset-block-end	bottom	Chỉ định độ lệch cho cạnh kết thúc theo hướng vuông góc với hướng viết.
inset-inline-start	left	Chỉ định độ lệch cho cạnh bắt đầu theo hướng viết, ánh xạ tới độ lệch vật lý tùy thuộc vào chế độ ghi, hướng và hướng văn bản của phần tử.
inset-inline-end	right	Chỉ định độ lệch cho cạnh kết thúc theo hướng viết.

Chúng tôi thậm chí có thể nhóm bốn thuộc tính phụ đó thành hai thuộc tính viết tắt bổ sung:

Thuộc tính logic	Viết tắt cho	Những gì nó làm
inset-inline	inset-inline-start inset-inline-end	Chấp nhận một giá trị duy nhất để đặt cả hai inset-inline-startvà inset-inline-end. Cũng chấp nhận hai giá trị, trong đó giá trị đầu tiên chỉ định inset-inline-startvà giá trị thứ hai chỉ định inset-inline-end.
inset-block	inset-block-start inset-block-end	Chấp nhận một giá trị duy nhất để đặt cả inset-block-start và inset-block-end. Cũng chấp nhận hai giá trị, trong đó giá trị đầu tiên chỉ định inset-block-startvà giá trị thứ hai chỉ định inset-block-end.

Bản giới thiệu

Thay đổi chế độ ghi và các giá trị của thuộc tính chèn để hiểu rõ hơn về cách chúng hoạt động:

Cảnh báo: insetThuộc tính không logic

Mặc dù insetlà một phần của đặc tả Thuộc tính và Giá trị lôgic, nhưng nó không xác định khối lôgic hoặc các hiệu số nội dòng. Thay vào đó, nó xác định các hiệu số vật lý, bất kể chế độ ghi, hướng và hướng văn bản của phần tử. Nói cách khác, insetchỉ là viết tắt cho top, right, bottomvà left.

Có một số thảo luận ở đây trên GitHub liên quan đến việc sử dụng một số từ khóa để có thể sử dụng thuộc tính này một cách hợp lý.

Vì vậy, chúng ta vẫn sử dụng hiệu số vật lý? Hãy tưởng tượng bạn muốn một huy hiệu hoặc một biểu trưng cố định ở góc trên cùng và bên trái của trang và, bất kể ngôn ngữ, bạn muốn nó ở đó. Trong trường hợp đó, bạn không thể sử dụng các hiệu số logic và thay vào đó sẽ cần sử dụng các thuộc tính vật lý.

Hỗ trợ trình duyệt

Hỗ trợ cho insettài sản vẫn đang trong giai đoạn đầu. Theo bài viết này, caniuse ước tính hỗ trợ toàn cầu chỉ ở mức 3,79%.

Máy tính để bàn

trình duyệt web IE	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	Không	66+	Không	Không	Không

Di động

iOS Safari	Opera Mini	Trình duyệt Android	Chrome Android	Firefox Android
Không	Không	68	Không	Không

Thêm thông tin

• Thuộc tính và giá trị lôgic CSS Mức 1 (Đặc điểm kỹ thuật, Bản nháp của người biên tập)
• Hiểu các thuộc tính và giá trị lôgic (Tạp chí Smashing)
• Thuộc tính logic CSS (CSS-Tricks)