Herramientas de cuadrícula de CSS en Herramientas para desarrolladores

Changhao Han
Changhao Han
X GitHub

¿Por qué creamos CSS Grid Tooling?

La cuadrícula de CSS es un sistema de diseño de CSS muy potente que permite a los desarrolladores web crear un diseño bidimensional complejo y establecer reglas sobre cómo se ajustan, alinean y ordenan cada elemento secundario de una cuadrícula. La cuadrícula de CSS se introdujo después de que Flexbox se hizo popular y, en conjunto, pueden ayudar a los desarrolladores a lograr un mejor diseño responsivo sin trucos de alineación complicados ni diseño asistido por JavaScript.

Como sistema de diseño relativamente nuevo, CSS Grid también es difícil de usar correctamente. Su sintaxis es bastante versátil (solo busca hoja de referencia de cuadrícula), existen muchas formas de lograr el mismo diseño, y el tamaño flexible y las pistas implícitas dificultan la razón por la cual el diseño sí o no se comporta como debería. Por eso, nos propusimos proporcionar herramientas dedicadas a la cuadrícula de CSS en DevTools para que los desarrolladores puedan comprender mejor lo que hace su código CSS y cómo llegar al diseño correcto.

Diseño de herramientas

Un esfuerzo conjunto entre Chrome y Edge

Las herramientas de cuadrícula de CSS captaron la atención de las Herramientas para desarrolladores de Chrome y Edge. Decidimos colaborar desde el principio. Compartimos nuestros recursos de producto, ingeniería y diseño de ambos equipos, y nos coordinamos semanalmente para que esto sucediera.

Resumen de las funciones

Existen tres funciones principales para las herramientas de cuadrícula de CSS:

  1. Una superposición persistente específica de la cuadrícula que ayuda con la información dimensional y de ordenamiento
  2. Insignias en el árbol del DOM que destacan los contenedores de la cuadrícula de CSS y alternan las superposiciones de la cuadrícula.
  3. Un panel lateral que permite a los desarrolladores personalizar la visualización de las superposiciones de DOM (p.ej., cambiar el color y el ancho de las reglas)
  4. Un editor de cuadrícula de CSS en el panel Styles

A continuación, analizaremos esta función con más detalle.

Superposiciones persistentes de la cuadrícula

En DevTools, una superposición es un instrumento potente que proporciona información de diseño y estilo de un elemento individual:

ALT_TEXT_HERE

Esta información adicional se superpone sobre el elemento de interés. Anteriormente, cuando colocabas el cursor sobre una cuadrícula con DevTools abierta, la superposición mostraba la información del modelo de cuadro, pero limitaba el contenido destacado a los elementos de la cuadrícula sin explicar por qué. Hay dos partes principales que nos gustaría agregar para las superposiciones de cuadrícula de CSS:

  • Queremos mostrar información más útil sobre las cuadrículas, p.ej., dimensiones y brechas de autor
  • Queremos que las superposiciones sean fijas, de modo que podamos ver varias cuadrículas al mismo tiempo y ver las superposiciones que actualizan la información de la cuadrícula a medida que cambiamos los diseños de los elementos.

Veamos cómo logramos ambos resultados.

Tamaños creados en comparación con los calculados

Una de las partes difíciles de la depuración de la cuadrícula de CSS es la gran cantidad de formas de definir los tamaños de los segmentos de la cuadrícula. Por ejemplo, puedes usar una combinación de valores de píxeles, valores de porcentaje, fracciones, función de repetición y función minmax para crear tamaños de segmentos versátiles:

.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));
}

Sin embargo, sería difícil asignar estos tamaños de segmentos creados por el usuario a los tamaños de segmentos calculados que el navegador calculó por nosotros. Para cerrar esta brecha, colocamos estos dos datos en paralelo en la superposición:

ALT_TEXT_HERE

La cadena anterior al punto es el valor del autor, y la cadena posterior al punto representa el valor calculado real.

