Określanie rozmiarów pól CSS

1 linijka kodu do automatycznego określania rozmiaru elementów z treścią edytowalną.

Adam Argyle

Bez field-sizing, aby utworzyć pole do wprowadzania danych o odpowiednim rozmiarze, trzeba było zgadywać średni rozmiar pola tekstowego lub używać JavaScriptu do liczenia znaków i zwiększania wysokości lub szerokości elementu, gdy użytkownik wpisywał tekst. Innymi słowy, nie było to łatwe i było podatne na błędy podczas próby śledzenia treści wprowadzonych przez użytkownika.

W field-sizing wystarczy jedna linijka kodu CSS, aby włączyć określanie rozmiaru na podstawie treści. Ten styl określania rozmiaru na podstawie treści działa też w przypadku innych elementów niż textarea.

textarea, select, input {
  field-sizing: content;
}

Szybkie linki

Specyfikacja | Wyjaśnienie

Lubisz krótkie filmy?

Wes Bos i Jhey opublikowali na Twitterze świetne filmy, w których przedstawiają field-sizing.

Na które elementy wpływa właściwość field-sizing?

Oto lista elementów <form>, na które działa field-sizing, wraz z podsumowaniem efektów, jakie wywołuje w każdym z nich.

<textarea>

Pole wejściowe zwija się do min-inline-size lub dopasowuje się do obiektu zastępczego.

Gdy użytkownicy wpisują tekst, pole wejściowe powiększa się w kierunku wbudowanym, aż osiągnie maksymalny rozmiar wbudowany. W tym momencie tekst zostanie zawinięty, a rozmiar bloku pola wejściowego zwiększy się, aby zmieścić nowy wiersz.

<select> i <select multiple>

Element wyboru zmniejsza się, aby dopasować się do wybranej opcji.

Element select z atrybutem multiple powiększa się, aby dopasować się do najszerszej opcji i mieć wysokość odpowiednią do liczby opcji.

<input type="text">, <input type="email"> i <input type="number">

Pole wejściowe zwija się do min-inline-size lub dopasowuje się do obiektu zastępczego.

Gdy użytkownicy piszą, pole wprowadzania danych powiększa się w kierunku wiersza, aż osiągnie max-inline-size, po czym wartość wejściowa jest przycinana.

<input type="file">

Pole wejściowe zwija się do przycisku i wstępnie wypełnionego tekstu nazwy pliku.

Po przesłaniu pliku pole wejściowe staje się tak szerokie jak przycisk i tekst nazwy pliku.

Wyświetlanie, testowanie i porównywanie wyników

Oto interaktywny i prosty przykład zachowania poszczególnych elementów formularza przed i po zastosowaniu field-sizing.

Przyglądam się uważniej

Gdy używasz [placeholder], obiekt zastępczy staje się treścią. Wspomnieliśmy o tym wcześniej, ale warto to podkreślić, ponieważ jest to ważne podczas stylizowania formularza. Długi lub krótki obiekt zastępczy zmieni wewnętrzny rozmiar danych wejściowych za pomocą field-sizing: content.

Obsługa pustych i przepełnionych stylów

Korzystanie z field-sizing wymaga wykonania dodatkowych czynności. Ahmad Shadeed nazywa to „defensywnym CSS”, gdzie celem niekoniecznie jest dokładne określenie, jak coś powinno się zachowywać lub wyglądać, ale raczej ochrona przed niepożądanym stanem wizualnym. Wcześniej pola wejściowe miały sporo stałych rozmiarów, ale po zastosowaniu field-sizing: content mogą stać się zbyt małe lub zbyt duże.

Poniższe style są dobrym punktem wyjścia. Dzięki temu elementy nie zapadają się w zbyt małe pole, a w przypadku textarea nie powiększają się za bardzo.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

Ten kod CSS używa jednostek względnych do określania rozmiaru. Nowa jednostka lh idealnie nadaje się do rozmiarów bloków, a ch dobrze sprawdza się w przypadku rozmiarów inline.

Jaka jest domyślna wartość właściwości field-sizing?

Domyślna wartość parametru field-sizing to fixed. Może on przyjmować tylko 2 wartości: fixed lub content.