Określanie rozmiarów pól CSS

Jedna linia kodu do automatycznego dopasowywania rozmiaru elementów z treściami, które można edytować.

Adam Argyle

Aby utworzyć pole do wprowadzania danych o odpowiednim rozmiarze bez użycia field-sizing, trzeba było albo zgadywać średni rozmiar pola tekstowego, albo używać JavaScriptu do zliczania znaków i zwiększania wysokości lub szerokości elementu w miarę wpisywania tekstu przez użytkownika. Innymi słowy, nie było to łatwe i łatwo było popełnić błąd podczas próby śledzenia treści wprowadzonych przez użytkownika.

W przypadku field-sizing wystarczy jedna linia CSS, aby włączyć dopasowywanie rozmiaru na podstawie treści. Ten styl dopasowywania 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 mają świetny film na Twitterze, w którym przedstawiają field-sizing.

Które elementy są objęte działaniem field-sizing?

Oto lista elementów <form> , w których działa field-sizing, wraz z podsumowaniem efektów, jakie ma na każdy z nich.

<textarea>

Pole wprowadzania danych zwija się do min-inline-size lub dopasowuje się do tekstu zastępczego.

W miarę wpisywania przez użytkowników pole wprowadzania danych rośnie w kierunku inline, aż osiągnie maksymalny rozmiar inline. Wtedy tekst będzie zawijany, a rozmiar bloku pola wprowadzania danych będzie się zwiększał, aby dopasować się do nowego wiersza.

<select> i <select multiple>

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

Element select z atrybutem multiple rośnie, aby dopasować się do najszerszej opcji i mieć wysokość wystarczającą do wyświetlenia wszystkich opcji.

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

Pole wprowadzania danych zwija się do min-inline-size lub dopasowuje się do tekstu zastępczego.

W miarę wpisywania przez użytkowników pole wprowadzania danych rośnie w kierunku inline, aż osiągnie max-inline-size. Wtedy nadmiar będzie przycinany.

<input type="file">

Pole wprowadzania danych zwija się do przycisku i wstępnie wypełnionego tekstu nazwy pliku.

Po przesłaniu pliku pole wprowadzania danych staje się tak szerokie jak przycisk plus tekst nazwy pliku.

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

Oto interaktywny i minimalny przykład zachowania każdego elementu formularza przed i po zastosowaniu field-sizing.

Przyglądamy się bliżej

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

Obsługa stylu pustego i przepełnionego

Używanie field-sizing oznacza, że musisz wykonać dodatkową pracę. Ahmad Shadeed nazywa to "defensywnym CSS," w którym celem nie jest koniecznie dokładne określenie, jak coś ma się zachowywać lub wyglądać, ale raczej ochrona przed niepożądanym stanem wizualnym. Wcześniej pola wprowadzania danych miały dość dużo stałych rozmiarów, ale po zastosowaniu field-sizing: content mogą stać się zbyt małe lub zbyt duże.

Te style to dobry punkt wyjścia. Pomagają one elementom nie zwijać się do zbyt małego pola, a w przypadku textarea – nie rosnąć zbyt duże.

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 CSS używa względnych jednostek do określania rozmiaru. Nowa lh jednostka doskonale nadaje się do rozmiarów bloków, a ch dobrze sprawdza się w przypadku rozmiarów inline.

Jaka jest wartość domyślna field-sizing?

Wartością domyślną field-sizing jest fixed, a akceptuje ona tylko 2 wartości: fixed i content.