Вбудований-вбудований - CSS-хитрощі

Зміст:

Anonim

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

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

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

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

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

Синтаксис

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

Цінності

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

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

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

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

Демо

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

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