O novo responsivo: Web design em um mundo orientado a componentes

Controlar o macro e microlayout em uma nova era de web design responsivo.

Design responsivo hoje em dia

Atualmente, ao usar o termo "design responsivo", você provavelmente está pensando em usar consultas de mídia para mudar o layout ao redimensionar um design do tamanho do dispositivo móvel para o tamanho do tablet para o tamanho do computador.

Mas, em breve, essa percepção de design responsivo poderá ser considerada tão desatualizada quanto usar tabelas para o layout da página.

As consultas de mídia com base na janela de visualização oferecem algumas ferramentas eficientes, mas não têm muitos recursos. Eles não podem atender às necessidades do usuário nem injetar estilos responsivos nos próprios componentes.

É possível usar informações globais da janela de visualização para estilizar seus componentes, mas eles ainda não são proprietários. Isso não funciona quando nossos sistemas de design são baseados em componentes e não em páginas.

A boa notícia é que o ecossistema está mudando, e está mudando rapidamente. O CSS está evoluindo, e uma nova era de design responsivo está a caminho.

Vemos isso acontecer a cada 10 anos. Há 10 anos, por volta de 2010 a 2012, vimos uma grande mudança com o design responsivo e para dispositivos móveis, além do surgimento do CSS3.

Então tudo fica pronto para o ecossistema estar pronto para grandes mudanças acontecerem no CSS. Os engenheiros do Chrome e de toda a plataforma da Web estão prototipando, especificando e iniciando a implementação para a próxima era de design responsivo.

Essas atualizações incluem recursos de mídia com base em preferências do usuário, consultas de contêiner e consultas de mídia para novos tipos de tela, como telas dobráveis.

Responsivo ao usuário

Os novos recursos de mídia de preferência do usuário oferecem a capacidade de estilizar experiências da Web alinhadas às preferências e necessidades específicas do usuário. Isso significa que os recursos de mídia de preferência permitem adaptar as experiências do usuário às experiências do usuário.

Esses recursos de mídia de preferência do usuário incluem:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• E mais

Os recursos de preferências refletem as preferências que um usuário definiu no sistema operacional e ajudam a criar uma experiência da Web mais robusta e personalizada, especialmente para pessoas com necessidades de acessibilidade.

prefers-reduced-motion

Os usuários que definiram preferências do sistema operacional para movimento reduzido solicitam menos animações ao usar o computador em geral. Portanto, é provável que eles não gostem de uma tela de introdução chamativa, animação de virada de cartão, carregador complexo ou outras animações chamativas ao usar a Web.

Com o prefers-reduced-motion, você pode criar páginas com movimento reduzido em mente e criar uma experiência otimizada para quem não tem essa preferência definida.

Este card contém informações dos dois lados. A experiência de movimento reduzido do valor de referência é um crossfade para mostrar essas informações, enquanto a experiência aprimorada de movimento é uma virada de cartão.

Prefere um movimento reduzido não pode significar "sem movimento", já que ele é essencial para transmitir informações on-line. Em vez disso, ofereça uma experiência de valor de referência sólida que oriente os usuários sem movimentos desnecessários e aprimore progressivamente essa experiência sem essas necessidades ou preferências de acessibilidade.

prefers-color-scheme

Outro recurso de mídia de preferência é prefers-color-scheme. Esse recurso ajuda a personalizar a interface de acordo com o tema que o usuário preferir. No sistema operacional, seja em um computador ou dispositivo móvel, os usuários podem definir uma preferência por temas claros, escuros ou automáticos, que mudam de acordo com a hora do dia.

Se você configurar sua página usando propriedades personalizadas do CSS, a troca dos valores de cor será simples. Você pode atualizar rapidamente os valores do tema de cores, como backgroundColor e textOnPrimary, para se ajustar dinamicamente ao novo tema na consulta de mídia.

Para facilitar o teste de algumas dessas consultas de preferência, você pode usar o DevTools para emulação em vez de abrir suas preferências do sistema a cada vez.

Como desenvolver para o tema escuro

Ao projetar para um tema escuro, não se trata apenas de inverter as cores do plano de fundo e do texto ou das barras de rolagem escuras. Há algumas considerações que você pode não perceber. Por exemplo, pode ser necessário diminuir a saturação das cores em um fundo escuro para reduzir a vibração visual.

Em vez de usar sombras para criar profundidade e desenhar um elemento para frente, você pode usar a luz na cor de fundo do elemento para desenhá-lo para frente. Isso ocorre porque as sombras não são tão eficazes em um fundo escuro.

