Projektowanie intrynsyczne: rozmiar zależny od treści

Projektowanie oparte na treści, którego nazwę ukuła Jen Simmons, polega na tym, że to treść określa własny rozmiar, zamiast narzucania jej wymiarów w pikselach. CSS udostępnia słowa kluczowe rozmiarowania zależnego od treści, które pozwalają tworzyć naturalnie responsywne układy bez modyfikacji zależnych od breakpointów.

min-content: najmniejszy rozmiar, w którym treść mieści się bez przepełnienia (w przypadku tekstu zawijanie następuje w każdym miejscu między słowami). max-content: rozmiar potrzebny do wyświetlenia treści w jednym wierszu bez zawijania. Obie wartości odzwierciedlają rzeczywiste wymiary treści.

fit-content jest równoważne wyrażeniu min(max-content, max(min-content, available)). Rozmiar zwiększa się wraz z treścią aż do osiągnięcia dostępnej przestrzeni, a następnie treść jest zawijana. To idealne rozwiązanie dla przycisków i etykiet, które powinny być tak szerokie jak ich tekst, ale nie szersze niż kontener.

minmax(min, max) w grid-template-columns określa minimalny i maksymalny rozmiar ścieżki. minmax(200px, 1fr) tworzy kolumnę o szerokości co najmniej 200px, która może się powiększać. W połączeniu z auto-fill pozwala to tworzyć responsywne siatki, których rozmiar wynika z treści.

Obie wartości wypełniają wiersz tak wieloma ścieżkami, jak to możliwe. auto-fill zachowuje puste ścieżki (utrzymując liczbę kolumn). auto-fit zwija puste ścieżki, dzięki czemu wypełnione ścieżki rozszerzają się, aby zająć dostępną przestrzeń. Proszę używać auto-fit w układach zależnych od treści, które powinny rozszerzać się na całą dostępną szerokość.

clamp(min, preferred, max) ogranicza wartość do określonego zakresu. font-size: clamp(1rem, 2.5vw, 1.5rem) skaluje rozmiar od 1rem do 1.5rem zależnie od szerokości obszaru widoku — zapewniając płynną typografię bez zapytań media.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) tworzy responsywną siatkę, która przy bardzo wąskim obszarze widoku ma jedną kolumnę i automatycznie dodaje kolejne, gdy pozwala na to dostępna przestrzeń. Bez zapytań media i bez JavaScriptu.

aspect-ratio: 16/9 sprawia, że element zachowuje proporcje podczas zmiany szerokości. W połączeniu z width: 100% kontener wideo wypełnia element nadrzędny i zawsze zachowuje proporcje 16:9 — bez JavaScriptu i bez opartych na wartościach procentowych sztuczek z dopełnieniem.

Projektowanie oparte na treści dobrze współgra z logicznymi właściwościami CSS (inline-size, block-size, margin-inline), umożliwiając tworzenie układów działających zarówno w poziomym, jak i pionowym trybie pisania. Rozmiarowanie zależne od treści automatycznie dostosowuje się do kierunku pisania.

Stały: width: 300px — zawsze 300px, niezależnie od treści. Zależny od treści: width: fit-content — tak szeroki jak treść, z uwzględnieniem ograniczeń. Układy stałe wymagają breakpointów, aby się dostosować, natomiast układy zależne od treści dopasowują się samodzielnie na podstawie treści i kontekstu.

Projektowanie oparte na treści jest najbardziej przydatne, gdy rozmiar treści naturalnie się zmienia. Wymuszanie rozmiarowania zależnego od treści tam, gdzie treść jest znana i jednolita, zwiększa złożoność bez żadnych korzyści. Proszę używać jawnych rozmiarów dla stałych elementów interfejsu (nawigacji, paska narzędzi), a rozmiarowania zależnego od treści dla obszarów z treścią.

Co robi auto-fit inaczej niż auto-fill w grid-template-columns?

Projektowanie oparte na treści wykorzystuje słowa kluczowe rozmiarowania CSS (min-content, max-content, fit-content), minmax() z auto-fit, clamp() do płynnego skalowania oraz aspect-ratio do tworzenia układów, których rozmiar wynika z wymiarów treści, a nie z breakpointów obszaru widoku. Rezultatem są naturalnie responsywne układy z mniejszą ilością CSS i mniejszą liczbą zapytań media.