0

Um guia para depuração CSS

Junior Martins
Junior Martins

Autor: Stephanie Eckles (https://www.smashingmagazine.com/author/stephanie-eckles/)

Fonte: https://www.smashingmagazine.com/2021/10/guide-debugging-css/


RESUMO RÁPIDO ↬ Depurar em CSS significa descobrir qual pode ser o problema quando você tem resultados de layout inesperados. Veremos algumas categorias nas quais os bugs costumam se enquadrar, ver como podemos avaliar a situação e explorar as técnicas que ajudam a prevenir esses bugs.


Todos nós já estivemos lá, no final da conclusão do CSS para um layout e - o que é isso? Ah! Uma barra de rolagem extra! Ou talvez um elemento seja uma cor inesperada. E em alguns navegadores, esse novo recurso simplesmente não parece estar funcionando.

Depurar - independentemente do idioma - nunca é uma tarefa favorita. CSS, como outras linguagens, torna-se mais fácil de depurar quando você dedica um tempo para aprender um pouco sobre suas peculiaridades. Também ajuda a se familiarizar com as ferramentas para ajudá-lo a depurar e evitar a criação de bugs.


Causas Comuns De Bugs CSS  #

A primeira etapa da depuração é dar um passo para trás e identificar a causa principal do problema. Na minha experiência, os problemas de layout CSS geralmente se enquadram em uma das seguintes categorias:

  1. Excesso de conteúdo de seu pai, resultando em barras de rolagem extras ou inesperadas e o conteúdo sendo empurrado para fora da área normal da janela de visualização.
  2. Herdar inconsistências do navegador, levando a resultados mistos entre navegadores e dispositivos.
  3. Herança inesperada da cascata onde vários estilos se sobrepõem, o que pode causar problemas de alinhamento e espaçamento, entre outras coisas.
  4. Falhas de resiliência CSS de alterações de DOM , incluindo quando os elementos filho ganharam divs envolventes ou elementos adicionais são adicionados inesperadamente.


Vamos revisar a depuração de cada categoria, aprendendo os culpados comuns para esses problemas e ver como usar ferramentas de desenvolvimento e outros métodos para identificar os estilos ofensivos. Claro, discutiremos as possíveis soluções para esses bugs também.


Dicas Gerais De Depuração  #


Quando algo der errado no seu CSS, você pode começar usando o DevTools integrado do seu navegador favorito para:

  • desative as regras uma de cada vez
  • desative todas as regras e traga-as de volta uma de cada vez
  • remover ou realocar elementos


Devido à natureza global do CSS, o estilo problemático de um elemento pode estar localizado em seu pai, avô ou até mesmo no topo da árvore. DevTools exibirá as regras mais aplicáveis ​​ao elemento com base na especificidade na parte superior do painel e, em seguida, fornecerá um rastreamento de pilha da cascata e dos estilos herdados.

Uma visualização dos estilos exibidos no Edge DevTools para um elemento de link mostrando a cascata de três regras aplicadas

Visualização grande )


Você também pode tentar isolar o problema de layout específico colocando apenas essa parte em um arquivo local ou usando um editor online como CodePen ou CodeSandbox. Esteja ciente de que usar esses editores pode inserir opiniões extras que seu ambiente local não tem. Por exemplo, o padrão do CodePen é usar a redefinição Normalizar, o que pode introduzir novos problemas se você ainda não estiver usando. Desative todas as configurações que não funcionam para o seu projeto. Em seguida, você pode usar DevTools para copiar no HTML relevante.


Depois disso, outro recurso útil é abrir o menu de contexto (“clique com o botão direito” ou equivalente) para o seu elemento e, em seguida, selecionar “Copiar> Copiar estilos” no menu. Repita para cada elemento aninhado conforme necessário.

Visualização do menu descrito para selecionar estilos de cópia

Visualização grande )


Se o problema não existir mais após isolá-lo, é provável que um elemento ancestral esteja causando as dificuldades. Você pode escolher isolar começando de um ponto mais alto na árvore DOM ou provavelmente precisará inspecionar a herança mais de perto. Falaremos sobre herança um pouco mais adiante.


Se você puder resolver o problema em seu componente isolado, poderá trazer os estilos atualizados de volta para a folha de estilo do projeto principal.

O painel “Mudanças” como mostrado no Firefox, neste caso indicando uma mudança nas margens para a regra do parágrafo.

