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 podatne na błędy podczas próby podążania za treścią wprowadzoną przez użytkownika.

W przypadku field-sizing potrzebujesz 1 wiersza kodu CSS, aby umożliwić określanie rozmiaru na podstawie treści. Ten styl dopasowywania rozmiaru do zawartości działa nie tylko w przypadku pola tekstowego.

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

Obsługa przeglądarek

• 123
• 123
• x
• x

Źródło

Szybkie linki

Specyfikacja | Opis

Krótkie filmy?

Wes Bos i Jhey publikują na Twitterze świetny film, w którym przedstawiają field-sizing.

Na które elementy ma wpływ rozmiar 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.

W miarę wpisywania tekstu przez użytkowników dane wejściowe rozrastają się w kierunku tekstu wbudowanego, aż osiągną maksymalny rozmiar w tekście. Wtedy tekst zawija się, a rozmiar bloku tekstu dopasowuje się do nowego wiersza.

<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 tym momencie wartość przepełniona 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 będzie tak szerokie, jak przycisk i tekst nazwy pliku.

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

Oto interaktywny, minimalistyczny przykład działania „przed” i „po” każdego elementu formularza, na który wpływa zasada field-sizing.

Wypróbuj to na Codepen

Przyjrzyj się bliżej

Gdy używasz obiektu [placeholder], obiekt zastępczy staje się treścią. Wspomnialiśmy o tym wcześniej, ponieważ wspomniano o tym podczas tworzenia stylu formularza. Długi lub krótki placeholder zmieni rozmiar elementów za pomocą field-sizing: content.

Wypróbuj w Codepen

Obsługa pustych i przepełnionych stylów

Korzystanie z usługi field-sizing wiąże się z wykonaniem dodatkowych czynności. 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 – 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 idealnie pasuje do rozmiarów bloków, a ch sprawdza się w przypadku rozmiarów wbudowanych.

Jaka jest domyślna wartość rozmiaru pól?

Domyślna wartość field-sizing to fixed i akceptuje tylko 2 wartości fixed i content.