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 zgadywać średni rozmiar 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;
}

Browser Support

• 123
• 123
• x
• x

Source

Szybkie linki

Specyfikacja | Opis

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 wpływu na każdy 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 zmieś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 tym momencie wartość przepełniania powoduje odcięcie wartości danych wejściowych.

<input type="file">

Dane są wyświetlane tylko w przycisku i wstępnie wypełnionym tekście nazwy pliku.

Po przesłaniu pliku pole tekstowe staje się 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.

Wypróbuj to na Codepen

Przyjrzyj się bliżej

Gdy używasz zmiennej [placeholder], zmienna staje się treścią. Wspomniliśmy o tym wcześniej, ale teraz zwracamy na to uwagę, ponieważ jest to ważne przy nadawaniu stylów formularzom. Długi lub krótki placeholder zmieni rozmiar elementów za pomocą field-sizing: content.

Wypróbuj to na Codepen

Obsługa pustych i przepełnionych stylów

Korzystanie z funkcji field-sizing wymaga dodatkowych działań. 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 dość dużo stałych rozmiarów, ale po zastosowaniu field-sizing: content dane wejściowe 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.