O painel “Mudanças” como mostrado no Firefox, neste caso indicando uma mudança nas margens para a regra do parágrafo. ( Visualização grande )


Chrome, Edge, Firefox e Safari também têm uma maneira de rastrear as alterações feitas e salvá-las para facilitar a cópia de quaisquer atualizações.

  • Chrome / Edge
  • Use o menu “kebab” more para selecionar “More Tools> Changes” para abrir esse painel. Além disso, você pode persistir em suas alterações usando o recurso de substituições locais .
  • Firefox
  • O painel “Alterações” já deve estar disponível por padrão e próximo à guia “Computado”.
  • O Safari
  • também oferece o painel “Mudanças” por padrão, localizado na mesma barra de abas de “Estilos”.


Leitura recomendada : “ Examine e edite CSS ,” Ferramentas de desenvolvedor do Firefox, MDN Web Docs

Mais ideias, dicas e ferramentas serão discutidas a seguir.


Estouro De Depuração  #

O estouro geralmente é um dos problemas mais aparentes e pode ser muito frustrante. Nem sempre é evidente à primeira vista qual elemento está causando o estouro e pode ser tedioso tentar vasculhar os elementos usando os inspetores de ferramentas de desenvolvimento.


“CSS é projetado para não perder conteúdo, para não causar danos. Para não causar danos, mostramos o que transborda por padrão. ”

- Miriam Suzanne, Por que o CSS é tão estranho? (vídeo)


Pensando nisso de outra forma, o infame meme de “CSS is Awesome” é, na verdade, um comportamento correto e intencional se a caixa base foi propositalmente definida menor do que o tamanho necessário para acomodar aquele texto. (Se você estiver interessado, o criador original, Steven Frank, parou por CSS Tricks para explicar a origem ).

No gráfico criado por Steven Frank, todas as letras maiúsculas sem serifa pretas para a frase CSS é incrível aparecem empilhadas, com a palavra 'incrível' transbordando de uma pequena caixa preta com contorno.

Visualização grande )


Um método testado e comprovado para começar a descobrir qual elemento é responsável pelo estouro é adicionar o seguinte CSS:

* { outline: 1px solid red; } 


Por que em outlinevez de border? Porque não será adicionado ao tamanho do DOM calculado do elemento. Adicionar bordas mudará a aparência do elemento se eles já estiverem usando uma borda e pode causar falsamente problemas de estouro adicionais.

Resultados de pesquisa do Google para 'css' com um contorno vermelho adicionado a cada elemento, revelando a estrutura das caixas de elemento que compõem a página.

Visualização grande )


A intenção de usar outlineé revelar os limites dos elementos e visualizar como os elementos são aninhados. Por exemplo, se o estouro estiver causando barras de rolagem inesperadas, um contorno pode ajudar a apontar qual elemento está sendo empurrado para fora da janela de visualização.

Além deste método manual, o Firefox revela elementos de rolagem e especifica quais elementos têm filhos causando estouro, como visto nesta captura de tela.

O HTML tem uma marca indicadora de rolagem, observando que ele se tornou uma região rolável, e principal tem uma marca indicadora de estouro porque um dos parágrafos se expande além de seus limites


O HTML tem uma marca indicadora de scroll, observando que ele se tornou uma região rolável, e principal tem uma marca indicadora de overflowporque um dos parágrafos se expande além de seus limites. ( Visualização grande )


CAUSAS COMUNS DE ESTOURO  #

Normalmente, quando estamos preocupados com problemas de estouro, é devido a uma incompatibilidade de tolerâncias de largura entre um elemento pai e seus filhos.

Uma das primeiras coisas a verificar é se um elemento definiu um absoluto widthsem um método responsivo para permitir que ele seja totalmente redimensionado para baixo. Por exemplo, uma 600pxcaixa irá disparar overflow em viewports mais estreitas do que 600px. Em vez disso, você pode ajustar para adicionar um max-width: 100%para que o elemento também seja redimensionado de forma responsiva:

.wide-element { width: 600px; max-width: 100%; } 


Um exemplo de quando isso não seria uma solução completa é quando o elemento que dispara o estouro também tem margens que aumentam seu tamanho calculado dentro de seu pai. No exemplo a seguir, o parágrafo ainda é forçado para fora do mainelemento devido à sua margem horizontal.

Um pequeno exemplo de código mostra um parágrafo com uma largura definida de 800px, estourando o contêiner pai, que possui uma largura máxima mais estreita de 80 canais.

