Configurações de tela

O web design responsivo foi, de muitas maneiras, uma reação aos celulares. Antes do surgimento dos smartphones, poucas pessoas consideravam os sites como se fossem portáteis. Isso mudou com a ascensão meteórica dos celulares com navegadores da Web integrados.

O web design responsivo incentivou uma mentalidade que questionava suposições. Antes, era comum supor que um site seria visualizado somente em um computador desktop, agora também é uma prática padrão criar esse mesmo site para celulares e tablets. Na verdade, o uso de dispositivos móveis superou o uso de computadores na Web.

Essa mentalidade responsiva vai servir você no futuro. É totalmente possível que seus sites sejam visualizados em dispositivos e telas que sequer podemos imaginar hoje. E essa mentalidade vai além das telas. Mesmo agora as pessoas estão usando dispositivos sem tela para acessar seu conteúdo. Assistentes por voz podem usar seus sites se você estiver usando uma base sólida de HTML semântico.

Também há experimentação no mundo das telas. Atualmente, há dispositivos no mercado com telas dobráveis. Isso introduz alguns desafios para seus designs.

Telas duplas

Os usuários de dispositivos dobráveis podem escolher se querem que o navegador da Web ocupe apenas uma das telas ou as duas. Se o navegador se estender por ambas as telas, o site exibido será dividido pela articulação entre as duas telas. Não está ótimo.

Segmentos da janela de visualização

Há um recurso experimental de mídia desenvolvido para detectar se seu site está sendo exibido em um dispositivo de tela dupla. O nome proposto do recurso de mídia é viewport-segments. Existem duas variedades: horizontal-viewport-segments e vertical-viewport-segments.

Se o recurso de mídia horizontal-viewport-segments informar um valor de 2 e vertical-viewport-segments informar um valor de 1, isso significa que a articulação do dispositivo vai ser executada de cima para baixo, dividindo o conteúdo em dois painéis lado a lado.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Se o recurso de mídia vertical-viewport-segments informar um valor de 2 e horizontal-viewport-segments informar um valor de 1, a articulação vai ser executada de um lado para o outro, dividindo o conteúdo em dois painéis, um sobre o outro.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

Se vertical-viewport-segments e horizontal-viewport-segments informarem um valor de 1, isso significa que o site está sendo mostrado em apenas uma tela, mesmo que o dispositivo tenha mais de uma tela. Isso equivale a não usar nenhuma consulta de mídia.

Variáveis de ambiente

O recurso de mídia viewport-segments por si só não vai ajudar você a projetar com base nessa articulação chata. Você precisa de uma maneira de saber o tamanho da articulação. É aí que as variáveis de ambiente podem ajudar.

As variáveis de ambiente no CSS permitem que você considere intrusões de dispositivo estranhas nos seus estilos. Por exemplo, você pode projetar em torno do "entalhe" no iPhone X usando os valores de ambiente safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom e safe-area-inset-left. Essas palavras-chave são agrupadas em uma função env().

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

As variáveis de ambiente funcionam como propriedades personalizadas. Isso significa que é possível passar uma opção de substituição caso a variável de ambiente não exista.

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

Para que essas variáveis de ambiente funcionem no iPhone X, atualize o elemento meta que especifica as informações de viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Agora o layout da página vai ocupar toda a janela de visualização e preencher o documento com segurança com valores inseridos pelo dispositivo.

Para telas dobráveis, seis novas variáveis de ambiente estão sendo propostas: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom e viewport-segment-right.

Aqui está um exemplo de layout com duas colunas, uma mais larga que a outra.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

Para telas duplas com uma articulação vertical, defina a primeira coluna como a largura da primeira tela e a segunda coluna como a largura da segunda tela.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Trate as telas duplas como uma oportunidade. Talvez uma tela possa ser usada para mostrar conteúdo de texto rolável enquanto a outra mostra um elemento fixo, como uma imagem ou um mapa.

O futuro

As telas dobráveis serão a nova tendência? Quem sabe? Ninguém poderia ter previsto a popularidade dos dispositivos móveis, então vale a pena ter mente aberta sobre os futuros formatos.

Acima de tudo, vale a pena garantir que seus sites possam responder a qualquer coisa que o futuro possa trazer. É isso que o design responsivo oferece: não apenas um conjunto de técnicas práticas, mas uma mentalidade que vai servir a você na construção da web do futuro.

Teste seu conhecimento

Teste seus conhecimentos sobre configurações de tela