Dimensionamento de campos do CSS

Uma linha de código para redimensionar automaticamente elementos com conteúdo editável.

Adam Argyle

Sem field-sizing, para criar um campo de entrada de tamanho adequado, era necessário adivinhar um tamanho médio de um campo de entrada de texto ou usar JavaScript para contar caracteres e aumentar a altura ou largura do elemento à medida que o usuário inseria texto. Em outras palavras, não era fácil e era propenso a erros ao tentar seguir o conteúdo que um usuário havia inserido em uma entrada.

Com field-sizing, você precisa de uma linha de CSS para ativar o dimensionamento com base no conteúdo. Esse estilo de dimensionamento baseado em conteúdo também funciona para mais de uma textarea.

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

Browser Support

• 123
• 123
• x
• 26.2

Source

Links rápidos

Especificação | Explicação

Gosta de vídeos mais curtos?

Wes Bos e Jhey têm um vídeo incrível no Twitter apresentando o field-sizing.

Quais elementos são afetados pelo dimensionamento de campo?

Confira uma lista de elementos <form> em que o field-sizing funciona, com um resumo dos efeitos em cada um deles.

<textarea>

A entrada é reduzida a um min-inline-size ou para se ajustar ao marcador de posição.

À medida que os usuários digitam, a entrada cresce na direção inline até atingir um tamanho inline máximo. Nesse ponto, o texto é quebrado e o tamanho do bloco da entrada aumenta para se ajustar à nova linha.

<select> e <select multiple>

O elemento "select" é reduzido para se ajustar à opção selecionada.

Uma seleção com o atributo multiple aumenta para se ajustar à opção mais larga e ter a altura necessária para acomodar o número de opções.

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

A entrada é reduzida a um min-inline-size ou para se ajustar ao marcador de posição.

À medida que os usuários digitam, a entrada cresce na direção inline até atingir um max-inline-size, momento em que o estouro corta o valor da entrada.

<input type="file">

A entrada é reduzida ao botão e ao texto do nome de arquivo pré-preenchido.

Ao fazer upload de um arquivo, a entrada fica tão larga quanto o botão mais o texto do nome do arquivo.

Como ver, testar e comparar resultados

Confira um exemplo interativo e mínimo dos comportamentos antes e depois de cada elemento de formulário, afetado por field-sizing.

Testar no Codepen

Analisando mais de perto

Ao usar um [placeholder], o marcador de posição se torna o conteúdo. Isso foi mencionado anteriormente, mas é importante saber ao estilizar um formulário. Um marcador de posição longo ou curto vai mudar o tamanho intrínseco das entradas com field-sizing: content.

Testar no Codepen

Tratamento de estilos vazios e transbordantes

Usar field-sizing significa que você precisa fazer um trabalho extra. Ahmad Shadeed chama isso de "CSS defensivo", em que o objetivo não é necessariamente explicar exatamente como algo deve se comportar ou parecer, mas protegê-lo de entrar em um estado visual indesejável. Antes, as entradas tinham uma quantidade razoável de tamanhos fixos, mas, depois de aplicar field-sizing: content, elas podem ficar muito pequenas ou muito grandes.

Os estilos a seguir são um bom ponto de partida. Elas ajudam os elementos a não entrar em colapso em uma caixa muito pequena e também, no caso de textarea, a não crescer demais.

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

Esse CSS usa unidades relativas para o dimensionamento. A nova unidade lh é perfeita para os tamanhos de bloco e ch funciona bem para os tamanhos inline.

Qual é o valor padrão do dimensionamento de campo?

O valor padrão de field-sizing é fixed, e ele aceita apenas os dois valores de fixed ou content.