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

Зміст:

Anonim

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

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

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

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

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

Синтаксис

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

Цінності

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

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

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

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

Демо

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

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