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

Anonim

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

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

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

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

Але змініть елементи writing-modeна щось на зразок, vertical-lrі "нижній" край повернеться у вертикальному напрямку, діючи більше як rightвластивість.

Синтаксис

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

Цінності

inset-block-endприймає значення довжини і підтримує глобальні ключові слова. Значення за замовчуванням - auto.

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

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

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

Демо

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

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