Visualização grande )

Felizmente, podemos contabilizar essa margem usando a função matemática CSS calcpara subtrair a área total usada pelas margens horizontais:

p:first-of-type { width: 800px; max-width: calc(100% - 6rem); margin: 3rem; } 


Agora, dito isso, não é sempre que deveríamos fornecer larguras absolutas para os elementos. Mais frequentemente, seria melhor definir apenas max-widthse você precisa controlar o tamanho de um elemento. Novamente, isso reduz bugs relacionados ao dimensionamento responsivo. Na verdade, podemos resolver completamente os problemas do nosso exemplo removendo os valores widthmax-width, o que permite que o comportamento padrão do parágrafo permita que ele se ajuste apropriadamente dentro do espaço disponível do mainpai.

No entanto, há situações em que as soluções que examinamos fazem sentido, como a aplicação max-width: 100%para criar imagens responsivas. E para alguns métodos de layout baseados em flexbox, você também verá widthou flex-basisutilizará calcpara a razão de contabilizar a margem.

Outro gatilho comum para estouro tem a ver com um dos erros reconhecidos no design de CSS pelo Grupo de Trabalho de CSS. Número 6, na verdade, que box-sizingdeveria ter sido o padrão em border-boxvez de content-box.

Todos os navegadores atualmente são enviados com a decisão legada de definir o modelo de caixa de elemento a ser usado content-box, o que significa que a borda e o preenchimento de um elemento são adicionados ao cálculo do tamanho do elemento. Portanto, se você definir dimensões absolutas para largura e / ou altura, será necessário considerar o espaço extra para qualquer borda e preenchimento adicionados.

Para simplificar esse comportamento, uma prática recomendada é garantir que seus estilos incluam a redefinição de todos os elementos a serem usados border-box. Isso reduz a chance de estouro em muitos casos e torna o layout CSS mais previsível devido à remoção de complicações da inclusão de bordas e preenchimento nas dimensões finais do elemento.

*, *::before, *::after { box-sizing: border-box; } 


Outras causas de estouro se encaixam um pouco melhor nas categorias de bugs que analisaremos a seguir.


Depurando Inconsistências Do Navegador  #

Embora estejamos vivendo em uma era de ouro de quase paridade entre navegadores para recursos críticos, ainda existem algumas opções de legado que podem interferir. Cada navegador vem com uma folha de estilo padrão chamada estilos de agente do usuário (UA) .


Aqui está um exemplo de como esses estilos aparecem nos navegadores principais:

De cima para baixo: estilos de agente de usuário do Firefox, Safari e Chrome para a propriedade de margem do corpo

De cima para baixo: estilos de agente de usuário do Firefox, Safari e Chrome para a propriedade de margem do corpo ( visualização grande )


Isso está destacando um daqueles padrões que podem ser outro gatilho comum para estouro. O bodyelemento tem margem anexada em todos os navegadores, com os principais conforme comentados:

body { /* Chromium and Firefox */ margin: 8px; /* Safari/webkit */ margin-top: 8px; } 


Você deve estar familiarizado com o conceito de redefinição de CSS. Eles evoluíram ao longo dos anos, à medida que o CSS e o suporte do navegador melhoraram, mas a redefinição bodypara trás margin: 0geralmente é um recurso.


Se você usar CodePen, a redefinição padrão é Normalize.css , de autoria de Nicolas Gallagher e inicialmente lançada em 2012. Ele pode ser encontrado em muitos, muitos projetos e é uma redefinição bastante teimosa. No entanto, é importante notar que ele não foi atualizado desde novembro de 2018.


Observação : outra observação oportuna aqui é que o Internet Explorer chegará ao fim da vida oficialmente em 15 de junho de 2022 ). Isso significa que muitos recursos são necessários não apenas nas redefinições, mas em nossas folhas de estilo, em geral, não serão mais necessários!


CSS tem melhorado rapidamente nos últimos anos e, claro, os navegadores estão se modernizando continuamente. Uma redefinição alternativa que se encaixa melhor com projetos mais modernos é a redefinição CSS moderna de Andy Bell . Essa redefinição é suficiente para suavizar o punhado de coisas comuns à maioria dos projetos que ainda são inconsistentes entre navegadores, embora não sejam excessivamente opinativas. Ele também considera alguns recursos básicos de acessibilidade. Andy explica cada regra de reinicialização, e descobri que é um ponto de partida sólido.


