Matricule-se
Voltar para o blog
Full Stack

field-sizing – como usar a nova propriedade do CSS

Pedro Surreaux

Baixe o .html e o .css e entenda o que é field-sizing, a nova propriedade do CSS que simplifica a criação de formulários e dispensa JavaScript.

Introdução – field-sizing

O field-sizing é uma nova propriedade do CSS que faz com que o tamanho de elementos como inputs e textareas seja automaticamente ajustado com base no conteúdo inserido.

Neste post você vai entender tudo sobre ela: vamos te explicar como ela funciona e como aplicá-la em seus projetos, substituindo linhas complexas de JavaScript.

Tudo isso com um passo a passo com exemplos práticos, tabelas e dicas para garantir a compatibilidade com os seus projetos.

Segue lendo pra aprender!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é a propriedade field-sizing: content?

A propriedade field-sizing é uma adição recente ao CSS que controla o dimensionamento de elementos de formulário, como <input>, <select> e <textarea>.

Diferente do padrão fixed, que mantém um tamanho estático, o valor content ajusta dinamicamente a largura e altura com base no conteúdo inserido ou no placeholder.

  • Benefícios de usar field-sizing: content:
  • Reduz a necessidade de scripts JavaScript para redimensionamento.
  • Melhora a experiência do usuário ao evitar barras de rolagem desnecessárias.
  • Simplifica o design de formulários responsivos.
Captura de tela de um formulário com um ajustado dinamicamente pelo field-sizing: content.
Aplicação da propriedade field-sizing: content

Como funciona o field-sizing: content?

Quando você aplica field-sizing: content, o elemento se adapta ao tamanho do texto inserido. Por exemplo, um <input> com pouco texto será menor, mas crescerá à medida que o usuário digita mais. Isso também se aplica a <textarea>, que pode aumentar em altura para exibir todo o conteúdo sem rolagem.

Exemplo prático:

CSS
.ctrl:fs {
  field-sizing: content;
}

Se o usuário digitar "Diego", o input será pequeno. Ao digitar "Presidente da Empresa", ele se expande automaticamente.

Mas e field-sizing: fixed? Veja a diferença:

PropriedadeComportamento
field-sizing: fixedTamanho estático, com rolagem se o conteúdo exceder.
field-sizing: contentAjusta largura/altura conforme o conteúdo.
Comparação visual entre um <input> com field-sizing: fixed e outro com field-sizing: content, mostrando a diferença no comportamento.

Como controlar o tamanho com max-width e min-width?

Para evitar que os elementos cresçam ou encolham demais, você pode combinar field-sizing: content com propriedades como max-width, min-width, max-height e min-height. Isso define limites para o dimensionamento dinâmico.

Passos para aplicar:

  1. Defina field-sizing: content no elemento desejado.
  2. Adicione min-width para garantir um tamanho mínimo, mesmo sem conteúdo.
  3. Use max-width para limitar o crescimento do elemento.
  4. Para <textarea>, aplique min-height e max-height para controlar a altura.

Exemplo de código:

CSS
input#name {
  field-sizing: content;
  min-width: 150px;
  max-width: 500px;
}

textarea#description {
  field-sizing: content;
  min-height: 150px;
  max-height: 300px;
}

Nesse caso, o <input> começa com 150px e cresce até 500px, enquanto o <textarea> ajusta a altura entre 150px e 300px.

Ícone Full StackFull Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agoraSeta para a direita
Fundo Full StackTelas Full Stack
Luz Full Stack

Como verificar a compatibilidade com navegadores?

Antes de usar field-sizing: content em produção, verifique a compatibilidade nos navegadores.

A ferramenta Can I Use indica que essa propriedade tem suporte parcial (cerca de 68% dos navegadores no momento). Mas, por ser uma "melhoria incremental", se o navegador não suportar, o elemento usará o comportamento padrão (fixed), sem quebrar o site.

Dicas para compatibilidade:

  • Consulte o Can I Use e pesquise por field-sizing.
  • Use com precaução em projetos de produção, testando em navegadores principais.
  • Considere um fallback com field-sizing: fixed para navegadores não compatíveis.
Captura do site can I use com verificação da propredade file-sizing:content

Como aplicar field-sizing em projetos reais?

A propriedade field-sizing: content é ideal para formulários onde a experiência do usuário é prioridade, como cadastros, campos de descrição ou seletores dinâmicos.

Para implementá-la com segurança:

  • Teste em diferentes dispositivos: Verifique o comportamento em desktops e dispositivos móveis.
  • Defina limites claros: Sempre use max-width e min-width para evitar tamanhos desproporcionais.
  • Combine com outras propriedades CSS: Use width: 100% ou max-width: 100% para responsividade.
  • Monitore atualizações: A compatibilidade pode melhorar com o tempo, então acompanhe o Can I Use.

Conclusão

A propriedade field-sizing: content é uma solução prática para criar formulários mais dinâmicos e amigáveis, eliminando a necessidade de JavaScript para redimensionamento.

Com ajustes simples, como max-width e min-width, você pode garantir um design funcional e visualmente agradável. Antes de usar em produção, verifique a compatibilidade e teste exaustivamente para oferecer a melhor experiência ao usuário.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

FAQ: Nova propriedade field-sizing

1. O que a propriedade field-sizing: content faz em formulários?

A propriedade field-sizing: content ajusta automaticamente o tamanho de elementos como <input>, <select> e <textarea> com base no conteúdo digitado ou no placeholder. Diferente do padrão fixed, que mantém um tamanho estático com rolagem, ela expande ou reduz a largura e altura para melhorar a usabilidade.

2. Por que usar field-sizing: content em vez de JavaScript?

Antes, ajustar o tamanho de formulários dinamicamente exigia scripts JavaScript complexos. Com field-sizing: content, o CSS faz isso nativamente, reduzindo o código necessário, simplificando o desenvolvimento e melhorando a performance do site.

3. Como garantir que os elementos não fiquem desproporcionais?

Use min-width, max-width, min-height e max-height junto com field-sizing: content. Por exemplo, min-width: 150px define um tamanho mínimo, enquanto max-width: 500px limita o crescimento, mantendo o layout visualmente equilibrado.

4. A propriedade field-sizing: content é compatível com todos os navegadores?

Atualmente, ela tem suporte parcial (cerca de 68% dos navegadores, segundo o Can I Use). Em navegadores sem suporte, o elemento usa o comportamento padrão fixed, sem prejudicar o site. Sempre verifique a compatibilidade antes de usar em produção.

5. Em quais casos field-sizing: content é mais útil?

É ideal para formulários onde a experiência do usuário é crucial, como cadastros, campos de descrição ou seletores dinâmicos. Combine com propriedades responsivas, como width: 100%, e teste em diferentes dispositivos para garantir um design funcional e amigável.

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?







Posts mais recentes de Full Stack

Posts mais recentes da Hashtag Treinamentos

Pedro Surreaux

Autor do artigo

Pedro Surreaux

Redator de Publicações

Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.

Ver mais posts