Wstawka - CSS-Tricks

insetNieruchomość w CSS jest skrótem dla czterech właściwości wpuszczanych, top, right, bottomi leftw jednej deklaracji. Podobnie jak same cztery indywidualne właściwości, insetnie ma wpływu na niepozycjonowane (statyczne) elementy. Innymi słowy, element musi zadeklarować jawną positionwartość, zanim wstawione właściwości zaczną obowiązywać.

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

inset jest początkowo zdefiniowany w specyfikacji CSS Logical Properties and Values ​​Level 1, która znajduje się w wersji roboczej redakcji na dzień 20 kwietnia 2020 r.

Składnia

Jak można się domyślić z powyższego przykładu, insetstosuje się tę samą wielowartościową składnię paddingi margin. Oznacza to, że akceptuje aż czterech wartości (do offsetu deklaruję top, right, bottomi left) i tak niewiele jak jednej wartości (zadeklarować równą offset dla wszystkich czterech właściwości). I podobnie jak paddingi margin, wartości płyną zgodnie z ruchem wskazówek zegara, zaczynając od 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 */ )

Wcześniej insetmusielibyśmy insetosobno zadeklarować każdą właściwość podrzędną, na przykład:

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

Teraz możemy po prostu to do jednej linii CSS:

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

Wartości

insetNieruchomość przyjmuje wartości numeryczne jak górze, prawy i dolny i lewy. Wartości te mogą być dowolny ważny długość CSS, takie jak px, em, remi %, między innymi.

Porozmawiajmy o właściwościach logicznych

Po prostu zarysujemy tutaj powierzchnię właściwości logicznych, ponieważ prawdziwy nacisk kładzie się na inseti powiązane z nimi właściwości podrzędne. Zapoznaj się z szczegółowym omówieniem tego tematu w artykule Rachel Andrew w Smashing Magazine.

Istnieje więcej insetsub-properties niż top, right, bottoma leftjednak, aby je zrozumieć, warto zapoznać się z właściwościami coraz logicznych i wartości.

Treść może być wyświetlana w różnych kierunkach (tj. W trybach pisania), w tym od lewej do prawej, od prawej do lewej, od góry do dołu i od dołu do góry. Kiedy mówimy o „logicznych” koncepcjach, tak naprawdę odnosimy się do punktu wyjścia opartego na kierunku pisania treści.

Wyobraź sobie, że tworzysz witrynę internetową, która musi obsługiwać języki od lewej do prawej (LTR), takie jak angielski i hiszpański, oraz języki od prawej do lewej (RTL), takie jak perski lub arabski. Powiedzmy, że chcesz dodać margines między ikoną a tekstem linii obok niej.

Oczywiście możesz sięgnąć po margin-rightwłaściwość obsługującą LTR, a następnie dodać kolejny zestaw reguł, który usuwa ten margines i zastępuje go margin-leftdla RTL:

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

To jest niewielka część strony. Teraz wyobraź sobie budowanie dużej strony internetowej w ten sposób - to dużo pracy! Ale właściwości logiczne sprawiają, że jest to bardzo proste, biorąc pod uwagę dla nas tryb pisania. Na przykład możemy dodać margines na końcu elementu, gdziekolwiek to się stanie:

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

To właśnie mamy na myśli, odnosząc się do właściwości logicznych - odnoszą się one raczej do trybu pisania niż do fizycznego kierunku. Widzisz, że właściwości logiczne są znacznie bardziej logiczne w użyciu?

Wstawione właściwości logiczne

Tak więc, wiedząc, co teraz wiesz o właściwościach logicznych, oto cztery dodatkowe właściwości podrzędne wstawki:

Właściwość logiczna	Równoważnik przepływu poziomego	Co to robi
inset-block-start	top	Określa odsunięcie krawędzi początkowej w kierunku prostopadłym do kierunku pisania.
inset-block-end	bottom	Określa odsunięcie końcowej krawędzi w kierunku prostopadłym do kierunku pisania.
inset-inline-start	left	Określa przesunięcie początkowej krawędzi w kierunku pisania, które jest odwzorowywane na fizyczne przesunięcie w zależności od trybu pisania elementu, kierunku i orientacji tekstu.
inset-inline-end	right	Określa odsunięcie końcowej krawędzi w kierunku pisania.

Możemy nawet pogrupować te cztery właściwości podrzędne w dwie dodatkowe, skrócone właściwości:

Właściwość logiczna	Skrót dla	Co to robi
inset-inline	inset-inline-start inset-inline-end	Akceptuje jedną wartość, aby ustawić zarówno, jak inset-inline-starti inset-inline-end. Akceptuje również dwie wartości, z których pierwsza określa, inset-inline-starta druga określa inset-inline-end.
inset-block	inset-block-start inset-block-end	Akceptuje jedną wartość, aby ustawić zarówno inset-block-start, jak i inset-block-end. Akceptuje również dwie wartości, z których pierwsza określa, inset-block-starta druga określa inset-block-end.

Próbny

Zmień tryb pisania i wartości właściwości wstawek, aby lepiej zrozumieć, jak działają:

Uwaga: insetnieruchomość nie jest logiczna

Chociaż insetjest częścią specyfikacji Logical Properties and Values, nie definiuje bloku logicznego ani przesunięć liniowych. Zamiast tego definiuje fizyczne przesunięcia, niezależnie od trybu pisania elementu, kierunku i orientacji tekstu. Innymi słowy, insetjest po prostu skrótem top, right, bottomi left.

Na GitHubie jest dyskusja dotycząca użycia niektórych słów kluczowych, aby móc używać tej właściwości również w logiczny sposób.

Czy nadal używamy przesunięć fizycznych? Wyobraź sobie, że chcesz mieć plakietkę lub logo przymocowane do górnego i lewego rogu strony i niezależnie od języka, chcesz, żeby tam było. W takim przypadku nie możesz użyć przesunięć logicznych i zamiast tego będziesz musiał odwołać się do właściwości fizycznych.

Wsparcie przeglądarki

Wsparcie dla insetnieruchomości jest wciąż na wczesnym etapie. W chwili pisania tego tekstu caniuse szacuje globalne wsparcie na zaledwie 3,79%.

Pulpit

Internet Explorer	Brzeg	Firefox	Chrom	Safari	Opera
Nie	Nie	66+	Nie	Nie	Nie

mobilny

iOS Safari	Opera Mini	Przeglądarka Android	Chrome na Androida	Firefox dla systemu Android
Nie	Nie	68	Nie	Nie

Więcej informacji

• Właściwości logiczne i wartości CSS, poziom 1 (specyfikacja, wersja robocza redakcji)
• Zrozumienie właściwości i wartości logicznych (magazyn Smashing)
• Właściwości logiczne CSS (sztuczki CSS)