Anteriormente, DevTools no tenía la capacidad de obtener valores de autoría. En teoría, podríamos analizar de alguna manera los valores creados en Herramientas para desarrolladores y procesarlos de acuerdo con la especificación de cuadrícula de CSS. Esto habría implicado muchos escenarios complicados y, básicamente, sería solo una duplicación de los esfuerzos de Blink. Por lo tanto, con la ayuda del equipo de estilo de Blink, obtuvimos una nueva API del motor de estilo que expone "valores en cascada". Un valor en cascada es el valor efectivo final, después de la cascada de CSS, para una propiedad de CSS. Es el valor que gana una vez que el motor de estilo haya compilado todas las hojas de estilo, pero antes de calcular realmente cualquier valor, por ejemplo, porcentaje, fracciones, etc.

Ahora usamos esta API para mostrar los valores creados por el usuario en superposiciones de cuadrícula.

Superposiciones persistentes

Antes de las herramientas de cuadrícula de CSS, la superposición en DevTools era sencilla: colocabas el cursor sobre un elemento, ya sea en el panel del árbol del DOM de DevTools o directamente en la página inspeccionada, y se mostraba una superposición que describía este elemento. Si colocas el cursor sobre un elemento, la superposición desaparecerá. Para las superposiciones de cuadrícula, queríamos algo diferente: se pueden destacar varias cuadrículas de forma simultánea, y las superposiciones de cuadrícula pueden permanecer activas mientras las superposiciones normales sobre el cursor siguen funcionando.

Por ejemplo:

ALT_TEXT_HERE

Sin embargo, la superposición en DevTools no se diseñó teniendo en cuenta este mecanismo persistente de varios elementos (se creó hace muchos años). Por lo tanto, tuvimos que refactorizar el diseño de la superposición para que esto funcionara. Agregamos un nuevo GridHighlightTool a un conjunto existente de herramientas de resaltado, que luego evolucionó a un PersistentTool global para resaltar todas las superposiciones persistentes al mismo tiempo. Para cada tipo de superposición persistente (Grid, Flex, etc.), mantenemos un campo de configuración correspondiente dentro de la herramienta persistente. Cada vez que el resaltador de superposición verifique qué dibujar, también incluirá estas configuraciones.

Para permitir que las Herramientas para desarrolladores controlen lo que se debe destacar, creamos un nuevo comando de CDP para la superposición persistente de Grid:

# 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

donde cada GridNodeHighlightConfig contiene información sobre qué nodo dibujar y cómo hacerlo. Esto nos permite agregar un mecanismo persistente de varios elementos sin interrumpir el comportamiento actual del desplazamiento del mouse.

Insignias de la cuadrícula en tiempo real

Para ayudar a los desarrolladores a activar y desactivar fácilmente las superposiciones de cuadrícula, decidimos agregar insignias pequeñas junto a los contenedores de cuadrícula en el árbol DOM. Estas insignias también pueden ayudar a los desarrolladores a identificar contenedores de cuadrícula en sus estructuras de DOM.

ALT_TEXT_HERE

Cambios en el árbol del DOM

Dado que las insignias de Grid no son las únicas que nos gustaría mostrar en el árbol del DOM, queremos que agregar insignias sea lo más fácil posible. ElementsTreeElement, la clase responsable de crear y administrar elementos individuales del árbol del DOM en DevTools, se actualizó con varios métodos públicos nuevos para configurar insignias. Si hay varias insignias para un elemento, se ordenan por categorías y, luego, por sus nombres en orden alfabético si están en la misma categoría. Las categorías disponibles incluyen Security, Layout, etc., y Grid pertenece a la categoría Layout.

Además, contamos con asistencia de accesibilidad integrada desde el principio. Cada insignia interactiva debe proporcionar un aria-label predeterminado y uno activo, mientras que las insignias de solo lectura usan sus nombres de insignias como aria-label.

¿Cómo obtuvimos actualizaciones de estilo en tiempo real?