Vejamos algumas inconsistências do navegador moderno que podem causar erros de layout.


EXCESSO DE UNIDADES DA JANELA DE VISUALIZAÇÃO E BARRAS DE ROLAGEM  #


Sem remover o marginno body, nosso exemplo simples da seção de estouro dispara o estouro. Isso porque usamos 100vwcomo um dos valores possíveis para o widthdo mainelemento. Como não está subtraindo o margin, ele experimenta transbordamento por 100vwser 16pxmais largo do que o espaço disponível entre as margens do corpo.


Dependendo do navegador e do sistema operacional, você também pode perceber que as larguras da barra de rolagem do navegador também atrapalham o 100vwcálculo. Atualmente, a correção é atualizar para 100%se você puder. Em breve também teremos a scrollbar-gutterpropriedade para nos ajudar a contabilizar as larguras da barra de rolagem. Esta propriedade está sendo estendida no CSS Overflow Module nível 4 e ganhou suporte nos navegadores Chromium a partir da versão 94.

Bramus tem um excelente detalhamento scrollbar-gutter de como funcionará e o que ajudará a resolver. O resumo da solução é certificar-se que sair para barras de rolagem ao conseguir uma aparência lacuna mesmo em ambos os lados do conteúdo, acrescentando: overflow: auto; scrollbar-gutter: stable both-edges;.


Nota : Se você não tiver certeza de que seu conteúdo requer barras de rolagem, mas sabe que às vezes pode precisar delas, certifique-se de usar o autovalor para estouro. Isso diz ao navegador para adicioná-los apenas quando o elemento precisar deles para acomodar o conteúdo. Dito isso, os usuários podem personalizar suas preferências para sempre mostrar as barras de rolagem, e é por isso que a scrollbar-gutterpropriedade terá um valor extra!


Também pode ser problemático definir min-height: 100vhno corpo sem remover a margem primeiro. Existem outros problemas 100vhespecificamente relacionados a como diferentes dispositivos e combinações de navegadores implementaram o cálculo 100vh.

Embora 100vhpareça funcionar na maioria dos contextos da área de trabalho, você pode ter sentido a frustração de ter um comportamento que parece inesperado, principalmente quando testado no iOS em navegadores WebKit. Em um layout fixo definido como 100vh, a parte inferior do conteúdo do site fica presa atrás do cromo do navegador, tornando-o inacessível quando a rolagem é impedida. Por exemplo, em um menu móvel de altura fixa ou um aplicativo ou jogo de página única tentando preencher não mais do que a altura disponível da janela de visualização.


Matt Smith foi buscar uma solução e descobriu em alguns cenários que o 100vhproblema pode ser resolvido usando a seguinte combinação:

html { height: -webkit-fill-available; }  body { min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; } 


Esta solução é imperfeita, e sugiro testar em um dispositivo real para garantir que funciona para o seu layout.


Jen Simmons também compartilhou uma técnica (timestamp: 13m) que está disponível no Safari 15 para ajustar esse comportamento com a ajuda de variáveis ​​de ambiente CSS. O safe-area-inset-bottomserá 0quando não aplicável e ajustar dinamicamente quando for aplicável. Esta variável de ambiente pode ser usada para preenchimento, margem e dentro, calcconforme mostrado:

body { min-height: calc(100vh — env(safe-area-inset-bottom)); } 


O CSS Working Group tem uma solução melhorada em rascunho para abordar esta categoria de problemas, que será um conjunto de novas unidades para “ tamanhos de janela de visualização grandes, pequenos e dinâmicos ”. A intenção deles é corresponder melhor ao comportamento dinâmico do cromo do navegador em mudança, pois é a causa dos problemas do WebKit.


Aqui está um resumo do rascunho atual (observe que eles ainda podem ter algumas alterações antes de se tornarem estáveis ​​nos navegadores):

  • Pequenas unidades de porcentagem da janela de visualização (svh, svb, svw, svi)
  • Equivalente ao espaço restante da janela de visualização quando todos os elementos dinâmicos da IU são expandidos (ex. Barra de URL e teclado virtual) e não mudará seu valor mesmo com as mudanças no cromo do navegador.
  • Unidades de porcentagem de janela de visualização grandes (lvh, lvb, lvw, lvi)
  • O tamanho oposto a pequeno, calculado para assumir que todos os elementos dinâmicos da IU estão retraídos.
  • Unidades de porcentagem da janela de visualização dinâmica (dvh, dvb, dvw, dvi)
  • O valor instável do espaço da janela de visualização visível que muda junto com as mudanças dinâmicas do cromo do navegador.