Os temas escuros não só proporcionam uma experiência do usuário mais personalizada, mas também podem melhorar significativamente a duração da bateria em telas AMOLED. Essas são as telas que vemos em smartphones de última geração mais recentes, e elas estão se tornando cada vez mais populares em dispositivos móveis.

Um estudo do Android 2018 sobre temas escuros mostrou uma economia de energia de até 60%, dependendo do brilho da tela e da interface do usuário em geral. A estatística de 60% veio da comparação da tela de reprodução do YouTube com um vídeo pausado com 100% de brilho usando o tema escuro para a interface do app em comparação com um tema claro.

Forneça uma experiência de tema escuro para os usuários sempre que possível.

Responsivo ao contêiner

Uma das áreas emergentes mais interessantes no CSS são as consultas de contêiner, também conhecidas como consultas de elementos. É difícil subestimar o que a mudança do design responsivo com base na página para o design responsivo baseado em contêineres fará para evoluir o ecossistema de design.

Confira um exemplo dos recursos avançados oferecidos pelas consultas de contêiner. É possível manipular qualquer um dos estilos do elemento do cartão, incluindo a lista de links, os tamanhos de fonte e o layout geral com base no contêiner pai:

Este exemplo mostra dois componentes idênticos com dois tamanhos de contêiner diferentes, ambos ocupando espaço em um layout criado usando a grade CSS. Cada componente se ajusta à cota de espaço exclusiva e se ajusta a si mesmo.

Essa flexibilidade não é possível apenas com as consultas de mídia.

As consultas de contêiner oferecem uma abordagem muito mais dinâmica para o design responsivo. Isso significa que, se você colocar esse componente do card em uma seção principal, de barra lateral ou em uma grade dentro do corpo principal de uma página, o próprio componente terá as informações e os tamanhos responsivos de acordo com o contêiner, não a janela de visualização.

Isso exige a at-rule @container. O funcionamento é de maneira semelhante a uma consulta de mídia com @media. No entanto, o @container consulta o contêiner pai em busca de informações em vez da janela de visualização e do user agent.

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

Primeiro, defina a contenção no elemento pai. Em seguida, escreva uma consulta @container para estilizar qualquer um dos elementos no contêiner com base no tamanho, usando min-width ou max-width.

O código acima usa max-width e define os links como display:none, além de diminuir o tamanho da fonte de tempo quando o contêiner tem menos de 850px de largura.

Cards de consulta do contêiner

Neste site de demonstração da planta, cada um dos cards de produtos, incluindo o do imagem principal, a barra lateral de itens visualizados recentemente e a grade de produtos, são todos exatamente o mesmo componente, com a mesma marcação.

Não são usadas consultas de mídia para criar todo o layout, apenas consultas de contêiner. Isso permite que cada card de produto mude para o layout adequado para preencher o espaço. A grade, por exemplo, usa um layout de coluna minmax para permitir que os elementos acessem o espaço deles e reorganiza o layout da grade quando esse espaço é muito compactado, o que significa que ela atingiu o tamanho mínimo.

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

Quando há pelo menos 350px de espaço na grade, o layout do card fica horizontal de ser definido como display: flex, que tem uma direção flexível padrão de "linha".

Com menos espaço, os cards de produtos empilham. Cada card de produto define o próprio estilo, algo que seria impossível apenas com estilos globais.

Como misturar consultas de contêiner com consultas de mídia

As consultas de contêiner têm muitos casos de uso, sendo um deles um componente do calendário. Você pode usar consultas de contêiner para reorganizar os eventos da agenda e outros segmentos com base na largura disponível do contêiner pai.

Esse contêiner de demonstração faz consultas para mudar o layout e o estilo da data e do dia da semana da agenda, além de ajustar as margens e o tamanho da fonte nos eventos programados para ajudá-los a se adequar melhor ao espaço.

Em seguida, use uma consulta de mídia para mudar todo o layout para telas menores. Este exemplo mostra como é eficaz combine consultas de mídia (ajustando os estilos globais ou de macro) com consultas de contêiner (ajustando as filhas do contêiner e os microestilos delas).

Agora, podemos pensar nos layouts Macro e Micro no mesmo componente de interface para permitir algumas decisões de design bem diferenciadas.

Como usar consultas de contêiner atualmente

