Wzorzec 24
Pole, które rośnie z treścią
Sztywna textarea chowa dłuższą wypowiedź za scrollem trzech linii, a skrypt przepisujący scrollHeight do stylu to mierzenie layoutu w JavaScript, czyli antywzorzec. field-sizing: content oddaje wysokość pola treści, którą użytkownik właśnie wpisuje, a granice wzrostu wyznacza CSS, nie licznik znaków.
Textarea, która nadąża za wypowiedzią
Wpisz w oba pola kilka linii tekstu. Lewe ma sztywne trzy wiersze i chowa resztę za scrollem. Prawe rośnie razem z treścią dzięki field-sizing: content, a po ośmiu liniach zatrzymuje się na max-block-size i oddaje przewijanie.
✕ Sztywne rows=3
✓ field-sizing: content
Granice wzrostu wyrażają jednostki lh, więc skalują się razem z typografią. W przeglądarce bez wsparcia prawe pole zachowuje się jak lewe i formularz działa bez zmian.
Reguły
- Wysokość pola zadaje field-sizing: content, nie skrypt przepisujący scrollHeight do style.height.
- min-block-size rezerwuje wysokość startową, max-block-size zatrzymuje wzrost i oddaje przewijanie.
- Elementy pod polem przesuwają się tylko o wzrost pola, przyciski formularza nigdy nie wypadają poza max-block-size.
- Brak wsparcia degraduje do zwykłej textarea ze scrollem, formularz działa identycznie.
Wzorzec w kodzie
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 8lh;
}textarea.addEventListener("input", () => {
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
});Prompt dla Claude
Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.
Zaimplementuj w moim projekcie wzorzec „Pole, które rośnie z treścią" z metodologii Liquid Design. field-sizing: content pozwala textarea rosnąć razem z tekstem, a min-block-size i max-block-size trzymają granice, bez skryptu mierzącego wysokość. Wymagania: - Wysokość pola zadaje field-sizing: content, nie skrypt przepisujący scrollHeight do style.height. - min-block-size rezerwuje wysokość startową, max-block-size zatrzymuje wzrost i oddaje przewijanie. - Elementy pod polem przesuwają się tylko o wzrost pola, przyciski formularza nigdy nie wypadają poza max-block-size. - Brak wsparcia degraduje do zwykłej textarea ze scrollem, formularz działa identycznie. Ogólne reguły Liquid Design, których implementacja nie może złamać: - HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści. - Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze. - Stany ładowania, pustki, błędu i treści dzielą jeden layout. - Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów. - Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu. - Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)). Sposób pracy — zanim napiszesz pierwszą linię kodu: - Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności. - Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie. - Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack. - Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system. - Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie. Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/rosnace-pola