PROPRIEDADES DO ELEMENTO DE TIPOGRAFIA  #


Os estilos UA também incluem estilos padrão para elementos tipográficos comuns, como cabeçalhos, parágrafos e listas. Normalmente, as redefinições ou estruturas de CSS já terão abordado essas coisas. E, embora você possa não considerar as diferenças nessas propriedades como “bugs”, é útil entender que eles não são os mesmos padrões em todos os navegadores, uma vez que esses estilos são alguns dos mais impactantes.


A observação principal aqui é que se você notar uma inconsistência, você pode querer selecionar seu valor preferido (como um particular font-sizepara um h1) e adicioná-lo à sua folha de estilo.


DIFERENÇAS NO SUPORTE DE RECURSO DO NAVEGADOR  #

As diferenças do navegador no suporte a recursos são a categoria mais frustrante, desde os navegadores modernos até o início do CSS. Simplesmente, nem todos os navegadores suportam todas as propriedades CSS da mesma forma.


Conforme mencionado anteriormente, estamos em um momento de quase paridade de recursos, mas também em um momento de rápido desenvolvimento e crescimento da linguagem CSS. Portanto, os problemas que temos devido ao suporte a recursos estão diminuindo, mas, ao mesmo tempo, estamos em um padrão de espera enquanto esperamos que os novos itens cheguem à disponibilidade geral.


Felizmente, temos várias ferramentas disponíveis para ajudar a pesquisar o suporte de recursos durante o desenvolvimento e para ajudar a resolver inconsistências.


Aquele que você já deve conhecer é o caniuse , que lista tabelas de suporte para recursos CSS e JavaScript. A advertência a ser observada aqui é que os dados de uso do navegador são baseados no Statcounter , uma amostra de 2 milhões de sites. As porcentagens, portanto, podem não corresponder ao seu público e devem ser apenas um ponto de dados na tentativa de determinar se é “seguro” usar um determinado recurso para o seu projeto.


Outra ferramenta útil é o webhint de extensão VSCode , que também está ativando parte do painel Problemas no Edge. O Webhint alerta sobre recursos que podem ter suporte inferior ao navegador para ajudá-lo a estar ciente durante o desenvolvimento. Você pode configurar quais navegadores são considerados incluindo um browserslistem seu pacote.

Saber sobre o suporte de recursos durante o desenvolvimento o ajuda a fazer uma solução informada. Mas às vezes, não é sobre se um recurso é estritamente compatível, mas se a propriedade passou por alterações de sintaxe ou não. Por exemplo, às vezes as propriedades são lançadas com “prefixos de fornecedor”. Você provavelmente já viu estes - aqueles que começam com -webkitou-moz.


Normalmente, a versão estável da propriedade não continua a ter um prefixo, mas é melhor incluir a versão prefixada para obter o suporte mais amplo. Felizmente, você pode automatizar essa etapa em vez de fazê-lo manualmente com o popular pacote autoprefixer. Além disso, há suporte para incluí-lo em muitos processos de construção, como postCSS (o método que uso). Como o webhint, ele examina seu browserlistpara determinar qual nível de suporte fornecer propriedades prefixadas.


Além dessas ferramentas, cada ferramenta de desenvolvimento do navegador tem um método para indicar quando o navegador não oferece suporte a uma propriedade. Chromium, Safari e Firefox mostram um triângulo de aviso amarelo ao lado de algum outro estilo e uma propriedade disparada por foco para denotar uma propriedade sem suporte.

De cima para baixo: Ferramentas de desenvolvimento do Chromium, Firefox e Safari indicando falta de suporte para cor lch, com o Safari também não suportando proporção de aspecto.

De cima para baixo: Ferramentas de desenvolvimento do Chromium, Firefox e Safari indicando falta de suporte para cor lch, com o Safari também não suportando proporção de aspecto. ( Visualização grande )


Rever como lidar com a falta de suporte para um recurso está um pouco além do escopo deste artigo. E fornecer recursos alternativos, se necessário, ou configurar soluções como aprimoramentos progressivos, será algo único. É por isso que configurar-se com ferramentas para ajudar a verificar o suporte durante o desenvolvimento é tão importante. Em seguida, você pode criar uma solução que se ajuste ao nível de suporte de que você precisa, em vez de ter uma solução completa que terá de depurar e definir um fallback assim que obtiver os relatórios de bug.


