CSS-veldgrootte

Eén regel code voor het automatisch aanpassen van de grootte van elementen met bewerkbare inhoud.

Adam Argyle

Zonder field-sizing , moest je, om een ​​invoerveld van de juiste grootte te maken, ofwel een gemiddelde tekstgrootte gokken, ofwel JavaScript gebruiken om tekens te tellen en de hoogte of breedte van het element aan te passen naarmate de gebruiker tekst invoerde. Met andere woorden, het was niet eenvoudig en het was foutgevoelig om de inhoud die een gebruiker in het invoerveld had ingevoerd, te volgen.

Met field-sizing heb je maar één regel CSS nodig om de grootte aan te passen aan de inhoud. Deze op inhoud gebaseerde stijl werkt bovendien voor meer dan alleen een textarea!

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

Browser Support

• 123
• 123
• x
• 26.2

Source

Snelle links

Specificatie | Toelichting

Houd je van korte video's?

Wes Bos en Jhey hebben allebei een geweldige video op Twitter waarin ze je kennis laten maken met field-sizing .

Welke elementen worden beïnvloed door veldgrootte?

Hieronder vindt u een lijst met <form> -elementen waarop field-sizing van toepassing is, met een samenvatting van de effecten op elk element.

<textarea>

De invoer wordt verkleind tot een min-inline-size of past in de placeholder.

Naarmate gebruikers typen, groeit het invoerveld in de lengterichting totdat een maximale lengte is bereikt. Op dat moment zal de tekst afbreken en de blokgrootte van het invoerveld zich aanpassen aan de nieuwe regel.

<select> en <select multiple>

Het selectie-element krimpt om de geselecteerde optie te passen.

Een selectieveld met het attribuut multiple groeit mee met de breedste optie en wordt zo hoog als nodig is om het aantal opties weer te geven.

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

De invoer wordt verkleind tot een min-inline-size of past in de placeholder.

Naarmate gebruikers typen, groeit het invoerveld in de horizontale richting totdat een max-inline-size is bereikt. Op dat moment wordt de invoerwaarde afgekapt vanwege overloop.

<input type="file">

Het invoerveld wordt samengevouwen tot de knop en de vooraf ingevulde bestandsnaam.

Bij het uploaden van een bestand wordt het invoerveld zo breed als de knop plus de tekst van de bestandsnaam.

Resultaten bekijken, testen en vergelijken

Hier is een interactief en minimalistisch voorbeeld van het gedrag van elk formulierelement vóór en na het aanpassen van field-sizing .

Probeer het op Codepen.

Nader bekeken

Bij gebruik van een [placeholder] wordt de placeholder de inhoud. Dit is al eerder vermeld, maar wordt hier nogmaals benadrukt, omdat het belangrijk is om te weten bij het stylen van een formulier. Een lange of korte placeholder verandert de intrinsieke grootte van de invoervelden met field-sizing: content .

Probeer het op Codepen.

Afhandeling van lege en overlopende stijlen

Het gebruik van field-sizing brengt wel wat extra werk met zich mee. Ahmad Shadeed noemt dit " defensieve CSS ", waarbij het doel niet per se is om precies te definiëren hoe iets zich moet gedragen of eruit moet zien, maar eerder om te voorkomen dat het in een ongewenste visuele staat terechtkomt. Voorheen hadden inputs vaak vaste afmetingen, maar na het toepassen van field-sizing: content kunnen de inputs veel te klein of veel te groot worden.

De volgende stijlen zijn een goed uitgangspunt. Ze zorgen ervoor dat de elementen niet in een te klein kader passen en, in het geval van textarea , ook niet te groot worden.

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

Deze CSS gebruikt relatieve eenheden voor de groottebepaling. De nieuwe eenheid lh is perfect voor blokgroottes en ch werkt goed voor inline-groottes.

Wat is de standaardwaarde voor veldgrootte?

De standaardwaarde voor field-sizing is fixed , en het accepteert alleen de twee waarden fixed of content .