Jeden wiersz kodu do automatycznego określania rozmiaru elementów z edytowalną treścią.
Aby utworzyć pole do wprowadzania danych o odpowiednim rozmiarze bez użycia tagu field-sizing, należało oszacować średni rozmiar pola tekstowego lub użyć JavaScriptu, aby zliczać znaki i zwiększać wysokość lub szerokość elementu w miarę wpisywania tekstu przez użytkownika. Innymi słowy, nie było to łatwe i wiązało się z błędami podczas próby śledzenia treści wprowadzonych przez użytkownika.
W przypadku field-sizing potrzebujesz 1 wiersza kodu CSS, aby umożliwić dostosowanie rozmiaru do treści. Ten styl określania rozmiaru oparty na treści sprawdza się również w przypadku nie tylko obszaru tekstowego.
textarea, select, input {
field-sizing: content;
}
Szybkie linki
Lubisz krótkie filmy?
Wes Bos i Jhey na Twitterze publikują świetny film przedstawiający field-sizing.
Na które elementy wpływa wielkość pól?
Oto lista elementów <form>, nad którymi pracuje field-sizing, wraz z podsumowaniem wpływu tego elementu na każdy z nich.
<textarea>
Dane wejściowe zwijają się do wartości min-inline-size lub pasują do symbolu zastępczego.
Podczas pisania dane wejściowe powiększają się w kierunku wiersza, aż osiągną maksymalny rozmiar w tekście. W tym momencie tekst się zawija, a rozmiar bloku powiększa się, aby zmieścić się w nowym wierszu.
<select> i <select multiple>
Wybrany element zmniejsza się, aby pasował do wybranej opcji.
Wybrana wartość z atrybutem multiple rośnie, aby pasować do najszerszej opcji i być równa wysokości, aby zmieścić się w liczbie opcji.
<input type="text">, <input type="email"> i <input type="number">
Dane wejściowe zwijają się do wartości min-inline-size lub pasują do symbolu zastępczego.
Gdy użytkownicy wpisują tekst, dane wejściowe powiększają się w kierunku linii wejściowej, aż osiągną wartość max-inline-size, co oznacza, że wartość wejściowa się przesuwa.
<input type="file">
Dane wejściowe zostaną zwinięte w dół do przycisku i wstępnie wypełnionej nazwy pliku.
Po przesłaniu pliku dane wejściowe będą miały szerokość przycisku i tekst nazwy pliku.
Przeglądanie, testowanie i porównywanie wyników
Oto interaktywny, zwięzły przykład działania „przed” i „po” każdego elementu formularza, na które wpływa parametr field-sizing.
Bliżej
Gdy używasz elementu [placeholder], obiekt zastępczy staje się treścią. Już wcześniej wspomnieliśmy o tym,
ale zostało to objaśnione, ponieważ ważne jest, aby wiedzieć, jaki jest styl formularza. Długa lub krótka zmienna spowoduje zmianę wewnętrznego rozmiaru danych wejściowych w polu field-sizing:
content.
Obsługa stylów pustych i przepełniających się
Korzystanie z usługi field-sizing wymaga wykonania dodatkowych czynności. Zadaniem AhmadShadeed jest defensywny CSS, w którym celem nie jest dokładne określenie, jak coś ma działać lub wyglądać, a nie chronić go przed niepożądanym stanem wizualnym. Wcześniej dane wejściowe miały sporo stałych rozmiarów, ale po zastosowaniu metody field-sizing: content dane wejściowe mogą być znacznie za małe lub za duże.
Zacznij od tych stylów. Dzięki nim elementy nie zwijają się do zbyt małej ramki, a w przypadku textarea nie zwiększą jej rozmiaru.
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;
}
Do określania rozmiaru ta usługa porównywania cen używa jednostek względnych. Nowa jednostka
lh
doskonała do rozmiarów bloków.
ch
Sprawdza się w przypadku rozmiarów wbudowanych.
Jaka jest domyślna wartość rozmiaru pola?
Wartość domyślna field-sizing to fixed. Akceptuje ona tylko 2 wartości: fixed lub content.