Вставка - CSS-хитрощі

insetВластивість в CSS є узагальнюючим для чотирьох вкладних властивостей top, right, bottomі leftв одній декларації. Так само, як і чотири окремі властивості, insetне впливає на непозиціоновані (статичні) елементи. Іншими словами, елемент повинен оголосити явне positionзначення, перш ніж властивості вставки можуть набути чинності.

.box ( inset: 10px 20px 30px 40px; position: relative; )

inset спочатку визначається в специфікації логічних властивостей та значень CSS рівня 1, яка знаходиться в проекті редактора станом на 20 квітня 2020 року.

Синтаксис

Як ви могли зрозуміти з наведеного вище прикладу, insetслід той самий багатозначний синтаксис paddingта margin. Це означає , що вона приймає цілих чотири значення (оголошувати зміщення для top, right, bottomі left) , і всього лише одне значення (оголошувати рівноправне зміщення для всіх чотирьох властивостей). І, як paddingі margin, значення потікають за годинниковою стрілкою, починаючи з top.

.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )

Раніше insetнам потрібно було б декларувати кожну insetпідвластивість окремо, наприклад:

.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )

Тепер ми можемо просто це зробити до одного рядка CSS:

.box ( position: absolute; inset: 0; /* ? */ )

Цінності

insetВластивість приймає числові значення , так само , як зверху, праворуч, знизу і зліва. Ці значення можуть бути будь-допустимої довжиною CSS, такі як px, em, remі %, серед інших.

Поговоримо про логічні властивості

Ми просто збираємося подряпати поверхню логічних властивостей тут, оскільки справжня увага зосереджена на insetта пов’язаних з ними підвластивостях. Поглибтесь глибокого занурення на цю тему в цій статті Smashing Magazine від Рейчел Ендрю.

Є ще insetсуб-властивості , ніж top, right, bottomі , leftале для того, щоб зрозуміти їх, це варто того , щоб познайомитися з логічними властивостями і значеннями.

Вміст може відображатися в різних напрямках (тобто режимах письма), включаючи зліва направо, справа наліво, зверху вниз і знизу вгору. Коли ми говоримо про «логічні» поняття, ми справді маємо на увазі вихідну точку, засновану на напрямку написання змісту.

Уявіть, що ви створюєте веб-сайт, який повинен підтримувати як мови зліва направо (LTR), такі як англійська та іспанська, так і мови справа наліво (RTL), такі як перська чи арабська. Скажімо, ви хочете додати поле між піктограмою та текстом рядка поруч із нею.

Звичайно, ви можете вдатися до margin-rightвластивості, яка підтримує LTR, а потім додати інший набір правил, який видаляє це поле та замінює його margin-leftна RTL:

.icon ( margin-right: 1em; ) 
 /* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )

Це невелика частина сторінки. А тепер уявіть, як створити великий веб-сайт таким чином - це багато роботи! Але логічні властивості роблять це швидко, беручи до уваги режим написання. Наприклад, ми можемо додати поле до кінця елемента, де б це не було:

.icon ( margin-inline-end: 1em; )

Це те, що ми маємо на увазі, посилаючись на логічні властивості - вони відносно режиму письма, а не фізичного напрямку. Подивіться, як з логічними властивостями набагато логічніше працювати?

Вставка логічних властивостей

Отже, знаючи те, що ви тепер знаєте про логічні властивості, ось чотири додаткові вкладені підвластивості:

Логічна властивість	Еквівалент горизонтального потоку	Що це робить
inset-block-start	top	Вказує зміщення для початкового краю в напрямку, який перпендикулярний напрямку письма.
inset-block-end	bottom	Вказує зміщення для кінцевого краю в напрямку, який перпендикулярний напрямку письма.
inset-inline-start	left	Визначає зміщення для початкового фронту в напрямку запису, яке відображається на фізичне зміщення залежно від режиму запису елемента, напрямку та орієнтації тексту.
inset-inline-end	right	Визначає зміщення для кінцевого краю у напрямку написання.

Ми навіть можемо згрупувати ці чотири підвластивості за двома додатковими скорочувальними властивостями:

Логічна властивість	Стенографія для	Що це робить
inset-inline	inset-inline-start inset-inline-end	Приймає одне значення для встановлення обох inset-inline-startі inset-inline-end. Також приймає два значення, де перше вказує, inset-inline-startа друге вказує inset-inline-end.
inset-block	inset-block-start inset-block-end	Приймає одне значення для встановлення як inset-block-start, так і inset-block-end. Також приймає два значення, де перше вказує, inset-block-startа друге вказує inset-block-end.

Демо

Змініть режим запису та значення властивостей вставки, щоб краще зрозуміти, як вони працюють:

Увага: insetвластивість не логічна

Незважаючи на те, що insetце частина специфікації логічних властивостей і значень, вона не визначає логічний блок або вбудовані зміщення. Натомість він визначає фізичні зміщення, незалежно від режиму написання елемента, напрямку та орієнтації тексту. Іншими словами, insetце просто скорочення для top, right, bottomі left.

Існує деяка дискусія тут на GitHub щодо використання деяких ключових слів, щоб також можна було використовувати цю властивість логічно.

Отже, ми все ще використовуємо фізичні компенсації? Уявіть, що ви хочете отримати значок чи логотип, закріплений у верхньому та лівому куті сторінки, і, незалежно від мови, ви хочете, щоб він був там. У цьому випадку ви не можете використовувати логічні зсуви, і вам доведеться вдатися до фізичних властивостей.

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

Підтримка insetмайна все ще знаходиться на початковій стадії. На момент написання цього матеріалу, caniuse оцінює глобальну підтримку лише 3,79%.

Робочий стіл

Internet Explorer	Край	Firefox	Chrome	Сафарі	Опера
Ні	Ні	66+	Ні	Ні	Ні

Мобільний

iOS Safari	Opera Mini	Браузер Android	Chrome Android	Firefox Android
Ні	Ні	68	Ні	Ні

Більше інформації

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