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 goede grootte te maken, raden naar de gemiddelde grootte van een tekstveldinvoer, of JavaScript gebruiken om tekens te tellen en de elementhoogte of -breedte te vergroten terwijl de gebruiker tekst invoerde. Met andere woorden, het was niet eenvoudig en foutgevoelig bij het volgen van de inhoud die een gebruiker bij invoer had ingevoerd.

Met field-sizing heeft u één regel CSS nodig om de grootte op basis van de inhoud mogelijk te maken. Deze op inhoud gebaseerde formaatstijl werkt ook voor meer dan alleen een tekstgebied!

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

Browserondersteuning

• 123
• 123
• X
• X

Bron

Snelle koppelingen

Specificatie | Uitlegger

Vind je korte video's leuk?

Wes Bos en Jhey hebben elk een geweldige video op Twitter waarin ze je laten kennismaken met field-sizing .

Welke elementen worden beïnvloed door veldgrootte?

Hier is een lijst met <form> -elementen waarop field-sizing werkt, met een samenvatting van de effecten die het op elk element heeft.

<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 welk punt de tekst doorloopt en de blokgrootte van de invoer groeit om op de nieuwe regel te passen.

<select> en <select multiple>

Het select-element wordt kleiner zodat het bij de geselecteerde optie past.

Een select met het multiple attribuut groeit zodat hij in de breedste optie past en wordt zo groot als nodig is om in het aantal opties te passen.

<input type="text"> , <input type="email"> en <input type <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, waarna overflow de invoerwaarde afsnijdt.

<input type="file">

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

Bij het uploaden van een bestand wordt de invoer 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 voor en na van elk formulierelement, zoals beïnvloed door field-sizing .

Probeer het eens op Codepen

Dichterbij kijken

Wanneer u een [placeholder] gebruikt, wordt de placeholder de inhoud. Dit werd eerder vermeld, maar wordt hier genoemd, omdat het belangrijk is om te weten bij het opmaken van een formulier. Een lange of korte tijdelijke aanduiding verandert de intrinsieke grootte van invoer met field-sizing: content .

Probeer het eens op Codepen

Hantering van lege en overvolle stijl

Het gebruik van field-sizing betekent wel dat je wat extra werk moet doen. Ahmad Shadeed noemt het ' defensieve CSS ', waarbij het doel niet noodzakelijkerwijs is om precies uit te leggen hoe iets zich zou moeten gedragen of eruit zou moeten zien, maar eerder om te voorkomen dat het in een ongewenste visuele staat terechtkomt. Voorheen hadden de invoer een behoorlijk aantal vaste afmetingen, maar na het toepassen van field-sizing: content kunnen de invoer veel te klein of veel te groot worden.

De volgende stijlen zijn een goed startpunt. Ze zorgen ervoor dat de elementen niet in een te kleine doos samenvallen 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 grootte. De nieuwe lh unit is perfect voor de blokformaten en ch werkt goed voor de inline-formaten.

Wat is de standaardwaarde van veldgrootte?

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