Esse ano o termo "responsividade" fez 14 anos, o manifesto que incentivou a ideia de uma web que não trancasse as pessoas em experiências estáticas fez 24 anos. Em fevereiro desse ano, Ethan Marcotte, o pai da responsividade postou isso:
Se você é uma pessoa webdesigner em 2024 e ainda está criando telas pra um navegador e um punhado de resoluções, esse texto é pra você.
Responsividade e o mobile first
Mobile first é irmão gêmeo do design responsivo, nascido com meses de diferença em 2009. Em minhas pesquisas, a primeira ocorrência sólida desse termo foi por Luke Wroblewski no artigo de mesmo nome.
Em "Mobile First" Luke aborda de maneira conceitual a explosão dos dispositivos móveis, que já davam suporte à uma navegação web palpérrima, mas que devíamos projetar nossas aplicações pra absorver essa demanda crescente.
Em 2011 ele publica o livro "Mobile First" pela A Book Apart (leia de graça, em inglês aqui). Em resumo, o foco desse livro é em:
- Vender pra uma industria print/web que mobile era o futuro
- Abordar os limites, capacidades e propriedades da web no telefone celular
- Indicar padrões de design e layout a se seguir pensando em um universo mobile
Antes de Ethan Marcotte popularizar responsividade com media queries dentro do CSS, a forma popular de fornecer experiências específicas pra mobile era definir media types pra cada link do CSS, assim cada dispositivo carregaria um arquivo de CSS apropriado.
<head>
<!-- ... -->
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="paper.css" media="print" />
<link rel="stylesheet" href="tiny.css" media="handheld" />
<!-- ... -->
</head>
O problema é que o media type de handheld demorou pra receber suporte dos navegadores mobile, e quando esses se tornaram capazes o bastante pra dar esse tipo de suporte, handheld era pouco popular, fazendo os navegadores mobile escolherem o media type de screen como padrão
Como media types não eram consistentes no meio mobile, Ethan sugere o uso de media queries dentro do CSS, que com base em outra media feature - max/min-width - definíamos novas propriedades de CSS, adaptando o layout.
Introduzir a mudança das media queries como atributos HTML que carregam links de acordo com os media types pra media queries dentro do arquivo de CSS com breakpoints indicando o tipo de dispositivo era um movimento natural com a evolução do working draft das media queries no CSS e da separação de responsabilidades de marcação e estilo do HTML. No livro, Luke junta o conceito de mobile first com essa visão:
“Through the application of fluid layouts, flexible media, CSS3 media queries, and (sometimes) a bit of JavaScript, responsive web design allows you to adapt to devices more significantly. With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.
This is accomplished by setting resolution “break points” and applying a different set of layout rules and media assets to each. A break point can be thought of as a conditional statement that determines if a device meets specific criteria like a minimum width of 600 pixels. If that condition is true, then the browser applies a different set of layout rules, usually through CSS, though sometimes with a little JavaScript as well.” - Mobile First, capítulo 7
Os não tão novos breakpoints
Se você programa assim, você está escrevendo CSS de 2011:
Mais pro final desse livro, o Um Anel do CSS, a tabela de screen devices inspirada no post de 2009 do Luke.
Percebe que essa tabela tem quase as mesmas media queries que as da maioria dos cursos de CSS que você já viu, ou das bibliotecas de estilo que já consumiu? Se essa tabela fosse uma pessoa, ela já estaria no ensino médio
O problema dessa solução não é ela ser antiga - responsividade com breakpoints foi criada em um momento histórico que não haviam recursos pra construir responsividade de forma robusta, mas já havia o desejo de não opinar na forma que o usuário navegaria no site.
Media queries eram utilizadas por serem uma das poucas formas de fazer com que o layout "respondesse" ao espaço disponível, jamais foi a intenção que ela se mantivesse a principal por tanto tempo, e ela só se manteve porque a comunidade não evoluiu junto com o CSS.
Em 2024 nós estamos reaproveitando esse conceito breakpoints, que nada mais são que expectativas sobre tamanhos de dispositivos pra que possamos forçar nossos layouts a se encaixarem nelas.
Expectativas essas que já estavam mortas na pluraridade de dispositivos que existiam em 2012.
Qual o melhor jeito?
O conceito de "melhor jeito" é uma forma preguiçosa de enxergar tecnologia e foi em partes responsável por manter soluções como breakpoints como bala de prata por tanto tempo. Procurar melhores jeitos é deixar de expandir o ferramental pra tomar decisões do que funciona pra cada caso de uso.
Após 2012 com a invenção do flexbox, conseguimos atribuir a qualquer container a habilidade de quebrar pra linha debaixo os elementos que não cabem no espaço disponível. Percebam como na menor resolução o conteúdo que eram várias linhas se transforma numa coluna
É comum que as pessoas tornem o layout flexível, mas o criem pra gerenciar componentes estáticos. Nesse bento grid que construi, ao invés de redefinir as medidas de cada célula e cada coluna por breakpoint, eu defini que proporção do layout esses elementos ocupam, os limites máximos e mínimos que devem respeitar e deixei o navegador detectar quando devem quebrar ou não.
Esse é um caso de uso simples, mas é comum que as pessoas usem media queries pra esse tipo de ajuste. Isso porque não basta que o container seja flexível, os componentes tem que ser.
Em Dao of Web Design (2000) de John Allsopp fala que pra criar designs que funcionem em qualquer navegador (e acrescento em qualquer dispositivo) precisamos sugerir sua aparência, não controlar.
No artigo Full-Bleed Layout Using CSS Grid do Josh Comeau, ele resolve uma das disposições de layout mais comuns com apenas poucas linhas de CSS - usando o grid pra calcular o espaço disponível da coluna central.
Esse layout de 2019 do artigo Look Ma, no media queries! cria uma galeria de cards completamente responsiva definindo os limites mínimos e máximos de cada coluna grid através da técnica RAM (Repeat, Autofit, Minmax)
Não faz mais sentido chutar uma largura de dispositivo e forçar seu layout a caber nele, hoje você pode criar layouts e componentes que vão se adaptar independente do contexto que você os aplique, basta sugerir seus limites.
O HTML por si só faz isso, basta não quebrar com CSS
Tudo bem você usar essa metodologia se construir de outras formas ainda for uma limitação pra você. Não tá tudo bem em 2024 ensinar e escrever sobre CSS como se a gente ainda tivesse em 2009. Já podemos parar de escrever sobre grid, flexbox e afins como grandes novidades.
Se você quer começar a ver um inédito viável dessa situação limite, pratique o ato limite da leitura. Você pode começar por essa lista de artigos que selecionei:
Allyhere
/
expert-css
Repositório contendo materiais de estudo de CSS avançado
Expert CSS
Uma lista de leituras de conceitos, tecnologias, padrões de arquitetura e práticas modernas de CSS muito além do básico.
CSS pode ser um pouco frustrante as vezes, principalmente porque ele demanda tanta dedicação quanto Javascript e seus frameworks. Visando entrega e funcionalidade, são poucas as oportunidades que temos de exercer práticas modernas de CSS, mesmo que em forma de melhoria contínua, então a leitura e a prática constante se fazem ainda mais importante.
Nesse repositório vou agregar leituras do que considero práticas avançadas de CSS - mas levem a palavra "avançado" não como uma tentativa de delimitar o que acredito ser complexidade, mas como uma sugestão pessoal com base em cursos que consumi e oportunidades que tive. Na minha experiência, talvez hajam pouquíssimos trabalhos que cobrem esse nível de CSS de você, arquitetura de CSS por assim dizer, então não se cobre tanto se o que você ler…
Top comments (5)
Isso aqui
"Não tá tudo bem em 2024 ensinar e escrever sobre CSS como se a gente ainda tivesse em 2009" me fez repensar sobre a forma que muitas coisas são ensinadas hoje em dia mas, pra manter no CSS, acho que a questão das "bases" precisa ser revista. Obrigada pelo conteudo incrivel 🤌🏻
Eu to sempre vendo cursos de CSS (tenho muita vontade de fazer um) e geralmente é uma reprodução pouco criteriosa mesmo que cuidadosa de um conteúdo que já é raso. Um dos cursos de CSS mais citados pra pessoas Jr dissemina como práticas atuais coisas documentadas na W3C em 2009 que só não foi atualizada, mas foi dada como certeza por ser da MDN. Isso não desinforma só os alunos como já li artigos afirmando as mesmas coisas bebendo da mesma fonte. É bem complicado
Top!
"Se você quer começar a ver um inédito viável dessa situação limite, pratique o ato limite da leitura." Passando a visão e espalhando a palavra, né, Pastor. 😎
A palavra do Paulão Freire hehehehehe