Вставка-вбудований-кінець - CSS-хитрощі

Зміст:

Anonim

inset-inline-endє властивістю CSS, яка встановлює довжину зміщення елемента у початковому вбудованому напрямку. Це ніби як оголосити , rightщо воно відноситься до позиціонуються елементів і зміщення елемента в лівому напрямку, за винятком його початкової і кінцевої точки можна змінювати на підставі елемента direction, text-orientationі writing-mode, так само як і інші логічні властивості.

Властивість є частиною специфікації логічних властивостей та значень CSS рівня 1, яка наразі перебуває у статусі Чернетки редактора. Це означає, що визначення та інформація про нього можуть змінюватися від сьогодні до офіційної рекомендації.

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

Так, наприклад, якщо режим запису встановлюється в horizontal-lrв inset-inline-endвласності буде діяти так само , як і налаштування left, компенсуючи елемент від лівого краю. Вам навіть потрібно вказати явний positionдля того самого елемента, щоб він набув чинності, як і властивості фізичного зміщення.

Але змініть елементи writing-modeна щось на зразок, vertical-lrі «стартовий» край обертається у вертикальному напрямку, діючи більше як topзамість цього.

Синтаксис

inset-inline-end: ;
  • Початкове значення: auto
  • Застосовується до: позиціонованих елементів
  • Успадковано: ні
  • Відсотки: як для відповідної фізичної властивості
  • Обчислене значення: те саме, що відповідне leftвластивість
  • Тип анімації: за типом обчислюваного значення

Цінності

inset-blockприймає значення довжини і підтримує глобальні ключові слова. Значення за замовчуванням - 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;

Підтримка браузера

IE Край Firefox Chrome Сафарі Опера
Ні Ні 63+ Ні Ні Ні
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mini
Ні 79+ Ні Ні Ні
Джерело: caniuse

Демо

Подальше читання

  • Специфікація логічних властивостей та значень CSS рівня 1 (проект редактора)
  • Документація MDN
  • Розуміння логічних властивостей та цінностей (Smashing Magazine)
  • Логічні властивості CSS (Адріан Розеллі)
  • Двонаправлені горизонтальні правила в CSS (Хуссейн Аль Хаммад)