Neste artigo, Rachel Andrew discute situações em que você pode encontrar estouros no layout do site e explica como o CSS evoluiu para criar métodos de layout mais eficientes em situações em que o volume do conteúdo não é conhecido antecipadamente.
CSS foi projetado para tornar o conteúdo legível. Se você estiver visualizando um documento HTML marcado com títulos e parágrafos (sem CSS), ele será exibido em um navegador em um formato fácil de ler. Os títulos são grandes e em negrito e, entre os parágrafos, há espaço controlado pelas folhas de estilo incorporadas no navegador. No entanto, assim que precisar alterar o layout da página, você começará a assumir o controle do design com suas próprias mãos. Em algumas situações, isso significa que você assume o trabalho com elementos transbordantes.
Neste artigo, vou considerar diferentes situações nas quais podemos encontrar um estouro na web. Veremos como novos métodos de marcação e novos valores de CSS podem nos ajudar a lidar com estouros e criar designs menos frágeis. Também explicarei um dos conceitos fundamentais subjacentes ao design de CSS - evitando a perda de dados.
O que queremos dizer com estouro?
Se você voltar alguns anos (antes do advento de métodos de layout, como Flexbox e Grid), pense em como implementaria o exemplo mostrado abaixo. Um layout muito simples de três blocos com uma quantidade diferente de conteúdo, mas a borda inferior deve estar na mesma linha.
Usando float, essa tarefa aparentemente simples era impossível. Quando um bloco se torna simplificado (flutuante), ele não interage com seus vizinhos; isso significa que não há como descobrir qual é o próximo elemento mais alto e aumentar a corrente na mesma altura.
Às vezes, tentando alinhar elementos em uma única linha, os desenvolvedores definem uma altura fixa do bloco, tentando prever a quantidade de conteúdo possível para tornar a altura a mesma. Obviamente, a Web não é tão simples e, quando a quantidade de conteúdo era diferente ou o tamanho do texto aumentava, o texto começou a ir além da parte inferior do bloco. Isso foi um estouro.
Às vezes, as pessoas perguntam como podem impedir que muito conteúdo chegue ao site. O suporte técnico do meu CMS foi contatado por usuários que perguntaram como limitar o conteúdo por esse motivo. Eles disseram que esse conteúdo adicional "quebra o layout". Para aqueles de nós que entendiam que a impossibilidade de conhecer a altura dos elementos era a natureza fundamental do layout, eles nos forçaram a criar layouts que escondiam a ausência de blocos de igual altura. Uma solução comum era adicionar um gradiente com o efeito de desaparecer o conteúdo que ultrapassa os limites. Evitaríamos usar cores de fundo e molduras de bloco. Ou usaríamos técnicas de colunas artificiais para tornar a altura dos elementos iguais.
Essa incapacidade de controlar a altura de um elemento em relação a outros, portanto, influenciou o design da web - uma limitação técnica mudou a maneira como os sites foram projetados. Fico feliz que, com o advento do Flexbox e do Grid, esse problema não apenas tenha desaparecido, mas, por padrão, o comportamento desses novos métodos de layout estende os blocos para a mesma altura. O valor inicial da propriedade
align-items - stretch , devido ao qual os blocos são esticados até a altura da área da grade ou do contêiner Flex.
Além disso, o CSS Grid nos fornece uma boa maneira de atribuir um certo tamanho aos elementos, mas permitir que eles cresçam se necessário. Se você definir o tamanho da faixa (coluna ou linha) usando a função minmax (), poderá ver o tamanho mínimo e máximo. Definir as linhas para
minmax(200px, auto) significa que a pista sempre terá pelo menos 200px, mesmo se os elementos da grade estiverem vazios. No entanto, se o conteúdo do elemento da grade for superior a 200px, graças ao valor de
auto esse elemento poderá aumentar. Você pode vê-lo no exemplo abaixo. A primeira linha é 200px, pois não há elementos para aumentá-la. A segunda linha contém um elemento de grade, cujo conteúdo não se encaixa e o valor
auto começa a funcionar, devido ao qual a linha se torna maior que 200px.
A função
minmax() permite criar interfaces como se tivessem um tamanho fixo perfeito. Em um mundo ideal (quando a quantidade de conteúdo atende às expectativas), você obtém essas belas linhas idênticas. No entanto, se você adicionar conteúdo adicional, não haverá excesso, como se você definisse a altura da linha fixa como 200px. A cadeia será expandida; pode não ser exatamente o que você, como desenvolvedor, gostaria, mas não será ilegível.
Estouro de linha
O risco de transbordamento ocorre sempre que limitamos o tamanho dos elementos. No exemplo acima, descrevo uma restrição em uma dimensão de bloco que os usuários com linguagem horizontal perceberão como altura. No entanto, também podemos exceder o limite se limitarmos a largura do bloco. Isso é o que vemos no CSS: Meme impressionante.
O autor deste meme comentou
um post sobre
CSS-Trick sobre isso, dizendo:
Agora eu entendo o conceito de transbordamento um pouco melhor, mas naquele momento meu cérebro estava simplesmente deslumbrado com a incompreensão de por que alguém pensava que o comportamento padrão deveria apenas empurrar o texto para a direita do bloco, em vez de aumentá-lo, como as tabelas sempre faziam. .
Então, por que o CSS coloca o texto fora da caixa em vez de aumentar o tamanho do próprio bloco?
No meme, é obtido um estouro na direção da linha. A palavra "impressionante" é maior que a largura aplicada ao bloco, e é por isso que ela transborda. O CSS razoavelmente pressupõe que, se você der a um bloco uma certa largura, precisará de um bloco exatamente dessa largura. Talvez ele deva colocar um layout que se quebre se os blocos se tornarem maiores do que o definido.
Esse problema específico (ou seja, a necessidade de definir as dimensões para todos os elementos de layout e garantir que eles não excedam o espaço disponível total do contêiner) é o problema que os métodos modernos de layout resolvem para nós. Se imaginarmos que nosso bloco tem um tamanho especialmente selecionado para caber em uma linha com outros blocos em uma grade flutuante, hoje você pode optar por usar o Flexbox.
Usando um layout flutuante, você deve definir o tamanho de cada elemento - talvez antes de saber qual será seu conteúdo. Nesse caso, você pode achar que o conteúdo grande estará em contêineres pequenos e terá um espaço extra ao redor.
No entanto, se usarmos o Flexbox, podemos permitir que o navegador calcule quanto espaço dar a cada elemento. O Flexbox fornecerá itens maiores com mais espaço, enquanto os menores receberão menos. Essa distribuição de tamanho flexível significa que o bloco que contém a palavra "impressionante" aumentará para acomodar todo o conteúdo e o texto não vai além. Problema de estouro resolvido; esse comportamento é exatamente para o que o Flexbox foi criado. O Flexbox faz um ótimo trabalho com elementos de tamanhos diferentes e os organiza no layout mais apropriado para eles.
Fora do Flexbox, podemos dizer que nosso bloco deve ter o tamanho necessário para o conteúdo e não mais. A palavra-chave min-content pode ser usada como um valor para a propriedade width ou inline-size ao trabalhar com propriedades lógicas relacionadas a um fluxo. Definir largura: conteúdo mínimo e o bloco crescerá o suficiente para acomodar a palavra "impressionante".
Prevenção de perda de dados
A razão pela qual o bloco estourou (como no exemplo com uma palavra que se estende além do limite do bloco) é porque a propriedade
overflow tem um valor padrão
visible . Você pode (se quiser) controlar o estouro de uma maneira diferente. Por exemplo, usar
overflow: auto ou
overflow: scroll pode fornecer uma barra de rolagem ao bloco. Pode não ser o que você gostaria nesta situação, mas pode haver situações em que um bloco com uma barra de rolagem será apropriado.
Você também pode assumir que estava pronto para cortar o estouro usando
overflow: hidden . Você pode ter pensado que ocultar estouros seria melhor por padrão; no entanto, o fato de o CSS ter escolhido tornar o estorno por padrão visível (em vez de oculto) é a chave para o valor principal do desenvolvimento do CSS. Em CSS (como em muitas outras tecnologias), tentamos evitar a perda de dados. Quando falamos sobre perda de dados em CSS, geralmente falamos sobre a parte do conteúdo que não será visível. No caso de
overflow: hidden , o conteúdo que excede o bloco pai desaparece. Isso significa que não temos como chegar a isso, descobrir qual parte perdemos.
Em certas situações, isso pode ser um problema sério. Se você conseguiu tornar o layout tão frágil que o botão no seu formulário foi além da área visível, seus usuários não poderão enviar o formulário. Se o último parágrafo do texto for cortado, nunca saberemos como a história terminou. Além disso, o problema com os elementos que desaparecem é que nem sempre é óbvio que eles se foram. Como desenvolvedor, você pode não perceber o problema, especialmente se isso acontecer apenas com determinados tamanhos de área de exibição em um design responsivo. Seus usuários podem não perceber o problema - eles simplesmente não verão o apelo à ação ou pensam que o problema no qual não podem fazer um pedido está no dispositivo e eles simplesmente partem. No entanto, se os elementos forem excedidos onde não deveriam, você provavelmente perceberá isso. Ou, na pior das hipóteses, alguém que visite o site perceberá isso e informará você.
É por isso que, nos elementos CSS, estão transbordando desleixados e bastante perceptíveis. Ao ver explicitamente o estouro, é mais provável que você corrija o erro do que se o conteúdo em excesso estiver simplesmente oculto. No entanto, com a ajuda da propriedade overflow, você terá a oportunidade de tomar suas próprias decisões sobre o que deve acontecer. Se você deseja que o estouro seja cortado (que pode ser a solução certa em determinadas situações), use
overflow: hidden .
Perda e alinhamento de dados
As melhores ferramentas de nivelamento que recebemos nos últimos anos também podem levar à perda de dados. Considere uma coluna de elementos flexíveis que estão na borda da viewport e têm tamanhos diferentes. Quando alinhados com o valor
flex-start , os elementos se projetam para a direita. No entanto, quando centralizado no
center , o elemento mais amplo irá além dos limites da janela de visualização. Portanto, o alinhamento pode levar à perda de dados.
Para evitar a perda acidental de dados causada pelo alinhamento, o CSS agora possui várias novas palavras-chave que podem ser usadas em conjunto com as propriedades do alinhamento. Eles são definidos no Box Alignment, uma especificação que trata do alinhamento em todos os métodos de design, incluindo Grid e Flexbox. No momento, eles são suportados apenas no Firefox. No exemplo acima, se definirmos
align-items: safe center , o último item será justificado à esquerda, não centrado. Isso evitará a perda de dados causada pela centralização do elemento e, portanto, empurrará para fora da janela de exibição.
Se você precisar de alinhamento (mesmo que isso leve ao estouro), poderá especificar um
unsafe center . Nesse caso, você solicitou que o navegador realizasse o alinhamento de sua escolha, independentemente do que acontecer com o conteúdo. Se você possui o Firefox, pode ver dois exemplos: o primeiro com alinhamento seguro e o segundo com inseguro.
No
relatório , com base no qual escrevi este artigo, descrevi o layout como uma
constante luta contra o estouro . Uma das verdades de design da Web é que é muito difícil saber o tamanho do elemento que contém o texto. No entanto, como mostrei acima, nunca tivemos tantas maneiras de controlar estouros ou estouros. Isso significa que nosso layout pode ser muito mais sustentável e podemos criar modelos que funcionarão com diferentes quantidades de conteúdo. Isso pode parecer apenas pequenas mudanças, mas acho que as oportunidades que elas abrem para nós são enormes.