Essas demonstrações agora estão disponíveis para você testar com uma bandeira no Chrome Canary. Acesse about://flags no Canary e ative a flag #enable-container-queries. Isso vai ativar o suporte aos valores @container, inline-size e block-size para a propriedade contain e a implementação da LayoutNG Grid

A sinalização também ativa os recursos correspondentes do Chrome DevTools. Saiba como inspecionar e depurar consultas de contêiner no DevTools.

Estilos com escopo

Para criar consultas de contêiner, o grupo de trabalho do CSS também está discutindo ativamente estilos com escopo para ajudar com o namespace adequado e a prevenção de colisão de componentes.

Estilos com escopo permitem estilos de passagem e específicos de componentes para evitar conflitos de nomenclatura, algo que muitos frameworks e plug-ins, como módulos CSS, já nos permitem fazer dentro de frameworks. Agora, essa especificação nos permitiria criar estilos encapsulados nativamente para nossos componentes com CSS legível sem precisar ajustar a marcação.

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

O escopo permitiria criar seletores em forma de rosca, em que é possível especificar onde manter um estilo encapsulado e onde sair desse estilo com escopo para se referir a um estilo mais global.

Um exemplo disso seria um painel de guias, em que queremos que as guias recebam o estilo com escopo, e o painel dentro das guias tenha um estilo pai.

Responsivo ao formato

O próximo tópico da nossa conversa sobre a nova era de design responsivo é uma mudança nos formatos e as possibilidades crescentes do que precisaremos projetar como uma comunidade da Web, como telas com mudança de forma ou realidade virtual.

Telas dobráveis ou flexíveis, e o design voltado ao tamanho da tela é um exemplo de onde podemos observar uma mudança no formato hoje. A extensão de tela é outra especificação em que estamos trabalhando para abranger esses novos formatos e necessidades.

Uma consulta de mídia experimental para abrangência de tela pode nos ajudar aqui. No momento, ele se comporta desta forma: @media (spanning: <type of fold>). A demonstração configura um layout de grade com duas colunas: uma tem largura de --sidebar-width, que é 5rem por padrão, e a outra é 1fr. Quando o layout é visualizado em uma tela dupla que tem uma única dobra vertical, o valor de --sidebar-width é atualizado com o valor do ambiente da dobra à esquerda.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

Isso ativa um layout em que a barra lateral, a navegação, neste caso, preenche o espaço de uma das dobras, em que a interface do app preenche a outra. Isso evita um "vinco" na interface.

Você pode testar telas dobráveis no emulador do Chrome DevTools para ajudar a depurar e criar protótipos de telas diretamente no navegador.

Conclusão

Explorar o design da IU além da tela plana é outro motivo pelo qual as consultas de contêiner e os estilos com escopo são tão importantes. Elas oferecem a oportunidade de siloar os estilos de componentes do layout da página e dos estilos globais e estilos de usuário, permitindo um design responsivo mais resiliente. Isso significa que agora é possível criar layouts de macro usando consultas de mídia com base em páginas, incluindo nuances de extensão de tela. Ao mesmo tempo, é possível usar microlayouts com consultas de contêiner nos componentes e adicionar consultas de mídia baseadas em preferências do usuário para personalizar as experiências do usuário de acordo com as preferências e necessidades únicas.

Este é o novo recurso responsivo.

Ela combina o macrolayout com microlayout e, além de tudo isso, está considerando a personalização do usuário e o formato.

Qualquer uma dessas mudanças por si só constituiria uma mudança considerável na maneira como projetamos para a Web. Mas, combinados, eles significam uma grande mudança na forma como conceituamos o design responsivo. É hora de pensar no design responsivo além do tamanho da janela de visualização e começar a considerar todos esses novos eixos para experiências melhores baseadas em componentes e personalizadas.

A nova era do design responsivo chegou, e você já pode começar a explorá-la por conta própria.

web.dev/learnCSS

Por enquanto, se você quiser aprimorar seu jogo do CSS e talvez revisitar alguns conceitos básicos, minha equipe está lançando um novo curso de CSS totalmente sem custo financeiro, além de uma referência sobre web.dev. Acesse web.dev/learnCSS.

Espero que você tenha gostado desta visão geral sobre a próxima era do design responsivo e alguns dos fundamentos que virão com ele. Também espero que você esteja tão animado quanto eu com o que isso significa para o futuro do web design.

Isso abre uma grande oportunidade para nós, como comunidade de interface, adotar estilos baseados em componentes, novos formatos e criar experiências responsivas ao usuário.