Określanie rozmiarów pól CSS

Jeden wiersz kodu do automatycznego dopasowywania rozmiaru elementów z edytowalną treścią.

Adam Argyle

Bez field-sizing, aby utworzyć pole wejściowe o odpowiednim rozmiarze, trzeba było albo zgadywać średni rozmiar pola tekstowego, albo użyć JavaScriptu do zliczania znaków i zwiększania wysokości lub szerokości elementu w miarę wpisywania tekstu przez użytkownika. Inaczej mówiąc, nie było to łatwe i często prowadziło do błędów podczas próby śledzenia treści wpisanych przez użytkownika.

W przypadku field-sizing wystarczy jeden wiersz kodu CSS, aby włączyć określanie rozmiaru na podstawie treści. Ten styl określania rozmiaru na podstawie treści działa nie tylko w przypadku elementów textarea.

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

Browser Support

• 123
• 123
• x
• 26.2

Source

Szybkie linki

Specyfikacja | Wyjaśnienie

Lubisz krótkie filmy?

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

Które elementy są objęte zmianą rozmiaru pola?

Oto lista elementów <form>, na których działa field-sizing, wraz z podsumowaniem efektów, jakie wywiera na poszczególne elementy.

<textarea>

Wpisane dane zostaną skrócone do symbolu min-inline-size lub dopasowane do obiektu zastępczego.

W miarę wpisywania tekstu pole będzie się powiększać w kierunku wiersza, aż osiągnie maksymalny rozmiar w tym kierunku. 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 zmniejszy się, aby dopasować się do wybranej opcji.

Element select z atrybutem multiple rozszerza się, 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">

Wpisane dane zostaną skrócone do symbolu min-inline-size lub dopasowane do obiektu zastępczego.

W miarę wpisywania tekstu pole rośnie w kierunku wiersza, aż osiągnie wartość max-inline-size. W tym momencie nadmiar tekstu jest obcinany.

<input type="file">

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

Po przesłaniu pliku pole wprowadzania rozszerza się do szerokości przycisku plus tekst nazwy pliku.

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

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

Wypróbuj w Codepen

Przyjrzyjmy się bliżej

Gdy używasz [placeholder], symbol zastępczy staje się treścią. Zostało to już wspomniane, ale warto to podkreślić, ponieważ jest to ważne przy tworzeniu stylu formularza. Długi lub krótki tekst zastępczy zmieni wewnętrzny rozmiar pól wejściowych z atrybutem field-sizing: content.

Wypróbuj w Codepen

Obsługa pustych i przepełnionych stylów

Korzystanie z field-sizing wymaga dodatkowej pracy. Ahmad Shadeed nazywa to „defensywnym CSS-em”, w którym celem nie jest koniecznie dokładne określenie, jak coś powinno się zachowywać lub wyglądać, ale raczej 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 mogą stać się zbyt małe lub zbyt duże.

Poniższe style to dobry punkt wyjścia. Zapobiegają one zwijaniu się elementów do zbyt małego pola, a w przypadku elementu textarea – zbyt dużemu powiększaniu.

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;
}

Ta usługa porównywania cen używa względnych jednostek do określania rozmiaru. Nowa jednostka lh doskonale sprawdza się w przypadku rozmiarów bloków, a ch w przypadku rozmiarów wbudowanych.

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

Wartość domyślna parametru field-sizing to fixed. Akceptuje on tylko 2 wartości: fixed i content.