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 de gemiddelde grootte van een tekstveld schatten, ofwel JavaScript gebruiken om tekens te tellen en de hoogte of breedte van het element te vergroten naarmate de gebruiker tekst invoerde. Met andere woorden, het was niet eenvoudig en het was foutgevoelig bij het volgen van de inhoud die een gebruiker in een invoerveld had ingevoerd.

Met field-sizing heb je één regel CSS nodig om formaataanpassing op basis van de inhoud mogelijk te maken. Deze op inhoud gebaseerde formaataanpassing werkt ook voor meer dan alleen een tekstvak!

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

Snelle links

Specificatie | Uitleg

Houdt u van korte video's?

Wes Bos en Jhey hebben allebei een geweldige video op Twitter waarin ze je laten zien hoe je field-sizing bepalen.

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 die dit op elk element heeft.

<textarea>

De invoer wordt verkleind tot een min-inline-size of aangepast aan de tijdelijke aanduiding.

Terwijl gebruikers typen, wordt de invoer in de inline-richting groter totdat de maximale inline-grootte is bereikt. Vanaf dat moment wordt de tekst afgebroken en wordt de blokgrootte van de invoer vergroot, zodat deze op de nieuwe regel past.

<select> en <select multiple>

Het geselecteerde element wordt kleiner gemaakt, zodat het past bij de geselecteerde optie.

Een select met het kenmerk multiple groeit mee met de breedste optie en wordt zo hoog als nodig is om het aantal opties te laten passen.

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

De invoer wordt verkleind tot een min-inline-size of aangepast aan de tijdelijke aanduiding.

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

<input type="file">

De invoer wordt teruggebracht tot de knop en de vooraf ingevulde bestandsnaamtekst.

Zodra u een bestand uploadt, wordt de invoer zo breed als de knop plus de tekst van de bestandsnaam.

Resultaten bekijken, testen en vergelijken

Hier ziet u een interactief en minimaal voorbeeld van het voor- en na-gedrag van elk formulierelement, zoals beïnvloed door field-sizing .

Een nadere blik

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

Lege en overvolle stijlbehandeling

Het gebruik van field-sizing betekent wel dat je wat extra werk moet doen. Ahmad Shadeed noemt dit " defensieve CSS ", waarbij het doel niet per se is om precies te beschrijven hoe iets zich moet gedragen of eruit moet zien, maar eerder om te voorkomen dat het in een ongewenste visuele toestand terechtkomt. Voorheen hadden invoervelden een behoorlijk aantal vaste formaten, maar na het toepassen van field-sizing: content kunnen de invoervelden veel te klein of veel te groot worden.

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

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 lh eenheid is perfect voor de blokgroottes en ch werkt goed voor de inline-groottes.

Wat is de standaardwaarde voor veldgrootte?

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