Herança Inesperada De Layout Em Cascata  #


Ok, então você sente que está usando recursos CSS bem suportados. E você acabou de adicionar uma nova seção ao seu site e se sente bastante confiante quanto ao CSS. Mas quando você vai olhar para ele no navegador, as coisas parecem incorretas.


Particularmente ao usar uma estrutura ou sistema de design e também escrever CSS customizado, podemos encontrar bugs relacionados à cascata e herança. Algo que funciona isoladamente pode não funcionar quando colocado em um layout de tela.

Felizmente, todas as ferramentas de desenvolvimento do navegador permitem rastrear a cascata. Revendo o painel Estilos, podemos ver quais regras estão substituindo nossos estilos. Ou podemos localizar um pai que está adicionando um método de layout que não esperávamos para nosso componente filho.


Este exemplo simples mostra que a regra para main *é “ganhar” a cascata de aplicação colordo parágrafo. As ferramentas de desenvolvimento manipulam a ordem no painel Estilos para mostrar os estilos mais aplicáveis ​​na parte superior. Então, podemos ver que a propriedade de cor para apenas pestá riscada como um indicador extra de que essa definição de regra não é aplicada.

Ferramentas Dev mostra que a regra para principal é aplicada em vez de p para o parágrafo selecionado, tornando-o um azul marinho em vez de cinza.

Ferramentas de desenvolvimento mostram que a regra para main * é aplicada em vez de ppara o parágrafo selecionado, tornando-o azul marinho em vez de cinza. ( Visualização grande )


Vamos voltar rapidamente aos fundamentos do CSS na cascata. Para este exemplo, alguns de vocês podem ter percebido que main *tem especificidade igual a p. Mas a outra parte crítica da cascata é a ordem das regras, e aqui está a ordem da folha de estilo para o exemplo:

body { color: #222; }  p { color: #444; }  main * { color: hsl(260, 85%, 25%); } 


Se quisermos ter certeza de que a regra apenas p"vence", precisamos ter certeza de que ela segue a mainregra ou aumentar sua especificidade.


Este recurso básico do CSS é extremamente poderoso, mas pode ser percebido como um “bug” se você não estiver familiarizado com seu funcionamento. E certamente pode ser frustrante se você tiver a tarefa de implantar um novo recurso em uma base de código legada ou usar uma estrutura em que seja mais desafiador contornar a especificidade herdada.


Resolver problemas devido à cascata geralmente não tem uma resposta fácil. Vale a pena dar um passo para trás do problema imediato e examinar as camadas de estilos que se unem para identificar o melhor lugar para fazer uma mudança. Reconheça que um !importantpode causar mais problemas relacionados à especificidade no futuro, portanto, tente reordenar as propriedades, se possível, primeiro. Ou você pode mudar para a configuração de “componentes”, que fornecem uma camada de escopo para estilos e encorajam ser mais intencional sobre herança.


Falando em camadas - acelerar o processo de especificação é outro novo recurso que foi projetado especificamente para ajudar a orquestrar a cascata e aliviar confrontos. No momento, a especificação Cascade Layers (@layer) ganhou suporte experimental em todos os principais navegadores. Para obter mais informações sobre esse próximo recurso, verifique a excelente visão geral sobre camadas CSS de Bramus .


Observação : certifique-se de verificar os recursos no final deste artigo para alguns links relacionados à verificação da especificidade do CSS.


Falhas De Resiliência CSS De Alterações De DOM  #


Às vezes, uma solução CSS cuidadosamente elaborada para de funcionar. Na minha experiência, isso geralmente acontece devido à alteração subjacente do DOM. Quando adicionamos CSS com base no DOM atual, nossa solução não é resiliente a mudanças.

Por exemplo, se criarmos uma regra de layout de grade para uma lista definida como .grid lie, em seguida, a estrutura DOM mudar para um conjunto de articleelementos, o CSS será interrompido.


Ou, se configurarmos uma série de ícones que se encaixam perfeitamente no espaço original, mas o cliente precisa adicionar um ícone, e isso causa estouro.


Esses exemplos realmente mostram por que CSS é uma habilidade valiosa. Se você puder escrever CSS escalonável e independente de DOM, suas soluções serão escalonadas e você reduzirá a probabilidade dessa categoria de bugs.


Semelhante à criação de uma API em outra linguagem de programação, vale a pena considerar como suas regras CSS serão usadas além do problema atual que você está resolvendo. 


Depurar essa categoria geralmente significa rastrear as regras originais para ver se elas podem ser estendidas para funcionar no contexto atualizado. Novamente, você pode usar as ferramentas de desenvolvimento para encontrar as regras aplicadas e até mesmo seguir o link de referência para ir até a fonte.


Observação : para obter mais dicas sobre como lidar com essa categoria com itens específicos a serem considerados, revise meu artigo sobre estilos CSS à prova de futuro .


Trocas De Layout Para Ajudar A Evitar Bugs CSS  #


Vejamos alguns exemplos específicos que podem causar bugs de layout e como resolvê-los.


LAYOUT DE ESPAÇAMENTO  #


Depois que o flexbox foi introduzido, muitas soluções de layout de grade foram lançadas e todas tinham um pouco de matemática para calcular a largura dos filhos flex. Além disso, essa largura tinha que estar atenta à adição de marginpara adicionar espaço entre os filhos.


Boas notícias : gappropriedade do flexbox agora é compatível com todos os navegadores permanentes!


A grade CSS também oferece suporte à gappropriedade. A vantagem de gapover marginé que sempre se aplica apenas entre os elementos, independentemente da orientação. Portanto, não há mais negócio funky de tentar anexar marginao lado “correto” ou ter que usar margem negativa no pai para neutralizar a margem aninhada.


Ao contrário margin, o uso de gaptem menos probabilidade de causar estouro, pois nunca se aplica à borda externa dos elementos. No entanto, você ainda pode experimentar estouro se os filhos não puderem redimensionar para uma largura mais estreita.


LIDANDO COM LARGURAS DE ELEMENTOS  #


Se seus filhos flex ou grid estão causando estouro, aqui estão dois métodos que você pode tentar como atualizações.


Para flex, certifique-se de usar em flex-basisvez de widthe de que o flex-shrinkvalor está definido como 1. Essas propriedades garantirão que o tamanho do elemento seja permitido.


Para grade, um método que costumo usar para obter comportamento de quebra automática para filhos de grade é o seguinte:

grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr)); 


