Css-veldformaat

Eén regel code voor elementen met bewerkbare content die automatisch worden aangepast.

Adam Argyle

Zonder field-sizing moest je om een invoerveld van de juiste grootte te maken, gokken naar de gemiddelde grootte van een tekstveldinvoer of JavaScript gebruiken om tekens te tellen en de hoogte of breedte van het element te vergroten terwijl de gebruiker tekst invoerde. Met andere woorden, het was niet makkelijk en het was foutgevoelig om de content te volgen die een gebruiker in een invoer had ingevoerd.

Met field-sizing heb je maar één regel CSS nodig om de grootte aan te passen op basis van de content. Deze op content gebaseerde stijl voor grootte werkt ook voor meer dan alleen een tekstgebied.

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

Snelle links

Specificatie | Uitleg

Vind je korte video's leuk?

Wes Bos en Jhey hebben allebei een geweldige video op Twitter waarin ze field-sizing introduceren.

Voor welke elementen geldt field-sizing?

Hier is een lijst met <form>-elementen waar field-sizing aan werkt, met een samenvatting van de effecten op elk element.

<textarea>

De invoer wordt samengevouwen tot een min-inline-size of zodat deze in de tijdelijke aanduiding past.

Terwijl gebruikers typen, groeit de invoer in de inline richting totdat deze een maximale inline grootte bereikt. Op dat moment wordt de tekst afgebroken en groeit de blokgrootte van de invoer zodat deze op de nieuwe regel past.

<select> en <select multiple>

Het selectie-element wordt verkleind zodat het past bij de geselecteerde optie.

Een selectie met het kenmerk multiple wordt groter om de breedste optie te passen en wordt zo hoog als nodig is om het aantal opties te passen.

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

De invoer wordt samengevouwen tot een min-inline-size of zodat deze in de tijdelijke aanduiding past.

Terwijl gebruikers typen, groeit de invoer in de inline richting totdat deze een max-inline-size bereikt. Op dat moment wordt de invoerwaarde afgekapt.

<input type="file">

De invoer wordt samengevouwen tot de knop en de vooraf ingevulde tekst van de bestandsnaam.

Als je een bestand uploadt, wordt de invoer net zo breed als de knop plus de tekst van de bestandsnaam.

Resultaten bekijken, testen en vergelijken

Hier is een interactief en minimaal voorbeeld van het gedrag van elk formulierelement vóór en na de wijziging, zoals beïnvloed door field-sizing.

Onder de loep nemen

Als je een [placeholder] gebruikt, wordt de tijdelijke aanduiding de content. Dit is eerder genoemd, maar wordt hier nog eens benadrukt omdat het belangrijk is om te weten wanneer je een formulier opmaakt. Een lange of korte tijdelijke aanduiding wijzigt de intrinsieke grootte van invoer met field-sizing: content.

Stijlverwerking voor lege en overlopende elementen

Als u field-sizing gebruikt, moet u wel wat extra werk doen. Ahmad Shadeed noemt het 'defensieve CSS'. Het doel is niet per se om precies te beschrijven hoe iets zich moet gedragen of eruit moet zien, maar om te voorkomen dat het in een ongewenste visuele staat terechtkomt. Eerder hadden invoervelden een redelijk aantal vaste formaten, maar na toepassing van field-sizing: content kunnen de invoervelden veel te klein of veel te groot worden.

De volgende stijlen zijn een goed startpunt. Ze zorgen dat de elementen niet samenvouwen in een te klein vak en, in het geval van textarea, 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 grootte. De nieuwe eenheid lh is perfect voor de blokgrootten en ch werkt goed voor de inline grootten.

Wat is de standaardwaarde van field-sizing?

De standaardwaarde van field-sizing is fixed. Deze accepteert alleen de 2 waarden fixed of content.