Hoje, ao usar o termo “web design responsivo“, a maioria das pessoas pensa em usar media queries para alterar o layout ao redimensionar um design do tamanho “mobile”, para o tamanho “tablet” ou tamanho “desktop”.
Mas, muito em breve, essa percepção de design responsivo pode ser considerada tão desatualizada quanto o uso de tabelas para desenvolver layouts de páginas.
Este artigo contém informações relevantes e exemplos práticos sobre o novo web design responsivo, mas assista também ao vídeo de nosso canal no YouTube sobre o assunto:
Media queries baseadas em tamanho de viewport (viewport-based media queries) fornecem algumas ferramentas poderosas, mas não têm muita sutileza; elas não têm a capacidade completa de responder às necessidades de quem usa e de injetar estilos responsivos nos próprios componentes.
É possível usar as informações globais da viewport para definir o estilo de componentes, mas eles ainda não possuem seus estilos, e isso não funciona muito bem na abordagem mais moderna de webdev, em que design systems são baseados em componentes e não em páginas.
A boa notícia é que o ecossistema está mudando. E muito rapidamente. CSS está evoluindo e uma nova era de design responsivo já desponta no horizonte.
Vemos isso acontecer, em média, a cada 10 anos. Há 10 anos, por volta de 2010-2012, vimos uma grande mudança no design mobile e responsivo e o surgimento do CSS3.
Então, chega o momento em que, mais uma vez, o ecossistema está pronto para algumas grandes mudanças acontecerem no CSS. Os engenheiros das plataformas web já estão fazendo protótipos, especificações e iniciando a implementação para a próxima era de web design responsivo.
Essas atualizações incluem recursos de mídia baseados nas preferências do usuário (user-preference based media features), container queries e media queries para novos tipos de tela, como telas dobráveis.
Responsivo a quem usa
Novos recursos de mídia de preferência do usuário (user preference media features) oferecem a capacidade de estilizar experiências da Web que se alinham com as próprias preferências e necessidades específicas de quem usa.
As media features de preferências incluem:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- E mais
Os recursos de preferência atendem às preferências que alguém definiu em seu sistema operacional e ajudam a desenvolvver uma experiência Web mais robusta e personalizada, especialmente para aqueles com necessidades de acessibilidade.
prefers-reduced-motion
Pessoas que definiram as preferências do sistema operacional para movimento reduzido (reduced motion) estão solicitando menos animações ao usar o computador, em geral.
Portanto, é provável que elas não apreciem 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 prefers-reduced-motion, é possível projetar páginas Web com o movimento reduzido em mente e criar uma experiência de movimento aprimorado para aqueles que não têm esse conjunto de preferências.
Este card contém informações em ambos os lados. A experiência de movimento reduzido é um crossfade para mostrar essas informações, enquanto a experiência de movimento aprimorado é uma virada.
prefers-reduced-motion não significa “nenhum movimento”, uma vez que Motion UI é muito importante para transmitir informações online. Em vez disso, entenda como uma experiência de base sólida que orienta os visitantes sem movimentos desnecessários e aprimora progressivamente (progressively enhance) essa experiência para as pessoas sem essas necessidades ou preferências de acessibilidade.
prefers-color-scheme
Outro recurso de mídia preferencial é prefers-color-scheme. Este recurso ajuda você a personalizar a UI para o tema que a pessoa preferir. Em seu sistema operacional, seja no desktop ou celular, é possível 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 CSS Custom Properties (as famosas Variáveis CSS), a troca dos valores das cores será feita de maneira direta. É possível atualizar rapidamente os valores do tema de cores, como backgroundColor e textOnPrimary para ajustar dinamicamente ao novo tema na media query.
Para ficar mais fácil de testar algumas dessas consultas de preferência, é possível usar as DevTools para emulação em vez de abrir as preferências do sistema a cada vez.
Responsivo ao container (container queries)
Uma das áreas emergentes mais interessantes em CSS são as container queries (ou consultas de contêiner), também frequentemente chamadas de element queries. É difícil subestimar o que a mudança do design responsivo baseado em páginas para o design responsivo baseado em contêiner fará para evoluir o ecossistema de design.
Eis um exemplo das poderosas possibilidades que as container queries oferecem. Você pode manipular qualquer um dos estilos do elemento do card, incluindo a lista de links, tamanhos de fonte e layout geral com base em seu container-pai:
Este exemplo mostra 2 componentes idênticos, com 2 tamanhos de contêiner diferentes, ambos ocupando espaço em um layout criado usando CSS Grid. Cada componente se encaixa em sua distribuição de espaço exclusivo e se estiliza de acordo.
Esse tanto de flexibilidade é algo que não é possível alcançar usando apenas media queries.
Container queries oferecem uma abordagem muito mais dinâmica para web design responsivo. Isso significa que, se esse card for colocado em uma barra lateral, hero ou dentro de uma grid dentro do conteúdo principal de uma página, o próprio componente possui suas informações responsivas e tamanhos de acordo com o contêiner, não a viewport — conforme explicamos em nosso vídeo a respeito de container queries.
Veja este outro exemplo, em que cada um dos cards de produto, incluindo o do hero, a barra lateral de itens visualizados recentemente e a grade de produtos, são exatamente o mesmo componente, com a mesma marcação:
Reforçando: não há media queries sendo usadas para criar todo o layout, apenas container queries. Isso permite que cada cartão de produto mude para o layout adequado para preencher seu espaço.
Misturando Container Queries com Media Queries
As container queries pode servir a, literalmente, infinitos casos de uso, como, por exemplo, um componente de calendário. É possível usar container queries para refazer o layout dos eventos de calendário e outros segmentos com base na largura disponível de seu pai.
Este contêiner de demonstração busca alterar o layout e o estilo da data e dia da semana do calendário, bem como ajustar as margens e o tamanho da fonte nos eventos programados para ajudá-los a se ajustar melhor ao espaço. Em seguida, usa media query para altera todo o layout para tamanhos de tela menores.
Este exemplo mostra como é poderoso combinar media queries (ajustando os estilos globais ou macro) com container queries (ajustando os filhos do contêiner e seus micro estilos), mostrando que, a partir de agora, é possível pensar nos layouts Macro e Micro dentro do mesmo componente de UI para permitir algumas decisões de design com nuances realmente interessantes.
Scoped Styles
Para desenvolver container queries, o CSS Working Group também está discutindo ativamente Scoped Styles (ou Estilos Escopados) para ajudar com o namespacing adequado e prevenção de colisões para componentes.
Estilos com escopo permitem passagem (pass-through) e estilo específico de componente (component-specific styling) para evitar colisões de nomenclatura, algo que muitos frameworks e plugins, como módulos CSS, já nos permitem fazer dentro de frameworks.
Essa especificação agora nos permite escrever estilos encapsulados nativamente para nossos componentes com CSS sem a necessidade de ajustar a marcação.
|
1 2 3 4 5 6 |
/* @scope (<root>#) [to (<boundary>#)]? { … } */ @scope (.tabs) to (.panel) { :scope { /* targeting the scope root */ } .light-theme :scope .tab { /* contextual styles */ } } |
A definição do escopo nos permitiria criar seletores “em forma de rosca” (“donut shaped“), onde seria possível especificar onde manter um estilo encapsulado e onde sair desse estilo com escopo definido para se referir a um estilo mais global.
Um exemplo disso seria um painel de guias, onde desejaríamos que as guias obtivessem o estilo do escopo, e o painel dentro das guias para obter um estilo-pai.
Responsivo ao fator de forma (form factor)
Um tópico muito interessante sobre a nova era do web design responsivo é uma mudança nos fatores de forma (form factors) e as possibilidades crescentes do que precisaremos projetar como uma comunidade da Web (como uma tela que muda de forma ou realidade virtual).
Telas dobráveis ou flexíveis e design para abrangência de tela (screen spanning) é um exemplo de onde podemos ver uma mudança no fator de forma hoje. E a abrangência da tela é outra especificação que está sendo trabalhada para cobrir esses novos fatores de forma e necessidades.
Uma media query experimental para screen spanning pode vir a calhar. Atualmente, ele é usada assim: @media (spanning: <type of fold>). O código abaixo configura um layout de grid com 2 colunas: uma tem uma largura de --sidebar-width, que é 5rem por padrão, e a outra tem 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
: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 no qual a barra lateral (neste caso, a navegação) preencha o espaço de uma das dobras e a UI do aplicativo preencha a outra.
É possível testar telas dobráveis no emulador das Chrome DevTools para ajudar a debugar e criar protótipos de tela diretamente no navegador.
Conclusão sobre o novo web design responsivo
Explorar o design da UI além de uma tela plana é outro motivo pelo qual as container queries e estilos escopados são tão importantes. Eles oferecem a oportunidade de isolar estilos de componentes de layout de página e estilos globais e estilos de usuário, permitindo um design responsivo mais resiliente.
Isso significa que, a partir de agora, é possível criar macro layouts usando consultas de mídia baseadas em página (page-based media queries), incluindo nuances de abrangência de tela.
Ao mesmo tempo, usar micro layouts com container queries nos componentes e usar consultas de mídia baseadas nas preferências do usuário (user-preference based media queries) para personalizar as experiências de cada pessoa com base em suas preferências e necessidades exclusivas.
Isso é o novo responsivo.
Ele combina o macro layout com o micro layout e, acima de tudo, leva em consideração as personalizações de cada pessoa e o formato.
Qualquer uma dessas mudanças, por si só, já constituiria uma mudança considerável na forma como desenvolvemos para a Web. Mas, combinados, eles significam uma grande mudança em como conceituamos e fazemos web design responsivo.
É hora de pensar em um design responsivo além do tamanho da viewport e começar a considerar todos esses novos eixos para melhores experiências personalizadas baseadas em componentes.
A próxima era do web design responsivo chegou e você já pode começar a explorá-la.