ainda não é hora de media query
Durante a criação do frontend das aplicações podemos nos render a utilizar media query cedo demais, sem explorar tudo o que o css tem a oferecer.
Provavelmente, não precisamos utilizar, ainda, medias queries. A minha situação para esse artigo é para adaptar uma aplicação que já tenho de um portfólio.
Em Ye Olden Days of Webbe Development™️, se quiséssemos criar sites e aplicativos que fossem responsivos, isso significava escrever uma série de medias queries com base em breakpoints específicos do dispositivo e retrabalhar nosso conteúdo para cada tamanho. Os velhos tempos do portal web dev eram layouts baseados em tabelas.
Lentamente, vimos as práticas recomendadas em torno da escrita de media query mudar, por necessidade, de pontos de interrupção baseados em dispositivo para pontos de interrupção baseados em conteúdo à medida que mais e mais dispositivos surgiram em todas as formas e tamanhos.
Agora, com telas disponíveis em mais ou menos qualquer tamanho que você possa imaginar, é hora de mudar nossa abordagem mais uma vez — a era dos pontos de interrupção acabou e a era do design fluido chegou. Em vez de acertar um ponto e ajustar para um novo layout, nosso conteúdo deve sempre ser ajustado com base na quantidade de espaço disponível.
Felizmente, o CSS também percorreu um longo caminho desde então, mas muitos de nós nos acostumamos a apenas lançar uma media query ou cinco para tornar as coisas responsivas e nunca quebramos o hábito.
Agora que temos recursos CSS modernos como grid, flexbox, vh, vw, calc, clamp, min, max, aspect-ratio e mais, é hora de abandonar as media queries.
Diante desse avanço, temos que explorar o poder do css para construir aplicações que se adaptam aos dispositivos que estão sendo utilizados.
Iniciaremos no topo e desceremos da formatação de exibição geral até as unidades menores. Podemos refatorar as folhas de estilo antigas, há tecnologia para isso dar certo.
a era do design fluido
Vamos começar com algumas das opções de exibição responsiva mais populares, grade e flexbox. É importante entender a diferença entre eles e saber quando usar um ou outro. Ou serem usados juntos para complementar um ao outro!
Vamos nos concentrar em como eles funcionam e como você pode usá-los para lidar com o layout de elementos em sua página de uma forma que permita um ajuste natural e responsivo sem o uso de media query.
grid
grid é focado principalmente em criar uma grade com várias linhas e colunas que você pode preencher com elementos. Você faz isso criando um elemento <grid> de contêiner que você preenche com elementos filho.
Há um grande número de personalizações que você pode fazer nas linhas, colunas e células da grade, o que permite criar grades tão simples ou complexas quanto você possa imaginar.
Mas para nosso objetivo de criar designs simples e responsivos, vamos dar uma olhada nos recursos mais relevantes. A grid vem com a capacidade de repetir colunas ou linhas automaticamente, bem como ajuste automático, que dimensionará automaticamente suas colunas no espaço disponível.
O código abaixo:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
---
<div class="grid">
<div></div>
<div></div>
<div></div>
</div>Nessa situação, a grid transformará seu conteúdo em colunas que se encaixam naturalmente no espaço que você possui, com cada coluna tendo uma largura mínima de pelo menos 300px e uma largura máxima de 1fr.
O 1fr é uma nova unidade CSS que significa fração, que diz ao navegador para dividir o espaço uniformemente e dar a cada coluna uma fração desse espaço. Nesse caso, ele criará três colunas iguais, cada uma ocupando 1/3 do espaço disponível, mas nunca menor que 300px.
Se adicionarmos outra div, ou retirarmos uma, a grade tratará automaticamente do cálculo e ajustará a exibição. E se a tela for muito pequena para caber todas as colunas lado a lado ao mesmo tempo, ela automaticamente envolverá as colunas restantes na próxima linha.
Se você deseja criar um layout mais complexo usando grid, aqui estão alguns dos meus recursos de referência favoritos:
A Complete Guide to Grid, que oferece um detalhamento fantástico de todas as maneiras de personalizar sua grid— incluindo a criação de colunas de larguras variadas, definição de template areas, definição do gap entre as células da grid e muito mais.
Grid By Example é meu ponto de partida favorito quando estou procurando um ponto de partida para criar uma nova estrutura de grid.
E se você estiver procurando por um exemplo do mundo real de uma grade mais complexa, confira o arquivo frame.scss em the kendo-demo app, onde a grid CSS foi usada extensivamente para criar o menu frame que é usado em todas as páginas.
flexbox
O flexbox adota uma abordagem semelhante, mas não exatamente a mesma, para ajudá-lo a organizar seus elementos na página e ajustá-los automaticamente conforme necessário.
Em vez de criar uma grid completa com várias linhas e colunas, no entanto, o flexbox trata do posicionamento dos elementos filho em relação uns aos outros dentro do elemento pai.
Basicamente: se você precisa trabalhar em duas direções ao mesmo tempo (linhas e colunas) olhe para grid. Se você precisa se concentrar em uma direção (uma única linha ou coluna), é aqui que você deseja o flexbox.
Novamente, há muito o que analisar em termos de quando usar cada um e quais são as diferenças de aplicação, mas vamos deixar isso para o outro artigo.
Por enquanto, vamos nos concentrar em como o flexbox lida com a capacidade de resposta para você, para que você possa excluir essa media query desnecessária.
O principal ponto de interesse para isso é a propriedade flex-wrap. O Flex começará tentando encaixar tudo o que você escreveu em uma linha ou coluna, mas se isso não funcionar, você pode dizer ao flex para permitir o encapsulamento configurando flex-wrap para encapsular.
Se flex-wrap não for especificado, flex irá comprimir os elementos para mantê-los todos na mesma linha, se nenhum min-width for especificado para os elementos filhos, ou permitir que eles ultrapassem a visão, se um min-width é especificado.
.flex {
display: flex;
flex-wrap: wrap;
}
.flex > div {
width: 300px
}
---
<div class="flex">
<div></div>
<div></div>
<div></div>
</div>Basicamente, com grid e flex, você só precisa decidir se deseja que seu conteúdo seja compactado ou encapsulado e, em seguida, defina as propriedades de acordo! Ambas são boas ferramentas para ter em sua caixa de ferramentas para criar UIs responsivas.
Se você está procurando alguns recursos para dominar o Flexbox, aqui estão alguns dos meus favoritos:
Flexbox Froggy: um jogo divertido para ajudá-lo a dominar o que todas as diferentes propriedades fazem usando algumas ilustrações adoráveis de sapos.
FLEX: uma folha de dicas simples e visual para você consultar enquanto trabalha!
no meio do caminho: as propriedades CSS
O objetivo é explorar ao máximo os recursos do css para evitar a utilização de media queries.
Não é falar mal, mas sim, deixar essa fluidez da aplicação na autonomia da própria aplicação e não precisar ter que definir todos os breakpoints possíveis. O que torna custosa a construção e penesa a manutenção.
Assim que tivermos nosso layout geral no lugar, é hora de definir algumas propriedades específicas em nossos elementos — e boas notícias, não há necessidade de media queries aqui também!
aspect-ratio (proporção da tela)
Você sabia que existe uma propriedade CSS projetada especificamente para proporções? Isso é especialmente ótimo se você estiver lidando com vídeos ou imagens de grandes heróis, onde manter a proporção correta é muito importante.
Há um mergulho profundo fantástico nos truques de CSS, mas, em geral, é muito fácil de aplicar — tudo o que você precisa é dessa linha:
.video-wrapper { aspect-ratio: 16/9; }Se você definir um valor de width específico junto com a aspect-ratio, ele usará isso como base e gerará automaticamente o valor de height para corresponder (ou vice-versa).
No entanto, se você declarar uma width e uma height, ela irá honrar aqueles acima da aspect-ratio, então tenha cuidado!
min-height, max-height, min-width e max-width
Embora as propriedades min e max height e width possam ser substituídas em muitos casos de uso pela função clamp() (que veremos na próxima seção), elas ainda são CSS válidas e boas para se ter no bolso.
Eles também são fáceis, já que praticamente fazem exatamente o que dizem na lata:
.img {
width: 100%;
max-width: 50%;
min-width: 200px;
}Aqui, temos uma imagem que estamos dizendo em primeiro lugar para ocupar o máximo de espaço disponível, até a max-width, para que o padrão seja o maior tamanho de imagem possível.
Então, estamos dando alguns guide rails— não queremos que ocupe mais da metade do contêiner, mas também queremos ter certeza de que ainda é maior que um postage stamp, então também não queremos que seja menor de 200px de wide.
Nesse caso, definimos um valor absoluto apenas na extremidade pequena, porque sabemos exatamente o quão pequena a imagem pode ficar antes que ela se torne irreconhecível.
Agora, não importa como o navegador seja redimensionado, sabemos que nossa imagem sempre será tão grande quanto possível… sem ser ridiculamente gigante ou ilegível pequena.
Totalmente funcional: funções matemáticas
As funções matemáticas são uma adição mais recente ao CSS e incrivelmente poderosas.
Eles preenchem um vazio que os desenvolvedores de CSS reclamaram por muito tempo — a capacidade de calcular valores dentro de folhas de estilo e definir intervalos para propriedades.
Quanto mais cedo você puder dominá-los e colocá-los em uso em seu código, mais você se beneficiará!
clamp()
clamp() nos permite definir um valor base para uma propriedade, juntamente com maiúsculas e minúsculas para contê-la conforme ela se ajusta.
Esta é uma de nossas melhores ferramentas para abandonar as media queries, pois nos permite definir esses limites de resposta sem precisar definir pontos de interrupção específicos para isso.
Veja como funciona:
.img {
/* the format is `clamp(min value, base value, max value)` */
width: clamp(200px, 100%, 50%);
}Aqui está uma versão atualizada do nosso último exemplo — a imagem com as larguras mínima e máxima.
Somente aqui, estamos fazendo isso em uma linha usando clamp() dizendo à imagem para ocupar 100% do espaço disponível, mas nunca maior que a metade do tamanho do contêiner ou menor que 200px de largura.
calc()
Se você já olhou para CSS e desejou que tivesse mais matemática, calc() é para você. Ele nos permite fazer aritmética simples com unidades CSS, diretamente na folha de estilo.
Isso é ótimo para quando você precisa basear algo em uma unidade que não é absoluta. Você também pode usar variáveis CSS em seus cálculos, para maior flexibilidade!
Digamos que queremos criar colunas que são divididas uniformemente com base na largura atual do navegador:
.child { width: calc(100vw / 3); }Definir widths de 1/3 é difícil usando unidades de porcentagem por causa de toda a situação de repetição de .333 — mas agora, podemos apenas dizer “Sabe de uma coisa, CSS — você cuida disso!”
Aqui, pegamos a largura total da janela, dividimos por três e definimos isso como a propriedade largura do elemento filho.
min() and max()
Se você é fã de ter suas folhas de estilo lidando com o maior número possível de decisões, digite min() e max().
Eles funcionam de forma semelhante ao clamp(), mas em vez de definir um intervalo em ambas as direções, ele se concentra em apenas um de cada vez, permitindo definir o menor (ou maior) valor dependendo de como a matemática funciona.
Novamente, esta é uma ferramenta super útil para lidar com valores não fixos, que é uma daquelas coisas que você precisa fazer muito ao criar algo responsivo.
.img1 { width: min(30%, 200px) }
.img2 { width: max(50vh, 800px) }Nesse caso, estamos definindo as larguras para duas imagens diferentes — uma que gostaríamos de manter pequena e outra que gostaríamos que fosse grande.
min() avaliará se 200px é maior ou menor que 30% do contêiner atual e escolherá o menor valor.
max() fará a mesma comparação entre 50vh e 800px e automaticamente irá com o maior.
Todas as pequenas coisas: unidades CSS
É muito bom pensar sobre as coisas do ponto de vista de um pássaro, do jeito que precisamos ao colocar os elementos em nossa página, mas também não podemos esquecer dos pequenos — as unidades que especificam o tamanho para nossos vários propriedades.
Quando definimos tudo em unidades rígidas, como pixels, temos que ajustá-lo manualmente toda vez que precisarmos redimensioná-lo. Mas quando trabalhamos em unidades responsivas, podemos deixá-los fazer o trabalho por nós!
vw e vh
Duas das minhas unidades CSS responsivas favoritas e mais usadas são vh e vw — largura da janela de visualização e altura da janela de visualização.
Embora não haja sinal de porcentagem, vh e vw são realmente um tipo de medida baseada em porcentagem — 1vw é 1% da largura da janela de visualização.
Longe vão os dias em que as medições da janela de visualização tinham que ser obtidas por meio de window.innerWidth e window.innerLength (novamente, tempos escuros); agora podemos obtê-los automaticamente em nossas folhas de estilo.
Eles também serão atualizados automaticamente à medida que o usuário redimensionar a janela, portanto, também não há obstáculos para pular por lá.
vh é especialmente útil para aqueles momentos em que você deseja centralizar algo verticalmente ou colar algo na parte inferior da janela de visualização.
Portanto, para criar um elemento de contêiner que tenha sempre a altura e a largura exatas do navegador atual do usuário, tudo o que você precisa é:
.page-wrapper {
height: 100vh;
width: 100vh;
}rem e em
Se você ainda está definindo tamanhos de fonte em pixels, deixe-me apresentar a beleza das unidades rem e em.
O nome em na verdade vem de antigos padrões tipográficos de medida, baseados na largura da letra M na fonte (que também é de onde vêm as palavras em-traço e travessão — traços iguais à largura do M ou N personagens).
unidades em são uma maneira de definir o tamanho da fonte em relação ao tamanho da fonte do elemento pai. Então, você poderia fazer algo como:
.h2 { font-size: 2.5em }E isso definiria seus cabeçalhos h2 para 2,5 vezes o tamanho da fonte do corpo no elemento pai.
rem, por outro lado, permite que você declare o tamanho da fonte em relação ao tamanho da fonte raiz de toda a página. Na verdade, é isso que o R significa — raiz em.
Ambos rem e em funcionam da mesma maneira, a diferença é o que eles estão usando como tamanho base e dimensionamento baseado. Em geral, eu me inclino para rem sobre eles porque gosto da consistência que ele cria, mas se você deseja criar um design específico em uma área que difere do estilo geral, em será o que você deseja alcançar.
Se você está procurando um truque legal, você pode combinar vw com rem e clamp() para criar um sistema de tipografia fluida para sua aplicação:
p { font-size: clamp(1rem, 2.5vw, 2rem); }Aqui, definimos o tamanho da fonte base para 2,5vw (lembrando que 1vw é igual a 1% da largura da viewport).
Em seguida, defina os valores mínimo e máximo em ambos os lados para garantir que você não acabe em uma situação em que o texto se torne ilegível pequeno ou em uma situação em que o texto continue ficando maior.
Porcentagens
E, por último, mas certamente não menos importante, a humilde unidade percentual.
Se você for definir larguras manualmente por qualquer motivo (em vez de usar uma ferramenta de layout como grade ou flex), quase certamente desejará alcançar a % em vez de qualquer unidade de medida absoluta.
.container { width: 25%; }Este provavelmente não é um que você realmente precisa de um exemplo, mas apenas no caso — aqui temos um elemento que estamos configurando para ser 1/4 da largura de seu pai.
À medida que a largura do pai muda, esse elemento também se ajusta automaticamente. É simples, sim, mas fundamental para criar interfaces de usuário responsivas.
Responsividade
Se você ainda depende principalmente de media queries para garantir que seu site ou aplicativo seja totalmente responsivo, talvez seja hora de dar uma olhada em tudo o que o CSS tem a oferecer e ver se você pode trocar alguns desses pontos de interrupção antiquados por alguns dessas novas e fluidas abordagens de estilo.
Trabalhar para criar um layout totalmente fluido significa mudanças menos drásticas para o usuário quando ele alterna entre o celular e o desktop, além de menos trabalho de manutenção para você — não é mais necessário atualizar todos os pontos de interrupção sempre que houver uma alteração no design.
Aproveitar essas abordagens adaptáveis ao estilo e preparar-se para seguir o fluxo deu dinamismo ao comportamento da aplicação que estou fazendo e melhor entendimento do código de o que está fazendo o que e quando o que está acontecendo.
Além das citações durante o artigo para conteúdos que irão colaborar para o entendimento de quais recursos utilizar no css para deixar a aplicação ainda mais fluída, o link a seguir tem sido de muito ajuda e aprendizado nessa tarefa de poder do CSS.
A construção desse artigo foi a partir do meu desafio de refatorar o frontend de uma aplicação com o artigo a seguir.
Nesse artigo, vimos que há muito do css para aplicar no frontend antes de utilizar media query. Espero que tenha gostado. Deixe seu aplauso e até o próximo artigo.
