В insetимота в CSS е съкращение за четирите открит кант свойства, top, right, bottomи leftв една декларация. Точно както четирите отделни свойства, insetняма ефект върху непозиционирани (статични) елементи. С други думи, елемент трябва да декларира изрична positionстойност, преди да влязат в сила свойствата на вмъкването.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset първоначално е дефиниран в спецификацията CSS Logical Properties and Values Level 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-leftRTL:
.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-startinset-inline-end | Приема една стойност за комплект както inset-inline-startи inset-inline-end.Също така приема две стойности, където първата указва, inset-inline-startа втората указва inset-inline-end. |
inset-block | inset-block-startinset-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 | опера мини | Браузър за Android | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Не | Не | 68 | Не | Не |
Повече информация
- Логически свойства и стойности на CSS ниво 1 (Спецификация, Чернова на редактора)
- Разбиране на логическите свойства и стойности (Smashing Magazine)
- Логически свойства на CSS (CSS-трикове)