Por que criamos as ferramentas de grade CSS?
A grade CSS é um sistema de layout CSS muito eficiente que permite que os desenvolvedores da Web criem um layout bidimensional complexo e definam regras sobre como cada item filho em uma grade é dimensionado, alinhado e ordenado. A CSS Grid foi lançada depois que o Flexbox se tornou conhecido. Juntos, eles podem ajudar os desenvolvedores a ter um design responsivo melhor sem truques de alinhamento complicados ou um layout assistido por JavaScript.
Como um sistema de layout relativamente novo, a grade CSS também é difícil de acertar. A sintaxe dele é bastante versátil (basta pesquisar folha de referência da grade). Há muitas maneiras de ter o mesmo layout. O dimensionamento flexível e as faixas implícitas tornam mais difícil explicar por que o layout está ou não se comporta como deveria. Por isso, decidimos fornecer ferramentas dedicadas de grade CSS no DevTools para que os desenvolvedores possam entender melhor o que o código CSS está fazendo e como chegar ao layout certo.
Design de ferramentas
Um esforço conjunto entre o Chrome e o Edge
As ferramentas de grade de CSS chamaram a atenção do Chrome DevTools e do Edge DevTools. Decidimos colaborar desde o início. Compartilhamos os recursos de produto, engenharia e design de ambas as equipes e coordenamos semanalmente para que isso aconteça.
Resumo dos recursos
Há três recursos principais para as ferramentas de grade CSS:
- Sobreposição persistente e específica da grade que ajuda com informações dimensionais e de ordenação
- Selos na árvore DOM que destacam os contêineres da grade CSS e alternam as sobreposições de grade
- Um painel da 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 Estilos
Vamos conferir mais detalhes sobre elas 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. Antes, quando você passava o cursor sobre uma grade com o DevTools aberto, a sobreposição mostrava as informações do modelo da caixa, mas limitava o destaque do conteúdo aos itens da grade sem explicar por que isso acontece. 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 fixar as sobreposições, para poder olhar para várias grades ao mesmo tempo e ver as sobreposições atualizando as informações da grade à medida que mudamos os estilos dos elementos.
Vamos conferir como alcançamos os dois objetivos.
Tamanhos criados x tamanhos calculados
Uma das partes difíceis da depuração da grade CSS são as muitas maneiras de definir tamanhos de faixa da grade. Por exemplo, você pode usar uma combinação de valores de pixels, 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 os tamanhos das faixas criadas para os calculados pelo navegador. Para preencher essa lacuna, colocamos estas 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 real calculado.
Antes, o DevTools não tinha o recurso de receber os valores criados. Teoricamente, poderíamos analisar os valores criados no DevTools e calculá-los de acordo com a especificação da grade CSS. Isso envolveria muitos cenários complicados e, basicamente, seria apenas uma duplicação dos esforços do Blink. Por isso, com a ajuda da equipe de estilo do Blink, conseguimos uma nova API do mecanismo de estilo que expõe "valores em cascata". Um valor em cascata é o valor final efetivo, após a aplicação em cascata do CSS, para uma propriedade do CSS. É o valor que vence depois que o mecanismo de estilo compila todas as folhas de estilo, mas antes de calcular os valores, por exemplo, porcentagem, frações etc.
Agora usamos essa API para exibir os valores criados em sobreposições de grade.
Sobreposições persistentes
Antes da aplicação de ferramentas CSS Grid, a sobreposição no DevTools era simples: você passava o mouse sobre um elemento, seja no painel DOM Tree, ou diretamente na página inspecionada, e você verá uma sobreposição descrevendo esse elemento. Você passa o cursor, e a sobreposição desaparece. Para as sobreposições de grade, queríamos algo diferente: várias grades podem ser destacadas simultaneamente e as sobreposições de grade podem permanecer ativadas enquanto as sobreposições normais ao passar o cursor ainda são funcionais.
Exemplo:
No entanto, a sobreposição no DevTools não foi projetada com esse mecanismo persistente e de vários elementos em mente (ela foi criada há muitos anos). Portanto, tivemos que refatorar o design da sobreposição para fazer isso funcionar. Adicionamos um novo GridHighlightTool a um pacote de ferramentas de destaque, que depois 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 persistente. Sempre que o marcador de sobreposição verificar o que desenhar, ele também incluirá essas configurações.
Para permitir que o DevTools controle o que precisa ser destacado, criamos um novo comando do CDP para sobreposição persistente de 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ó e como desenhar esse nó. 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 de grade nas estruturas DOM.
Alterações na árvore do DOM
Como os selos Grid não são os únicos que gostaríamos de mostrar na árvore DOM, gostaríamos de facilitar ao máximo a adição de selos. A classe ElementsTreeElement, responsável por criar e gerenciar elementos individuais de árvore do DOM no DevTools, foi atualizada com vários novos métodos públicos para configurar ícones. Se houver vários selos para um elemento, eles serão classificados pelas categorias dos selos e 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, temos suporte à acessibilidade integrado desde o início. Todos os selos interativos precisam fornecer um aria-label padrão e ativo. Já os selos somente leitura usam o nome dos selos como aria-labels.
Como recebemos atualizações de estilo em tempo real?
Muitas mudanças do DOM são refletidas na árvore do 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 instantaneamente. Queremos que o status do selo Grade também reflita as mesmas informações atualizadas. No entanto, isso era difícil de implementar, porque o DevTools não recebia notificações quando os elementos mostrados na árvore do DOM eram atualizados de estilo. A única maneira de saber quando um elemento se torna ou deixa de ser um contêiner de grade é consultar constantemente o navegador para obter as informações atualizadas de estilo de cada elemento. Isso seria proibidamente caro.
Para que o front-end saiba com mais facilidade quando o estilo de um elemento foi atualizado, adicionamos um novo método CDP para a pesquisa de atualizações de estilo. Para obter atualizações de estilo dos nós DOM, começamos informando ao navegador quais declarações CSS queremos acompanhar. No caso dos selos da Grade, pedimos ao navegador para acompanhar:
{
"display": "grid",
"display": "inline-grid",
}
Em seguida, enviamos uma solicitação de pesquisa e, quando há atualizações de estilo rastreadas para nós do DOM no painel "Elementos", o navegador envia ao DevTools uma lista de nós atualizados e resolve a solicitação de pesquisa existente. Sempre que o DevTools quiser ser notificado sobre atualizações de estilo, ele poderá enviar essa solicitação de pesquisa em vez de verificar constantemente o back-end de cada nó. O DevTools também pode alterar as declarações de CSS que estão sendo monitoradas enviando uma nova lista ao navegador.
Painel de layout
Embora os selos de árvore do DOM ajudem na descoberta das grades CSS, às vezes queremos ver uma lista de todas as grades CSS em uma determinada página e ativar e desativar facilmente as sobreposições permanentes para depurar os layouts. Por isso, decidimos criar um painel dedicado à barra lateral apenas para ferramentas de layout. Isso nos dá um espaço dedicado para reunir todos os contêineres de grade e configurar todas as opções para sobreposições de grade. O painel Layout também nos permite colocar aqui ferramentas futuras com muito layout (por exemplo, Flexbox, Consultas de contêiner).
Encontrar elementos por estilos computados
Para mostrar a lista de contêineres da grade CSS no painel Layout, precisamos encontrar nós DOM por estilos calculados. Isso também não foi simples, porque nem todos os nós do DOM são conhecidos quando ele está aberto. Em vez disso, o DevTools conhece apenas um pequeno subconjunto de nós, geralmente no nível superior da hierarquia do DOM, só para iniciar a árvore de 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 CDP para coletar todos os nós na 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 da grade CSS em uma página, possivelmente percorrendo iframes e raízes paralelas, e renderizá-las no painel "Layout".
Conclusão
As ferramentas de grade de CSS foi um dos primeiros projetos de ferramentas de design do DevTools para dar suporte a um recurso de plataforma da Web. Ele lançou muitas ferramentas fundamentais no DevTools, como sobreposições persistentes, selos de árvore DOM e o painel Layout, além de abrir caminho para futuras ferramentas de layout no Chrome DevTools, como consultas Flexbox e Container. Ele também criou a base para editores Grid e Flexbox, que permitem que os desenvolvedores alterem os alinhamentos de Grid e Flexbox de forma interativa. Vamos examiná-las no futuro.
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de pré-visualização dão acesso aos recursos mais recentes do DevTools, testam as APIs de plataforma da Web modernas e encontram problemas no seu site antes que os usuários o encontrem.
Entrar em contato com a equipe do Chrome DevTools
Use as opções abaixo para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.
- Envie uma sugestão ou feedback em crbug.com.
- Informe um problema do DevTools em Mais opções
> Ajuda > Informar problemas no DevTools. - Publique no Twitter em @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre o que há de novo ou nos vídeos do YouTube de dicas sobre o DevTools.