Como controlar o layout macro e micro em uma nova era de Web design responsivo.
Design responsivo hoje
Hoje, quando usamos o termo "design responsivo", provavelmente estamos pensando em usar consultas de mídia para mudar o layout ao redimensionar um design de um tamanho para dispositivos móveis para um tamanho para tablets e, em seguida, para um tamanho para computadores.
Mas, em breve, essa percepção do design responsivo pode ser considerada tão desatualizada quanto o uso de tabelas para o layout da página.
As consultas de mídia baseadas em janela de visualização oferecem algumas ferramentas poderosas, mas não são muito refinadas. Eles não conseguem responder às necessidades do usuário nem injetar estilos responsivos nos próprios componentes.
Você pode usar informações globais da janela de visualização para estilizar seus componentes, mas eles ainda não são os donos dos próprios estilos, e 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 bem rápido. O CSS está evoluindo, e uma nova era de design responsivo está no horizonte.
Isso acontece a cada 10 anos. Há 10 anos, por volta de 2010-2012, vimos uma grande mudança com o design responsivo e para dispositivos móveis e o surgimento do CSS3.
Portanto, mais uma vez, o ecossistema está pronto para algumas mudanças bastante significativas no CSS. Os engenheiros do Chrome e de toda a plataforma da Web estão criando protótipos, especificando e iniciando a implementação para a próxima era do design responsivo.
Essas atualizações incluem recursos de mídia baseados nas preferências do usuário, consultas de contêiner e consultas de mídia para novos tipos de tela, como as dobráveis.
Responsivo ao usuário
Os novos recursos de mídia de preferência do usuário permitem que você estilize experiências na Web que se alinham à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 dele.
Esses recursos de mídia de preferência do usuário incluem:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- E mais
Os recursos de preferência captam as preferências que um usuário definiu no sistema operacional e ajudam a criar uma experiência na Web mais robusta e personalizada, especialmente para pessoas com necessidades de acessibilidade.
prefers-reduced-motion
Os usuários que definiram as preferências do sistema operacional para movimento reduzido estão solicitando 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 prefers-reduced-motion, é possível projetar suas páginas com movimento reduzido em
mente e criar uma experiência com movimento aprimorado para quem não tem essa
preferência definida.
Este cartão tem informações nos dois lados. A experiência básica de movimento reduzido é um crossfade para mostrar essas informações, enquanto a experiência com movimento aprimorado é um giro de card.
Prefers-reduced-motion não significa "sem movimento", já que o movimento é fundamental para transmitir informações on-line. Em vez disso, ofereça uma experiência básica sólida que oriente os usuários sem movimentos desnecessários e melhore progressivamente essa experiência para os usuários 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
você a personalizar a interface de acordo com o tema que o usuário prefere. No sistema
operacional, seja em computadores ou dispositivos móveis, 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
de CSS, a troca
de valores de cor será simples. É possível atualizar rapidamente os valores do tema de cores,
como backgroundColor e textOnPrimary, para que eles se ajustem dinamicamente ao
novo tema na consulta de mídia.
Para facilitar o teste de algumas dessas consultas de preferência, use o DevTools para emulação em vez de abrir as preferências do sistema sempre que quiser testar.
Como criar um design para o tema escuro
Ao projetar para um tema escuro, não basta inverter as cores do plano de fundo e do texto ou usar barras de rolagem escuras. Há algumas considerações que você talvez não perceba. Por exemplo, talvez seja necessário diminuir a saturação das cores em um plano de fundo escuro para reduzir a vibração visual.
Em vez de usar sombras para criar profundidade e destacar um elemento, use luz na cor de fundo do elemento para destacá-lo. Isso ocorre porque as sombras não são tão eficazes em um plano de fundo escuro.
Os temas escuros não apenas oferecem 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 estamos vendo em smartphones mais novos e sofisticados, e elas estão se tornando cada vez mais populares em dispositivos móveis.
Um estudo do Android de 2018 (link em inglês) 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 da tela usando o tema escuro para a interface do app em comparação com um tema claro.
Sempre que possível, ofereça uma experiência de tema escuro para os usuários.
Responsivo ao contêiner
Uma das áreas emergentes mais interessantes no CSS são as consultas de contêiner, também chamadas de consultas de elemento. É difícil subestimar o que a mudança do design responsivo baseado em página para o design responsivo baseado em contêiner vai fazer para evoluir o ecossistema de design.
Confira um exemplo dos recursos avançados que as consultas de contêiner oferecem. É possível manipular qualquer um dos estilos do elemento do card, 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 à alocação de espaço exclusiva e se estiliza de acordo.
Esse nível de flexibilidade não é possível apenas com 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 de cartão em uma barra lateral, em uma seção principal ou em uma grade dentro do corpo principal de uma página, o componente em si vai ter as próprias informações responsivas e os tamanhos de acordo com o contêiner, não com a janela de visualização.
Isso requer a regra @ @container. Ela funciona de maneira semelhante a uma consulta de mídia
com @media, mas, em vez disso, @container consulta o contêiner pai para
receber 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 dentro do 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 do horário quando o contêiner tem menos de 850px de largura.
Cards de consulta de contêiner
Neste site de demonstração de plantas, cada um dos cards de produtos, incluindo o do hero, a barra lateral de itens visualizados recentemente e a grade de produtos, são todos o mesmo componente, com a mesma marcação.
Não há consultas de mídia usadas para criar todo esse 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 fluam para o espaço deles e refaçam o layout da grade quando esse espaço estiver muito comprimido (o que significa que ele 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 ao ser definido como display: flex, que tem uma flex-direction padrão
de "row".
Com menos espaço, os cards de produtos são empilhados. Cada card de produto tem um estilo próprio, o 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, como um componente de agenda. Você pode usar consultas de contêiner para reorganizar os eventos da agenda e outros segmentos com base na largura disponível do pai.
Este contêiner de demonstração consulta para mudar o layout e o estilo da data e do dia da semana do calendário, além de ajustar as margens e o tamanho da fonte nos eventos programados para que eles se ajustem melhor ao espaço.
Em seguida, use uma consulta de mídia para mudar todo o layout para tamanhos de tela menores. Este exemplo mostra como é eficiente combinar consultas de mídia (ajustando os estilos globais ou de macro) com consultas de contêiner (ajustando os filhos do contêiner e os microestilos deles).
Agora, podemos pensar em layouts macro e micro no mesmo componente de IU para permitir algumas decisões de design realmente interessantes.
Como usar consultas de contêiner hoje
Essas demonstrações já estão disponíveis para teste com uma flag 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 grade do LayoutNG.
A flag 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, use estilos com escopo com @scope para limitar o alcance dos seletores.
Os estilos com escopo permitem uma estilização específica do componente para evitar conflitos de nomenclatura, algo que muitos frameworks e plug-ins, como módulos CSS, já nos permitem fazer dentro de frameworks. Os estilos com escopo permitem que você escreva estilos encapsulados de forma nativa para componentes com CSS legível sem a necessidade de 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 permite criar seletores em forma de rosca, em que é possível especificar
um limite superior e inferior. Os seletores contidos na regra @scope são correspondidos
entre esses limites.
Um exemplo disso seria um painel de guias, em que você quer que as guias recebam os estilos com escopo, mas o painel dentro dessas guias não seja afetado por eles.
Responsivo ao formato
O próximo tópico da nossa conversa sobre a nova era do design responsivo é uma mudança nos formatos e as possibilidades crescentes do que precisaremos projetar como uma comunidade da Web (como telas que mudam de forma ou realidade virtual).
Telas dobráveis ou flexíveis e o design para expansão de tela são um exemplo de onde podemos ver uma mudança de formato hoje. A extensão de tela é outra especificação que está sendo desenvolvida para atender a esses novos formatos e necessidades.
Uma consulta de mídia experimental para expansão de tela pode ajudar. Atualmente, ele se comporta assim: @media
(spanning: <type of fold>). A demonstração configura um layout de grade com duas colunas:
uma tem uma largura de --sidebar-width, que é de 5rem por padrão, e a outra é
1fr. Quando o layout é visualizado em uma tela dupla com uma única dobra vertical, o valor de --sidebar-width é atualizado com o valor de 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 permite um layout em que a barra lateral, que é a navegação nesse caso, preenche o espaço de uma das dobras, e a IU do app preenche a outra. Isso evita uma "dobra" na interface.
É possível 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 de interface além de uma tela plana é outro motivo pelo qual as consultas de contêiner e os estilos com escopo são tão importantes. Eles dão a oportunidade de isolar os estilos de componentes do layout da página, dos estilos globais e dos estilos do usuário, permitindo um design responsivo mais resiliente. Isso significa que agora é possível projetar layouts de macro usando consultas de mídia baseadas em página, incluindo nuances de expansão de tela. Ao mesmo tempo, use microlayouts com consultas de contêiner nos componentes e adicione consultas de mídia com base nas preferências do usuário para personalizar as experiências com base nas preferências e necessidades exclusivas dele.
Este é o novo responsivo.
Ele combina o layout macro com o layout micro e, além de tudo isso, considera a personalização do usuário e o formato.
Qualquer uma dessas mudanças por si só já seria uma mudança considerável na forma como projetamos para a Web. Mas, juntas, elas representam 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 melhorar as experiências personalizadas e baseadas em componentes.
A próxima era do design responsivo chegou, e você já pode começar a explorá-la.
web.dev/learnCSS
E, por enquanto, se você quiser levar seu jogo de CSS para o próximo nível e talvez revisitar alguns conceitos básicos, minha equipe está lançando um curso e uma referência de CSS totalmente novos e sem custo financeiro no web.dev. Acesse em web.dev/learnCSS.
Espero que você tenha gostado desta visão geral sobre a próxima era do design responsivo e algumas das primitivas 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 IU, de adotar estilos baseados em componentes, novos formatos e criar experiências responsivas para o usuário.