Quando se fala em layout responsivo, as pessoas, até as mais experientes recorrem imediatamente às media queries.
Layouts como o da imagem abaixo viriam com breakpoints determinados, que seriam reproduzidos na forma @media no código.
Nessa thread vamos aposentar as media queries
Há 10 anos atrás, quando íamos executar um layout, precisávamos de instruções precisas de como ele iria ficar nos dispositivos mais populares da época, protótipos como pequenos retratos - cada retrato de um tamanho, um breakpoint.
As media-queries definiam as posições de cada elemento de forma que quando a tela fosse do tamanho do viewport, o layout seria idêntico, e antes de atingir o próximo breakpoint ou anterior, o layout ficaria solto, se contentando apenas em caber naquele retrato sem overflow
Overflow é o fenômeno que acontece quando um conteúdo qualquer não cabe na caixa em que ele foi colocado, e isso pode acontecer por diversos motivos - ausência de box-sizing: border-box, width em %, etc
As media-queries são apenas uma válvula de escape pra fugir do overflow
O overflow acontece, pois declaramos 2 ou 3 retratos perfeitos via código, evitamos que a foto escape dos limites entre os breakpoints e -principalmente - definimos ou layout como se ele fosse uma reprodução estática e declarativa, não um algoritmo
O layout acima pode ser reproduzido usando uma margem horizontal automática e fixando os elementos do container pra que ele nunca seja maior que o breakpoint definido no media query.
Alteramos também o font-size
Ele basicamente diz:
"Quero que o container tenha 1224px,e que no viewport de 440px tenha 336px"
É uma forma de layout completamente declarativa.
Agora uma forma imperativa de descrever o layout seria assim:
A propriedade:
grid-template-columns: 1fr min(1244px,100%) 1fr
Está dizendo:
Quero que o layout fique em na coluna do meio
Se o espaço disponível for maior que 1244px, a largura será de 1244px, senão, 100%
As colunas da extremidade vão ocupar 1 unidade do espaço disponível cada
Pra criar layouts que são imperativos, intrínsecos, precisamos entender que as propriedades de CSS não declaram apenas fotografias estáticas de layout - hoje elas são capazes de declarar algoritmos completos.
E esses algoritmos não são simplesmente o uso de flexbox, grid e %
Eles são
- Tamanhos intrínsecos
max-content, min-content, fit-content e auto definem o algoritmo que o container utiliza pra controlar o conteúdo interno e evitar o overflow
Falei muito mais sobre isso nesse post
dev.to/lixeletto/alem-das-unidades-css-intrinsic-sizing-e-responsividade-gl
- Unidades relativas
E não só o uso delas, mas o entendimento de que relação delas com o contexto do layout vai trabalhar com o algoritmo desejado.
Ícones que escalonam com o tamanho da fonte podem usufruir de uma unidade relativa à fonte (No caso, `em` ou `ch`)
Se a escala tipográfica depende do viewport que ela está inserida, podemos nos beneficiar de unidades de viewport pra calculá-las
Ex:
smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
Inclusive, abordo mais sobre o que cada unidade proporciona nesse post
dev.to/lixeletto/entendendo-unidades-css-e-quando-utiliza-las-3ecc
- Wrapping (quebra de conteúdo)
Texto, flex-items e grids contém suas próprias lógicas de wrapping.
Pra texto, por exemplo, espaço em branco, hifenação e o algoritmo de limites (boundaries) do container definem essa quebra - conforme explico nesse artigo
dev.to/lixeletto/como-fazer-pro-texto-nao-quebrar-de-linha-no-css-5440
Elementos flex recebem como parâmetro um eixo e distribuem seus filhos de acordo com o espaço disponível - ou na mesma linha do eixo, tornando os flex-items elementos `min-content` ou mantendo o tamanho dos filhos e quebrando eles em outras linhas.
O grid permite que a quantidade de colunas seja definida pela quantidade de filhos (auto-fit e auto-fill), mas diferente do flex, o grid que define a largura dos filhos, usando suas colunas.
Esse é o princípio utilizado pelo RAM (repeat, auto-fit, minmax)
dev.to/lixeletto/padroes-de-layout-com-css-grid-2li0#:~:text=Grid%20da%20lista%20de%20cards%20%2D%20o%20RAM
- Limites
Definimos a responsividade de forma intrínseca não só no layout geral, mas como em seus componentes.
Ao invés de declarar o tamanho do componente em cada viewport, podemos usar uma unidade relativa ao contexto (auto, fit-content) ou ao pai (%) e +
Definir quão grande esse elemento pode ser e ainda permanecer legível (max-width) e quão pequeno ele pode ser antes que seu conteúdo dê overflow (min-width).
Podemos, em todos os navegadores modernos, resumir isso em um clamp()
`clamp(<min-width>, 100%, <max-width>)`
Se notarmos, flexbox segue um algoritmo parecido, só que ele leva em consideração os outros elementos no container (siblings)
`flex: <shrink> <grow> <basis>`
Isso não é magia, e já foi defendido pela Jen Simmons há 4 anos atrás - Intrinsic Layouts
youtube.com/watch?v=jBwBACbRuGY&ab_channel=AnEventApart
Pelo Josh Comeau ano passado
joshwcomeau.com/css/understanding-layout-algorithms/
Pelo Ahmad Shadeed ainda esse ano
ishadeed.com/article/responsive-design/
E o que sobra pras media queries em 2023?
- Redefinições bruscas de layout
- Experiências customizadas
- Ajustes pra edge cases
- Media features de acessibilidade (color-scheme, color-contrast, reduced-motion, etc)
Não sabe o que é media feature? Vem cá!
dev.to/lixeletto/a-anatomia-das-media-queries-1jn0
"Mas Cu, eu não sei fazer responsividade com media queries"
Tudo bem uai.
Layout intrínseco é um tópico que exige bastante estudo e, sinceramente, ninguém nunca me cobrou de quantas media queries eu usava, e provavelmente não vai cobrar você
A proposta dessa postagem é tanto fronts quanto designers entenderem que podem se beneficiar muito mais deixando o navegador calcular o layout do que tentando chutar generalizações de dispositivos pra produzí-los, ou declarar limites e comportamentos ao invés de definir padrões.
E que se antes breakpoints eram um lastro de controle que designers e webdesigners tinham sobre um número limitado de dispositivos, hoje é só um chute educado, do mar de dispositivos e formas de usar a web que existe ai fora
Existe uma vasta literatura de como pessoas exploraram formas diferentes de construir layouts robustos com poucas linhas de CSS, sem magia, sem float, sem table e com poucas media-queries. Inclusive compilei minhas favoritas nesse repositório aqui:
github.com/allyhere/expert-css#layout
Então n se acanhem ou se sintam mal sobre media-queries, mas entendam que existe um mundo muito vasto de layout pela frente, e que mesmo que infelizmente n haja muito incentivo do mercado pra se aprofundar dessa forma vc ainda pode se beneficiar do quanto isso facilitará sua vida
Falei que não era bait?
Pretendo transformar essa ideia em artigo, então dúvidas e críticas seriam incríveis. Espero ter despertado curiosidades.