ciekawe w css #3

inset

Właściwość inset określa odległość między elementem a elementem nadrzędnym. Aby inset zadziałał, musisz określić również właściwość position. Inset pozwala skrócić zapis:

 
top: 0;
bottom: 0;
left: 0;
right: 0; 
// do 
inest: 0;

Możesz też użyć shorthand by ustawić osobne wartości dla top/right/bottom/left czyli np. inset: 50px 0 0 0; wtedy odległość od góry będzie 50px.
Inset pozwala też ustawić wartość auto co odsuwa element od krawędzi rodzica w zależności od ilości zawartości elementu.

isolation: isolate

Isolation jest częścią blending mode w css, jest bardzo przydatne kiedy używasz z-index w wartościach ujemnych. Najlepiej to widać na przykładzie gdy mamy ciemne tło i element z ::before i ::after na których chcemy ustawić z-index: -1, tak by były widoczne pod elementem ale nie uciekały pod ciemne tło. Isolation pozwala ustawić nowy stacking context dzięki czemu -1 nie wchodzi pod ciemne tło.

width: min- max- fit- content

width: min-content – dopasowuje szerokość elementu do najmniejszej możliwej szerokości, tak by najdłuższy element (np. tekstu) się zmieścił.
width: max-content – ustawia tak by zawartość definiowała szerokość, czyli na mniejszych ekranach nie będzie złamania tekstu, tylko szerokość elementu będzie taka jak cały tekst.
width: fit-content – ustawia szerokość tak by mieściła cały tekst, ale na mniejszych ekranach pozwala na złamanie tekstu

dodatkowo ciekawym użyciem może być zastosowanie min-inline-size: fit-content zamiast standardowo używanego text-wrap: nowrap w buttonach z ikoną, by uniknąć rozdzielania ikony od tekstu, ale jednak by przy mniejszych szerokościach, a przy dłuższej ilości tekstu koło ikony pozwolić, w ostatecznym momencie na złamanie, ale nie wcześniej.

aspect-ratio

pozwala ustawić odpowiednie proporcje elementu, jak np:
aspect-ratio: 1 – element jest idealnie kwadratowy, lub okrągły jeśli połączymy z border-radius: 50%
aspect-ratio: 16/9 – panoramiczny widok
aspect-ratio: 9/16 – widok shortów na wersje mobile

przy używaniu na img warto dodać object-fit: cover, by uniknąć rozciągania grafiki.

text-wrap

text-wrap: balance – jeśli tekst jest złamany na linie, stara się tak ustawić złamania by wielkość linii była zbliżona do siebie, zbalansowana, nadaje się dobrze do dłuższych nagłówków
text-wrap: pretty – kiedy tekst się łamie na linie, w ostatniej linii zostają przeniesione dwa wyrazy, nie ostatni jeden, czyli unikamy typograficznych 'sierot’ – nadaje się dobrze do dłuższych bloków tekstowych.