Luigi Moretti

Categoria: CSS

  • env() Safe Area Insets no CSS: O que são e como usar

    Descubra como a função env() e as variáveis safe-area-inset-* resolvem problemas de responsividade em dispositivos com notch e cantos arredondados, tanto na vertical quanto na horizontal.

    Imagem com código CSS desfocado
    Foto de Maik Jonietz na Unsplash

    Introdução

    Já aconteceu com você de abrir um site no iPhone ou em um celular com notch, e perceber que parte do conteúdo está cortado ou colado demais nas bordas?

    Com a popularização de dispositivos com notches, câmeras frontais embutidas e cantos arredondados, o CSS tradicional (padding: 20px, por exemplo) muitas vezes não é suficiente para garantir que o conteúdo fique legível e acessível em todas as telas.

    Aí entra o env() com os safe-area insets, uma solução moderna para criar interfaces que respeitam as áreas seguras dos dispositivos.

    Neste artigo, você vai entender:

    • O que é env()
    • Como usar as variáveis safe-area-inset-*
    • Como ele funciona em diferentes orientações de tela
    • Exemplos práticos
    • Como lidar com compatibilidade

    Vamos entender melhor?

    O que é env() no CSS?

    O env() é uma função CSS que permite acessar variáveis do ambiente, ou seja, valores que o navegador fornece dinamicamente com base no dispositivo, sistema operacional ou contexto.

    Um dos usos mais populares dessa função é trabalhar com os safe area insets, que informam:

    • Quanta margem é necessária no topo, lateral ou base da tela para evitar sobreposição com notches, barras ou cantos arredondados.

    As quatro variáveis principais são:

    • env(safe-area-inset-top)
    • env(safe-area-inset-right)
    • env(safe-area-inset-bottom)
    • env(safe-area-inset-left)

    Qual problema ele resolve?

    Em dispositivos como:

    • iPhone X e posteriores (com notch)
    • Smartphones Android com câmera embutida
    • Tablets com cantos arredondados

    A área útil da tela não é um retângulo perfeito.
    Se não tomarmos cuidado, o conteúdo pode:

    • Ficar cortado pelo notch ou câmera
    • Ficar escondido atrás da barra inferior de gestos
    • Ficar visualmente desconfortável, colado nas bordas

    Com os safe-area insets, podemos criar layouts responsivos de verdade, que respeitam essas áreas seguras automaticamente, tanto no modo vertical quanto horizontal.

    Como ele funciona em diferentes orientações?

    As variáveis são dinâmicas:

    • No modo vertical (portrait) → o safe-area-inset-top cobre o notch no topo.
    • No modo horizontal (landscape) → o safe-area-inset-left e safe-area-inset-right passam a proteger as laterais (onde o notch “gira”).

    Ou seja: você escreve uma vez, e o navegador ajusta conforme a orientação.

    Exemplo básico de uso

    CSS
    body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

    Exemplo avançado: Layout fluido com fallback

    CSS
    .container {
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
}

    Usando media queries para ajustes finos (opcional)

    CSS
    @media (orientation: landscape) {
  .header {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

    💡 Dica: Isso só é necessário em casos muito específicos. Na maioria dos projetos, confiar apenas no env() já cobre os dois modos.

    Compatibilidade e fallback

    Suporte

    • iOS 11+ (Safari)
    • Android Chrome 69+
    • Edge, Firefox (versões modernas)

    Fallback

    Para navegadores que não suportam env(), use o segundo parâmetro como valor padrão:

    CSS
    padding-top: env(safe-area-inset-top, 20px);

    Ou:

    CSS
    padding-top: 20px;
padding-top: env(safe-area-inset-top, 20px);

    Boas práticas

    • Use env() apenas onde há risco de conflito com notches, barras e gestos.
    • Combine com unidades responsivas (vh, dvh) para layouts flexíveis.
    • Teste em simuladores e dispositivos reais nos dois modos (vertical e horizontal).
    • Evite sobrecarregar com media queries quando não for necessário.

    Conclusão

    O env() e os safe-area insets são essenciais para criar interfaces modernas, responsivas e à prova de notch, tanto na vertical quanto na horizontal.

    Com pouco código, você protege seu layout, melhora a experiência do usuário e mostra atenção aos detalhes — características de um desenvolvedor frontend de alto nível. 💪

    Que tal revisar seus layouts e adicionar suporte a safe areas hoje mesmo?

    📢 Gostou do artigo?
    Me siga no LinkedIn para mais dicas práticas sobre CSS moderno, responsividade e experiência do usuário!

    Referências

  • Unidades CSS: vh, dvh, lvh e svh — Entenda o que são e quando usar

    Conheça as novas unidades CSS baseadas na altura da viewport (como dvh, lvh e svh), entenda quando usá-las e por que elas resolvem problemas reais de layout em dispositivos modernos.

    trecho de código CSS com medidas de width, height e opacity em porcentagem.
    Foto de Pankaj Patel na Unsplash

    Introdução

    Você provavelmente já usou vh para controlar a altura de um layout em CSS, certo?

    Mas e quando o layout “quebra” em um smartphone por causa da barra de endereço que aparece e desaparece? Ou quando a rolagem empurra seu conteúdo para fora da tela sem motivo aparente?

    Pois é, essas dores são antigas — e as novas unidades dvh, lvh e svh surgiram exatamente para resolver isso.

    Neste artigo, você vai entender:

    • Como funcionam as unidades de altura de viewport (vh e derivados)
    • O histórico das unidades CSS
    • Quando e como usar as novas unidades de forma segura

    Vamos nessa!

    Um breve histórico das unidades CSS

    As unidades CSS sempre foram uma forma de expressar tamanhos relativos ou absolutos de elementos. Aqui está um resumo:

    📐 Unidades Absolutas

    • px (pixels)
    • pt, cm, in (pouco usados na web)

    📐 Unidades Relativas

    • em, rem — relativas ao tamanho da fonte
    • % — relativa ao elemento pai
    • vw, vh — relativas à viewport

    As unidades vw e vh surgiram com o CSS3, permitindo layouts responsivos baseados no tamanho da tela do usuário.

    • 1vh = 1% da altura da viewport
    • 1vw = 1% da largura da viewport

    Mas… com a chegada dos navegadores móveis, as coisas começaram a ficar menos previsíveis.

    O problema com vh em dispositivos móveis

    Em navegadores móveis (especialmente iOS e Android), a altura da viewport muda conforme:

    • A barra de endereço aparece ou desaparece.
    • O teclado virtual é ativado.
    • O modo de rolagem entra em ação.

    Isso significa que um 100vh pode não ocupar exatamente a tela toda como você esperava, causando efeitos visuais ruins como:

    • Conteúdo cortado
    • Rolagem desnecessária
    • Layouts instáveis

    A solução moderna: dvh, lvh, svh

    Com o CSS Values and Units Level 4, surgiram unidades mais precisas e conscientes da “realidade da viewport”:

    dvh (Dynamic Viewport Height)

    • Corresponde à altura visível no momento, ajustada dinamicamente conforme a presença ou ausência da barra de endereço ou teclado virtual.
    • Ideal para lidar com interfaces que mudam de tamanho (ex: rolagem em navegadores móveis).

    svh (Small Viewport Height)

    • Altura mínima da viewport, normalmente quando as barras (de endereço) do navegador estão visíveis.
    • Útil para garantir que algo sempre caiba mesmo nas condições mais restritivas.

    lvh (Large Viewport Height)

    • Altura máxima da viewport, quando o navegador está em “modo imersivo”.
    • Ideal para quando você quer aproveitar o máximo possível de espaço, pois ignora o espaço ocupado pela barra de endereço ou teclado virtual.

    Exemplo prático: Hero com altura da tela real

    CSS
    .hero {
  height: 100dvh; /* Novo padrão mais confiável */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
}

    💡 Dica: Use dvh como substituto moderno de vh para evitar bugs visuais em mobile.

    Compatibilidade e fallback

    Suporte

    As unidades dvh, lvh, svh são suportadas nos principais navegadores modernos (Chrome 108+, Safari 16+, Firefox 109+).

    Fallback recomendado:

    CSS
    .hero {
  height: 100vh; /* Fallback para navegadores antigos */
  height: 100dvh;
}

    Como o segundo height sobrescreve o primeiro, navegadores modernos usarão dvh e os mais antigos seguirão com vh.

    Boas práticas

    • Prefira dvh sempre que estiver lidando com telas cheias, especialmente em mobile.
    • Use svh se quiser garantir que o conteúdo nunca será cortado.
    • Use lvh se quiser usar o máximo de altura possível para experiências imersivas.
    • Combine com clamp() e env(safe-area-inset-*) para layouts 100% seguros e acessíveis (Clique aqui para saber mais sobre safe-area-inset).

    Conclusão

    As novas unidades de altura (dvh, svh, lvh) chegaram para resolver problemas reais de layout em dispositivos móveis e modernos.
    Elas tornam seu CSS mais robusto, previsível e adaptável.

    Se você ainda usa apenas vh, este é o momento ideal para atualizar seu toolkit e escrever CSS mais confiável para todos os dispositivos.

    📬 Gostou do artigo?
    Me siga no LinkedIn para mais conteúdos práticos sobre CSS moderno, UX e desenvolvimento frontend!

    Referências