Mas, isso evita que os elementos encolham abaixo da largura mínima de 30ch. Então, em vez disso, podemos atualizar para esta solução que mantém nosso mínimo em janelas de exibição maiores / dentro de pais maiores, enquanto ainda permite que os elementos filhos encolham em espaços mais estreitos:

grid-template-columns: repeat(auto-fit, minmax(min(100%, 30ch), 1fr)); 


Costumo achar as funções CSS muito úteis nesses tipos de cenários. Se você não conhece, pode gostar de meu artigo sobre os usos práticos das funções CSS .


Fora de um contexto de grade ou flex, podemos obter um comportamento semelhante para os elementos para evitar a definição de uma largura absoluta. Discutimos na seção de estouro como os absolutos costumam causar problemas. Mas, é claro, há momentos em que queremos fornecer alguns parâmetros de largura. Mais uma vez, meu método preferido para definir uma largura flexível usa a função CSS de min(). Neste exemplo, é uma espécie de atalho para definir ao mesmo tempo widthmax-widthao mesmo tempo. A min()função usará o menor valor calculado, que muda dinamicamente conforme o contexto do elemento muda:

width: min(100vw - 2rem, 80ch); 


min()função aceita mais de dois valores, então você também pode adicionar um valor percentual aqui. Então, seu contêiner responderia não apenas à janela de visualização, mas também quando aninhado em outros contêineres, reduzindo ainda mais os bugs de estouro - e cumprindo nossa missão de criar estilos escalonáveis ​​e independentes de DOM!


Revise o uso de min()como um estilo de contêiner, bem como para tornar os filhos da grade mais flexíveis neste CodePen: min () e CSS Grid para contêineres responsivos (codepen.io)


MUDANÇA DE LAYOUT CUMULATIVA  #


Um tópico importante mais recente no desempenho do site e métricas relacionadas é o Cumulative Layout Shift (CLS) . Esta é a pontuação do Farol do Google para a quantidade de elementos que mudam ou saltam durante o carregamento da página. Alguns infratores são bastante óbvios, como anúncios e banners pop-up. Essas coisas usam movimento e normalmente atrasam ou atrasam propositalmente no carregamento.

