Controlar o layout macro e micro em uma nova era do web design responsivo.
Design responsivo hoje
Hoje, ao usar o termo "design responsivo", você provavelmente está pensando em usar consultas de mídia para mudar o layout ao redimensionar um design de um dispositivo móvel para um tablet e, em seguida, para um computador.
Mas logo essa percepção de design responsivo pode ser considerada tão desatualizada quanto usar tabelas para layout de página.
As consultas de mídia baseadas em viewport 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 têm estilos próprios, o que 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á chegando.
Isso acontece 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.
Portanto, mais uma vez, o ecossistema está pronto para algumas mudanças bem grandes no CSS. Os engenheiros do Chrome e da plataforma da Web estão criando protótipos, especificações e começando a implementação para a próxima era do design responsivo.
Essas atualizações incluem recursos de mídia com base nas 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
Novos recursos de mídia de preferência do usuário permitem estilizar experiências da 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 definidas por um usuário no sistema operacional e ajudam a criar uma experiência on-line mais robusta e personalizada, especialmente para pessoas com necessidades de acessibilidade.
prefers-reduced-motion
Os usuários que definiram preferências de 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, uma animação de virada de cartão, um carregador complexo ou outras animações chamativas ao usar a Web.
Com o prefers-reduced-motion, você pode criar páginas com redução de movimento em mente e criar uma experiência aprimorada para quem não tem essa preferência definida.
Este cartão tem informações nos dois lados. A experiência de movimento reduzido padrão é um crossfade para mostrar essas informações, enquanto a experiência de movimento aprimorado é uma inversão de card.
Prefers-reduced-motion não deve significar "sem movimento", já que o movimento é essencial 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 usuários sem essas necessidades ou preferências de acessibilidade.
prefers-color-scheme
Outro recurso de mídia de preferência é o
prefers-color-scheme. Esse recurso ajuda você a personalizar a interface de acordo com o tema preferido do usuário. 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 dependendo da hora do dia.
Se você configurar sua página usando propriedades personalizadas de CSS, a troca de 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, use as DevTools para emulação em vez de abrir as preferências do sistema a cada vez.
Como criar para o tema escuro
Ao criar 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 trazer um elemento para a frente, você pode usar a luz na propriedade "background-color" do elemento para trazê-lo para a frente. Isso acontece 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 de 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 novos, e elas estão se tornando cada vez mais populares em dispositivos móveis.
Um estudo de 2018 do Android sobre temas escuros mostrou uma economia de consumo de energia de até 60%, dependendo do brilho da tela e da interface geral do usuário. A estatística de 60% foi obtida ao comparar a tela de reprodução do YouTube com um vídeo pausado com brilho de tela de 100% usando o tema escuro para a interface do app em comparação com um tema claro.
Sempre que possível, ofereça um tema escuro aos usuários.
Adaptável ao contêiner
Uma das áreas mais interessantes do 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áginas para o design responsivo baseado em contêineres fará para evoluir o ecossistema de design.
Confira um exemplo das funcionalidades avançadas que as consultas de contêiner oferecem. Você pode manipular qualquer um dos estilos do elemento de card, incluindo a lista de links, os tamanhos das fontes e o layout geral com base no contêiner principal:
Este exemplo mostra dois componentes idênticos com dois tamanhos de contêiner diferentes, ambos ocupando espaço em um layout criado com o CSS Grid. Cada componente se ajusta à sua alocação de espaço exclusiva e se estiliza de acordo.
Essa 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 card em uma barra lateral, seção principal ou em uma grade dentro do corpo principal de uma página, o componente terá suas informações responsivas e será dimensionado de acordo com o contêiner, não com a janela de visualização.
Isso exige a regra at @container, que funciona de maneira semelhante a uma consulta de mídia com @media. No entanto, @container consulta o contêiner pai para obter informações, e não a janela de visualização e o user agent.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Primeiro, defina o isolamento no elemento pai. Em seguida, escreva uma consulta @container para estilizar qualquer um dos elementos dentro do contêiner com base no tamanho dele 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 de contêiner
Neste site de demonstração de plantas, cada um dos cards de produtos, incluindo o da imagem principal, a barra lateral de itens visualizados recentemente e a grade de produtos, são 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 e preencha 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 está muito comprimido (o que significa que 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, algo 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, um deles sendo um componente de calendário. Você pode usar consultas de contêiner para reestruturar os eventos da agenda e outros segmentos com base na largura disponível do elemento pai.
Esta demonstração usa consultas de contêiner 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 encaixem melhor no espaço.
Em seguida, use uma consulta de mídia para mudar todo o layout em telas menores. Este exemplo mostra como é poderoso combinar consultas de mídia (ajustando os estilos globais ou de macro) com consultas de contêiner (ajustando os filhos do contêiner e seus microestilos).
Agora podemos pensar em layouts macro e micro no mesmo componente de interface para permitir algumas decisões de design sutis muito interessantes.
Como usar consultas de contêiner hoje
Essas demonstrações agora estão disponíveis para jogar 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 LayoutNG.
A flag também ativa os recursos correspondentes do Chrome DevTools. Saiba como inspecionar e depurar consultas de contêineres no DevTools.
Estilos com escopo
Para criar consultas de contêiner, use estilos com escopo com @scope para limitar o alcance dos seus seletores.
Os estilos com escopo permitem um estilo específico do componente para evitar conflitos de nomenclatura, algo que muitas estruturas e plug-ins, como módulos CSS, já permitem fazer dentro das estruturas. Com os estilos com escopo, é possível escrever estilos encapsulados de forma nativa para 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 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 que o painel dentro dessas guias não seja afetado por esses estilos.
Adaptável 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 abrangência de tela são um exemplo de onde podemos ver uma mudança no formato hoje. E o recurso de abrangência da tela é mais uma especificação em que estamos trabalhando para cobrir esses novos formatos e necessidades.
Uma consulta de mídia experimental para abrangência de tela pode ajudar aqui. No momento, ele funciona 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 é 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 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 permite um layout em que a barra lateral, a navegação neste caso, preenche o espaço de uma das dobras, e a interface do app preenche a outra. Isso evita uma "dobra" na interface.
Você pode testar telas dobráveis no emulador do Chrome DevTools para ajudar a depurar e criar protótipos de abrangência de tela diretamente no navegador.
Conclusão
Explorar o design da interface do usuário 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 oferecem a oportunidade de isolar estilos de componentes do layout da página e estilos globais, além de estilos do usuário, permitindo um design responsivo mais resiliente. Isso significa que agora você pode criar layouts macro usando consultas de mídia baseadas em páginas, incluindo nuances que abrangem a tela. Ao mesmo tempo, use microrlayouts 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 de acordo com as preferências e necessidades exclusivas dele.
Este é o novo responsivo.
Ele combina o layout macro com o micro e, além disso, considera a personalização do usuário e o formato.
Qualquer uma dessas mudanças por si só constituiria uma mudança considerável na forma como projetamos para a Web. Mas, combinados, eles significam uma mudança muito grande na forma como até mesmo 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, personalizadas e baseadas em componentes.
A próxima era do design responsivo chegou, e você já pode começar a explorar por conta própria.
web.dev/learnCSS
Por enquanto, se você quiser melhorar seu jogo de CSS e talvez revisar 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 de algumas das primitivas que virão com ela. 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 uma comunidade de UI, de adotar estilos baseados em componentes, novos formatos e criar experiências responsivas ao usuário.