Określanie rozmiarów pól CSS

Jeden wiersz kodu do automatycznego dostosowywania elementów z edytowalnymi treściami.

Adam Argyle

Bez field-sizing, aby utworzyć pole tekstowe o odpowiednim rozmiarze, trzeba było zgadnąć średnią wielkość pola tekstowego lub użyć 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 występowały błędy podczas próby śledzenia treści wprowadzonych przez użytkownika.

W przypadku field-sizing wystarczy jeden wiersz kodu CSS, aby umożliwić dostosowanie rozmiaru do treści. Ten styl dopasowywania rozmiaru do zawartości działa nie tylko w przypadku pola tekstowego.

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

Szybkie linki

Specyfikacja | Informacje

Krótkie filmy?

Wes Bos i Jhey mają na Twitterze świetne filmy, które przedstawiają field-sizing.

Które elementy są zależne od rozmiaru pola?

Oto lista elementów <form>, na których działa funkcja field-sizing, wraz z podsumowaniem jej efektów w przypadku każdego z nich.

<textarea>

Dane wejściowe są zwężane do min-inline-size lub dopasowywane do obiektu zastępczego.

Gdy użytkownicy wpisują tekst, pole tekstowe powiększa się w kierunku poziomym, aż osiągnie maksymalny rozmiar. Wtedy tekst zostanie przeniesiony na nowy wiersz, a blok tego tekstu powię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 rozszerza się, aby dopasować się do najszerszej opcji, oraz jest tak wysoki, aby pomieścić liczbę opcji.

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

Dane wejściowe są zwężane do min-inline-size lub dopasowywane do obiektu zastępczego.

Gdy użytkownicy wpisują tekst, dane wejściowe zwiększają się w kierunku inline, aż osiągną wartość max-inline-size, w której momencie wartość wejściowa zostanie przycięta.

<input type="file">

Dane są wyświetlane tylko w postaci przycisku i wstępnie wypełnionego tekstu nazwy pliku.

Po przesłaniu pliku pole tekstowe będzie tak szerokie, jak przycisk i 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.

Przybliżenie

Gdy używasz [placeholder], treść zastępcza staje się treścią. Wspomniliśmy o tym wcześniej, ale teraz zwracamy na to uwagę, ponieważ jest to ważne przy stylizowaniu formularza. Długi lub krótki placeholder zmieni rozmiar elementów z wartością domyślną field-sizing: content.

Obsługa pustych i przepełnionych stylów

Korzystanie z funkcji field-sizing wymaga dodatkowej pracy. Ahmad Shaded nazywa to „ochronnym CSS”. Jego celem nie jest dokładne określenie, jak coś powinno wyglądać lub działać, ale ochrona przed niepożądanym stanem wizualnym. Wcześniej dane wejściowe miały wiele stałych rozmiarów, ale po zastosowaniu field-sizing: content mogą stać się zbyt małe lub zbyt duże.

Dobrym punktem wyjścia będą te style. Pomagają one temu, aby elementy nie były zbyt małe, a w przypadku textarea – aby nie były 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 kod CSS używa jednostek względnych do określania rozmiaru. Nowa jednostka lh jest idealna do rozmiarów bloków i chdobrze sprawdza się w przypadku rozmiarów wstawianych.

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

Domyślna wartość parametru field-sizing to fixed. Parametr ten akceptuje tylko wartości fixed lub content.