Por que criamos as ferramentas de grade do CSS?
A grade CSS é um sistema de layout CSS muito avançado que permite que os desenvolvedores Web criem um layout bidimensional complexo e definam regras sobre como cada item secundário em uma grade é dimensionado, alinhado e ordenado. A grade CSS foi lançada depois que o Flexbox se tornou popular e, juntos, eles podem ajudar os desenvolvedores a alcançar um design responsivo sem truques de alinhamento complicados ou layout assistido por JavaScript.
Como um sistema de layout relativamente novo, o CSS Grid também é difícil de acertar. A sintaxe é bastante versátil (basta pesquisar folha de referência de grade). Há muitas maneiras de conseguir o mesmo layout, e o dimensionamento flexível e as faixas implícitas dificultam a lógica por que o layout está ou não se comporta como deveria. Por isso, decidimos fornecer ferramentas de grade CSS dedicadas no DevTools para que os desenvolvedores possam entender melhor o que o código CSS deles faz e como chegar ao layout certo.
Design de ferramentas
Um esforço conjunto entre o Chrome e o Edge
As ferramentas de grade do CSS chamaram a atenção do Chrome DevTools e do Edge DevTools. Decidimos colaborar desde o início. Compartilhamos nossos recursos de produto, engenharia e design de ambas as equipes e nos coordenamos semanalmente para tornar isso realidade.
Resumo dos recursos
Há três recursos principais para as ferramentas de grade do CSS:
- Sobreposição persistente e específica de grade que ajuda com informações dimensionais e de ordem
- Selos na árvore DOM que destacam contêineres de grade CSS e alternam sobreposições de grade
- Um painel de barra lateral que permite aos desenvolvedores personalizar a exibição de sobreposições do DOM (por exemplo, alterar a cor e a largura das regras)
- Um editor de grade CSS no painel Styles
Vamos conferir mais detalhes sobre eles a seguir.
Sobreposições de grade persistentes
No DevTools, uma sobreposição é um instrumento poderoso que fornece informações de layout e estilo de um elemento individual:
Essas informações extras são sobrepostas ao elemento de interesse. Anteriormente, quando você passava o mouse sobre uma grade com o DevTools aberto, a sobreposição exibia as informações do modelo de caixa, mas limitava o destaque do conteúdo a itens da grade sem explicar por que isso aconteceu. Há duas partes principais que gostaríamos de adicionar às sobreposições de grade CSS:
- queremos mostrar informações mais úteis sobre grades, por exemplo, dimensões e lacunas criadas
- Queremos tornar as sobreposições fixas, para podermos olhar para várias grades ao mesmo tempo, e podemos ver sobreposições atualizando as informações da grade à medida que mudamos os estilos dos elementos.
Vamos conferir como fizemos isso.
Tamanhos criados x tamanhos calculados
Uma das partes difíceis da depuração da grade CSS são as muitas maneiras de definir os tamanhos das faixas da grade. Por exemplo, é possível usar uma combinação de valores de pixel, valores percentuais, frações, função de repetição e função minmax para criar tamanhos de faixa versáteis:
.grid-cards {
display: grid;
width: 200px;
height: 300px;
grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
No entanto, seria difícil mapear esses tamanhos de faixas criadas para os tamanhos de faixas computados que o navegador calculou para nós. Para preencher essa lacuna, colocamos essas duas informações lado a lado na sobreposição:
A string antes do ponto é o valor criado, e a string após o ponto representa o valor calculado real.
Antes, o DevTools não tinha a capacidade de receber valores criados. Em teoria, de alguma forma, poderíamos analisar os valores criados no DevTools e calculá-los de acordo com a especificação CSS Grid. Isso envolveria muitos cenários complicados e, basicamente, seria apenas uma cópia dos esforços do Blink. Por isso, com a ajuda da equipe de estilo do Blink, recebemos uma nova API do mecanismo de estilo que expõe "valores em cascata". Um valor em cascata é o valor efetivo final, após a cascata do CSS, para uma propriedade CSS. Este é o valor que vencer após o mecanismo de estilo compilar todas as folhas de estilo, mas antes de calcular realmente quaisquer valores, por exemplo, porcentagem, frações etc.
Agora estamos usando essa API para exibir os valores criados em sobreposições de grade.
Sobreposições persistentes
Antes das ferramentas de grade do CSS, a sobreposição no DevTools era simples: você passa o mouse sobre um elemento, seja no painel da árvore do DOM do DevTools ou diretamente na página inspecionada, e você vê uma sobreposição descrevendo esse elemento. Você passa o cursor e a sobreposição desaparece. Para sobreposições de grade, queríamos algo diferente: várias grades podem ser destacadas simultaneamente, e as sobreposições de grade podem permanecer ativas enquanto as sobreposições comuns ao passar o cursor ainda estão funcionais.
Exemplo:
No entanto, a sobreposição no DevTools não foi projetada com esse mecanismo persistente e de vários elementos (ela foi criada há muitos anos). Portanto, tivemos que refatorar o design da sobreposição para que isso funcionasse. Adicionamos uma nova GridHighlightTool a um pacote de ferramentas de destaque atual, que mais tarde evoluiu para um PersistentTool global para destacar todas as sobreposições persistentes ao mesmo tempo. Para cada tipo de sobreposição persistente (Grid, Flex etc.), mantemos um respectivo campo de configuração dentro da ferramenta de persistência. Sempre que o realce de sobreposição verifica o que desenhar, ele também inclui essas configurações.
Para permitir que o DevTools controle o que precisa ser destacado, criamos um novo comando do CDP para a sobreposição persistente da grade:
# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
parameters
# An array of node identifiers and descriptors for the highlight appearance.
array of GridNodeHighlightConfig gridNodeHighlightConfigs
em que cada GridNodeHighlightConfig contém informações sobre qual nó desenhar e como desenhá-lo. Isso nos permite adicionar um mecanismo persistente de vários itens sem interromper o comportamento atual ao passar o cursor.
Selos de grade em tempo real
Para ajudar os desenvolvedores a ativar e desativar as sobreposições de grade com facilidade, decidimos adicionar pequenos selos ao lado dos contêineres de grade na Árvore DOM. Esses selos também podem ajudar os desenvolvedores a identificar contêineres Grid nas suas estruturas DOM.
Mudanças na árvore do DOM
Como os selos do Grid não são os únicos que queremos mostrar na árvore do DOM, queremos facilitar ao máximo a adição deles. A ElementsTreeElement, a classe responsável por criar e gerenciar elementos individuais da árvore DOM no DevTools, foi atualizada com vários novos métodos públicos para configurar selos. Se houver vários selos para um elemento, eles serão classificados por categorias de selos e, em seguida, seus nomes em ordem alfabética, se estiverem na mesma categoria. As categorias disponíveis incluem Security, Layout etc., e Grid pertence à categoria Layout.
Além disso, oferecemos suporte de acessibilidade integrado desde o início. Todos os selos interativos precisam fornecer uma aria-label ativa e padrão. Já os selos somente leitura usam o nome como aria-label.
Como recebemos atualizações de estilo em tempo real?
Muitas alterações do DOM são refletidas na árvore DOM do DevTools em tempo real. Por exemplo, nós recém-adicionados aparecem instantaneamente na árvore DOM e nomes de classes removidos também desaparecem. Queremos que o status do selo "Grade" também reflita as mesmas informações atualizadas. No entanto, isso provou ser difícil de implementar, porque o DevTools não tinha como receber notificações quando os elementos mostrados na árvore do DOM recebessem atualizações de estilo computadas. A única maneira existente de saber quando um elemento se torna ou deixa de ser um contêiner de Grade seria consultar constantemente o navegador para obter informações de estilo atualizadas de cada elemento. Isso seria proibitivamente caro.
Para que o front-end saiba quando o estilo de um elemento foi atualizado, adicionamos um novo método de CDP para pesquisa de atualizações de estilo. Para receber atualizações de estilo dos nós do DOM, primeiro informamos ao navegador quais declarações de CSS queremos acompanhar. No caso dos selos da grade, pediríamos ao navegador para monitorar:
{
"display": "grid",
"display": "inline-grid",
}
Enviamos uma solicitação de pesquisa e, quando há atualizações de estilo rastreadas para nós do DOM no painel Elements, o navegador envia ao DevTools uma lista de nós atualizados e resolve a solicitação de sondagem existente. Sempre que o DevTools quiser ser notificado sobre atualizações de estilo novamente, ele poderá enviar essa solicitação de sondagem em vez de pesquisar o back-end constantemente em cada nó. O DevTools também pode alterar as declarações de CSS que estão sendo rastreadas enviando uma nova lista ao navegador.
Painel "Layout"
Embora os distintivos da árvore do DOM ajudem a encontrar as grades CSS, às vezes queremos ver uma lista de todas as grades CSS em uma determinada página e ativar e desativar facilmente suas sobreposições persistentes para depurar seus layouts. Por isso, decidimos criar um painel de barra lateral dedicado apenas para as ferramentas de layout. Isso nos dá um espaço dedicado para reunir todos os contêineres de grade e configurar todas as opções de sobreposições de grade. O painel Layout também permite colocar aqui futuras ferramentas com muito layout (por exemplo, Flexbox, Consultas de contêiner).
Encontrar elementos por estilos calculados
Para mostrar a lista de contêineres de grade CSS no painel Layout, precisamos encontrar nós do DOM por estilos computados. Isso também não é simples, porque nem todos os nós do DOM são conhecidos pelo DevTools quando ele está aberto. Em vez disso, o DevTools conhece apenas um subconjunto pequeno de nós, geralmente no nível superior da hierarquia do DOM, apenas para iniciar a árvore DOM do Devtools. Por motivos de desempenho, outros nós só serão buscados mediante solicitação adicional. Isso significa que precisamos de um novo comando de CDP para coletar todos os nós da página e filtrá-los pelos estilos calculados:
# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
parameters
# Node ID pointing to the root of a subtree.
NodeId nodeId
# The style to filter nodes by (includes nodes if any of properties matches).
array of CSSComputedStyleProperty computedStyles
# Whether or not iframes and shadow roots in the same target should be traversed when returning the
# results (default is false).
optional boolean pierce
returns
# Resulting nodes.
array of NodeId nodeIds
Isso permite que o front-end do DevTools receba uma lista de contêineres de grade CSS em uma página, possivelmente passando por iframes e raízes paralelas, e renderize-os no painel "Layout".
Conclusão
As ferramentas de grade do CSS foram um dos primeiros projetos de ferramentas de design do DevTools a oferecer suporte a um recurso da plataforma Web. Ele lançou muitas ferramentas fundamentais no DevTools, como sobreposições persistentes, selos da árvore DOM e o painel Layout, e abriu caminho para futuras ferramentas de layout no Chrome DevTools, como consultas do Flexbox e do Container. Ele também estabeleceu a base para os editores Grid e Flexbox, que permitem aos desenvolvedores alterar os alinhamentos Grid e Flexbox de forma interativa. Falaremos sobre elas no futuro.
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-visualização dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.
- Envie uma sugestão ou feedback pelo site crbug.com.
- Para informar um problema do DevTools, use Mais opções
> Ajuda > Informar problemas do DevTools no DevTools.
- Tuíte em @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.