insetИмовина у ЦСС је скраћеница за четири Инсет особина, top, right, bottomи leftу једној декларацији. Баш као и четири појединачна својства, insetнема утицаја на непозициониране (статичке) елементе. Другим речима, елемент мора да декларише експлицитну positionвредност пре него што уметнута својства ступе на снагу.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset је иницијално дефинисано у спецификацији ЦСС логичких својстава и вредности 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; )Сада то можемо једноставно да додамо у један ред ЦСС-а:
.box ( position: absolute; inset: 0; /* ? */ )Вредности
insetИмовине прихвата нумеричке вредности као и врха, десна, доња и лево. Те вредности може бити било која важи дужине ЦСС као што су px, em, remи %, између осталог.
Разговарајмо о логичким својствима
Овде ћемо само огребати површину логичких својстава, јер је стварни фокус на њему insetповезаним под-својствима. Забавите се детаљно о овој теми у овом чланку часописа Смасхинг Магазине од Рацхел Андрев.
Постоји више insetсуб-својства него top, right, bottomи leftвећ, како би их разумели, вреди упознавање са логичким особинама и вредностима.
Садржај се може приказивати у различитим смеровима (тј. Режимима писања), укључујући слева надесно, здесна налево, од врха до дна и од дна до врха. Када говоримо о „логичким“ концептима, стварно се позивамо на почетну тачку засновану на смеру писања садржаја.
Замислите да правите веб страницу која треба да подржава језике слева надесно (ЛТР), попут енглеског и шпанског, и језике здесна налево (РТЛ), попут перзијског или арапског. Рецимо да желите да додате маргину између иконе и текста реда поред ње.
Наравно, можете посегнути за margin-rightсвојством које подржава ЛТР, а затим додати још један скуп правила који уклања ту маргину и замењује је margin-leftза РТЛ:
.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-starт и inset-block-end.Такође прихвата две вредности, где прва наводи, inset-block-startа друга одређује inset-block-end. |
Демо
Промените начин писања и вредности својстава уметка да бисте стекли бољу представу о њиховом раду:
Пажња: insetсвојство није логично
Иако insetје део спецификације логичких својстава и вредности, он не дефинише логички блок или инлине помаке. Уместо тога, дефинише физичка померања, без обзира на начин писања, смер и оријентацију текста елемента. Другим речима, insetсамо скраћеница за top, right, bottomи left.
Овде је расправа на ГитХуб-у у вези са употребом неких кључних речи да би се и ово својство могло користити на логичан начин.
Дакле, да ли и даље користимо физичка померања? Замислите да желите значку или логотип фиксиране у горњи и леви угао странице и, без обзира на језик, желите да буде тамо. У том случају не можете користити логичке помаке и уместо тога мораћете да прибегнете физичким својствима.
Подршка прегледача
Подршка за insetимовину је још увек у раној фази. Од овог писања, цаниусе процењује глобалну подршку на само 3,79%.
Десктоп
| интернет претраживач | Ивица | Фирефок | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Не | Не | 66+ | Не | Не | Не |
Мобиле
| иОС Сафари | опера мини | Андроид претраживач | Цхроме Андроид | Фирефок Андроид |
|---|---|---|---|---|
| Не | Не | 68 | Не | Не |
Више информација
- ЦСС логичка својства и вредности ниво 1 (спецификација, нацрт уредника)
- Разумевање логичких својстава и вредности (Смасхинг Магазине)
- ЦСС логичка својства (ЦСС трикови)