Configurações de tela

O web design responsivo foi, de muitas maneiras, uma reação aos celulares. Antes do surgimento dos smartphones, poucas pessoas pensavam seriamente sobre a aparência dos sites em dispositivos portáteis. Isso mudou com a ascensão meteórica dos telefones celulares com navegadores da web integrados.

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

Essa mentalidade responsiva será muito bom para o futuro. É totalmente possível que seus sites sejam visualizados em dispositivos e telas que nem podemos imaginar hoje. E essa mentalidade vai além das telas. Até mesmo agora as pessoas estão usando dispositivos sem telas para acessar seu conteúdo. Os assistentes de voz poderão usar seus sites se você tiver uma base sólida de HTML semântico.

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

Dual Screen

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

Segmentos da janela de visualização

Há um recurso de mídia experimental projetado para detectar se seu site está sendo exibido em um dispositivo de tela dupla. O nome proposto para o recurso de mídia é viewport-segments. Há 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 é 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 em cima do 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 1, isso significa que o site será exibido em apenas uma tela, mesmo que o dispositivo tenha mais de uma tela. Isso equivale a não usar consultas de mídia.

Variáveis de ambiente

O recurso de mídia viewport-segments por si só não ajuda 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.

Variáveis de ambiente no CSS permitem que você considere intrusões estranhas de dispositivos nos seus estilos. Por exemplo, é possível 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 transmitir uma opção substituta 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 de encarte fornecidos 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 articulação vertical, defina a primeira coluna como a largura da primeira tela e a segunda 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 o próximo sucesso? Quem sabe? Ninguém poderia ter previsto a popularidade dos dispositivos móveis, por isso, vale a pena ter uma mente aberta sobre futuros formatos.

Acima de tudo, é importante garantir que seus sites respondam a tudo o que o futuro trará. É isso que o design responsivo oferece: não apenas um conjunto de técnicas práticas, mas uma mentalidade que o ajudará na criação da Web do futuro.

Teste seu conhecimento

Teste seus conhecimentos sobre configurações de tela