Agora, antes de atacar o problema, certifique-se de que existe um. O Chrome e o Edge incluem o painel “Farol” nas ferramentas de desenvolvimento que você pode usar para executar um relatório para as versões desktop e móvel do seu site. Se o CLS não for um problema, essa pontuação será inferior a 0,1 e será exibida com um indicador verde.

Um exemplo de resultado de pontuação para Mudança de layout cumulativa mostrando o valor de 0,006, que é verde porque está dentro do intervalo permitido.

Um exemplo de resultado de pontuação para Mudança de layout cumulativa mostrando o valor de 0,006, que é verde porque está dentro do intervalo permitido. ( Visualização grande )


Duas outras coisas que podem afetar seu site são imagens e fontes personalizadas.


Recentemente, todos os navegadores começaram a reservar espaço para imagens se incluírem widthheightatributos. Esses atributos fornecem as duas informações necessárias para o navegador calcular a proporção da imagem e manter esse espaço no layout da página.


No entanto, devido ao design responsivo, muitos de nós estamos acostumados a remover esses atributos presumindo que o CSS assumirá o controle. Como explica Jen Simmons , é hora de adicioná-los de volta. Além disso, pode ser necessário ajustar um pouco o CSS da imagem responsiva para incluir a seguinte regra um pouco mais específica, que permitirá que a imagem responda a contextos mais estreitos sem perder sua proporção :

img[width] { height: auto; } 


Quanto às fontes personalizadas, o problema pode surgir aqui quando a fonte personalizada e a fonte substituta designada do sistema apresentam uma incompatibilidade significativa. Em anos anteriores, chamávamos isso de FLOUT (flash of unstyled text). Esse “flash” ocorre devido ao atraso entre o carregamento inicial da página e o carregamento da fonte personalizada.



Reproduzir: em uma conexão de carregamento mais lento, o título do site é exibido em uma fonte serif fallback antes que a fonte personalizada carregue.

Em uma conexão de carregamento mais lento, o título do site é exibido em uma fonte alternativa serif antes que a fonte personalizada carregue.


No exemplo de vídeo do meu próprio site que tem esse problema, usei o painel Network Conditions no Edge para carregar o site com “Network throttling” definido como “Slow 3G.”

No meu caso, a pontuação CLS real não indica que o problema é grave o suficiente para causar estresse em sua resolução. No entanto, se o atraso no carregamento da fonte fizer com que muitos elementos mudem, vale a pena procurar maneiras de aliviar o problema de deslocamento.


Às vezes, você pode selecionar uma fonte alternativa do sistema que corresponda melhor à fonte personalizada, de modo que o tamanho relativo seja mais próximo. Ou você pode reduzir o efeito definindo um tamanho mínimo nos elementos pais ou ajustando outros atributos de layout para que não cause uma mudança significativa quando a fonte for carregada.


Simon Hearne também mergulhou profundamente nas causas das mudanças de layout devido às fontes , se você gostaria de aprender mais sobre o problema, especialmente se você estiver trabalhando em um site com mais texto, onde o impacto no CLS é mais significativo. Eles concluem que a solução definitiva para lidar estritamente com a mudança de layout é usar, font-display: optionalmas admitem que isso não é ideal do ponto de vista do design. O Simon oferece mais soluções para ajudá-lo a selecionar o caminho certo para o seu site, incluindo um prático CodePen para ajudá-lo a testar alternativas. O Google também fornece um recurso que descreve fontes de pré-carregamento.


RECURSOS PARA DEPURAÇÃO CSS  #


Cobrimos algumas causas frequentes de bugs CSS e como resolvê-los. Aqui estão mais recursos que podem ajudá-lo a depurar CSS:


Além disso, fora das ferramentas de desenvolvimento populares do navegador, você pode achar essas duas alternativas úteis devido às suas ferramentas e recursos extras:

  • Polypane (pago) é um navegador que mostra várias visualizações do seu site para testar o design responsivo, mas também possui recursos adicionais que podem ajudá-lo a detectar bugs antecipadamente.
  • VisBug é uma extensão do Chromium que fornece informações extras sobre os elementos, o que também pode ajudar a identificar problemas.


0
0

Comentários (2)

0
M

Marcelo Mora

06/10/2021 16:33

Muito Bom, obrigado.

1
Isaias Bueno

Isaias Bueno

06/10/2021 09:39

Excelente!

None

Brasil