Muchos cambios del DOM se reflejan en el árbol del DOM de DevTools en tiempo real. Por ejemplo, los nodos agregados recientemente aparecen de forma instantánea en el árbol del DOM, y los nombres de las clases quitadas también desaparecen de forma instantánea. Queremos que el estado de la insignia de la cuadrícula también refleje la misma información actualizada. Sin embargo, esto resultó ser difícil de implementar, ya que no había forma de que las Herramientas para desarrolladores recibieran notificaciones cuando los elementos que se mostraban en el árbol del DOM obtenían actualizaciones de estilo computadas. La única forma existente de saber cuándo un elemento se convierte en un contenedor de cuadrícula o deja de serlo es consultar constantemente al navegador para obtener la información de estilo actualizada de cada elemento. Esto sería prohibido costoso.

Para que el frontend sepa con mayor facilidad cuándo se actualiza el estilo de un elemento, agregamos un nuevo método de CDP para el sondeo de actualizaciones de estilo. Para obtener actualizaciones de estilo de los nodos DOM, primero le indicamos al navegador de qué declaraciones de CSS queremos hacer un seguimiento. En el caso de las insignias de cuadrícula, le pedimos al navegador que realice un seguimiento de lo siguiente:

{
  "display": "grid",
  "display": "inline-grid",
}

Luego, enviamos una solicitud de sondeo y, cuando haya actualizaciones de estilo seguidas para los nodos DOM en el panel Elementos, el navegador enviará a DevTools una lista de los nodos actualizados y resolverá la solicitud de sondeo existente. Cada vez que DevTools quiera recibir notificaciones sobre actualizaciones de estilo, puede enviar esta solicitud de sondeo en lugar de sondear constantemente el backend desde cada nodo. DevTools también puede cambiar las declaraciones de CSS de las que se realiza un seguimiento enviando una lista nueva al navegador.

Panel de diseño

Si bien las insignias del árbol del DOM ayudan a la visibilidad de las cuadrículas de CSS, a veces queremos ver una lista de todas las cuadrículas de CSS en una página determinada y activar o desactivar fácilmente sus superposiciones persistentes para depurar sus diseños. Por lo tanto, decidimos crear un panel lateral exclusivo para las herramientas de diseño. Esto nos da un espacio dedicado para reunir todos los contenedores de la cuadrícula y para configurar todas las opciones de las superposiciones de la cuadrícula. Este panel Diseño también nos permite colocar aquí herramientas futuras con mucho diseño (p.ej., Flexbox, Consultas de contenedores).

Cómo buscar elementos por estilos calculados

Para mostrar la lista de contenedores de CSS Grid en el panel Diseño, debemos encontrar los nodos DOM por estilos computados. Esto tampoco fue sencillo, ya que Herramientas para desarrolladores no conoce todos los nodos del DOM cuando este está abierto. En cambio, las Herramientas para desarrolladores solo conocen un pequeño subconjunto de nodos, generalmente en el nivel superior de la jerarquía del DOM, solo para iniciar el árbol del DOM de Devtools. Por motivos de rendimiento, otros nodos solo se recuperarán cuando se solicite. Esto significa que necesitamos un nuevo comando de CDP para recopilar todos los nodos de la página y filtrarlos por sus estilos computados:

# 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

Esto permite que el frontend de DevTools obtenga una lista de contenedores de CSS Grid en una página, posiblemente a través de iframes y raíces de sombras, y los renderice en el panel de diseño.

Conclusión

Las herramientas de cuadrícula de CSS fueron uno de los primeros proyectos de herramientas de diseño de DevTools en admitir una función de la plataforma web. Debutó con muchas herramientas fundamentales en Herramientas para desarrolladores, como las superposiciones persistentes, las insignias del árbol del DOM y el panel Layout, y allanó el camino para futuras herramientas de diseño en Herramientas para desarrolladores de Chrome, como las consultas de Flexbox y Container. También sentó las bases para los editores de Grid y Flexbox, que permiten a los desarrolladores cambiar las alineaciones de Grid y Flexbox de forma interactiva. Las analizaremos en el futuro.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.