Inset-inline-end - Thủ thuật CSS

Mục lục:

Anonim

inset-inline-endlà một thuộc tính CSS đặt độ dài mà một phần tử được bù đắp theo hướng nội dòng bắt đầu. Đó là loại giống như khai báo rightở chỗ nó áp dụng đối với các yếu tố vị trí và hiệu số một yếu tố theo hướng bên trái, trừ bắt đầu và điểm kết thúc có thể thay đổi dựa trên các yếu tố của direction, text-orientationvà writing-mode, giống như tính logic khác.

Thuộc tính này là một phần của đặc tả Giá trị và Thuộc tính logic CSS Cấp độ 1 hiện đang ở trạng thái Bản nháp của Người biên tập. Điều đó có nghĩa là định nghĩa và thông tin về nó có thể thay đổi từ bây giờ đến khuyến nghị chính thức.

.element ( inset-inline-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Vì vậy, ví dụ, nếu chế độ ghi được đặt thành horizontal-lrthuộc inset-inline-endtính sẽ hoạt động giống như thiết lập left, bù trừ một phần tử từ cạnh trái. Bạn thậm chí cần chỉ định một positionphần tử rõ ràng trên cùng một phần tử để nó có hiệu lực, giống như các thuộc tính bù trừ vật lý.

Nhưng thay đổi phần tử writing-modethành một cái gì đó tương tự vertical-lrvà cạnh "bắt đầu" được xoay theo hướng thẳng đứng, hoạt động giống như topthay thế.

Cú pháp

inset-inline-end: ;
  • Giá trị ban đầu: auto
  • Áp dụng cho: phần tử được định vị
  • Kế thừa: không
  • Phần trăm: đối với tài sản vật chất tương ứng
  • Trị giá tính toán: tương tự như tương ứng với lefttài sản
  • Loại hoạt ảnh: theo loại giá trị được tính toán

Giá trị

inset-blockcó giá trị độ dài và hỗ trợ các từ khóa toàn cầu. Giá trị mặc định của nó là auto.

/* Length values */ inset-inline-end: 50px; inset-inline-end: 4em; inset-inline-end: 3.5rem inset-inline-end: 25vh; /* Percentage values */ inset-inline-end: 50%; /* Keyword values */ inset-inline-end: auto; /* initial value */ /* Global values */ inset-inline-end: initial inset-inline-end: inherit; inset-inline-end: unset;

Hỗ trợ trình duyệt

I E Cạnh Firefox Trình duyệt Chrome Safari Opera
Không Không 63+ Không Không Không
Chrome dành cho Android Android Firefox Trình duyệt Android iOS Safari Opera Mini
Không 79+ Không Không Không
Nguồn: caniuse

Bản giới thiệu

đọc thêm

  • Thuộc tính và giá trị logic CSS Đặc tả cấp độ 1 (Bản thảo của người biên tập)
  • Tài liệu MDN
  • Hiểu các thuộc tính và giá trị logic (Tạp chí Smashing)
  • Thuộc tính logic CSS (Adrian Roselli)
  • Quy tắc ngang hai chiều trong CSS (Hussein Al Hammad)