¿Por qué creamos herramientas de cuadrícula de CSS?
La cuadrícula de CSS es un sistema de diseño CSS muy potente que permite a los desarrolladores web crear un diseño bidimensional complejo y establecer reglas sobre cómo se dimensiona, alinea y ordena cada elemento secundario de una cuadrícula. La cuadrícula de CSS se introdujo después de que Flexbox se volviera popular y, juntos, pueden ayudar a los desarrolladores a lograr un mejor diseño responsivo sin complicados trucos de alineación ni diseños asistidos por JavaScript.
Como es un sistema de diseño relativamente nuevo, la cuadrícula de CSS también es difícil de acertar. Su sintaxis es bastante versátil (solo busca la hoja de referencia de cuadrícula), hay muchas formas de lograr el mismo diseño, y el tamaño flexible y las pistas implícitas dificultan la razonamiento de por qué es o no se comporta como debería. Por eso nos propusimos proporcionar herramientas dedicadas de la cuadrícula de CSS en Herramientas para desarrolladores, de modo que los desarrolladores puedan comprender mejor lo que hace su código CSS y cómo obtener el diseño correcto.
Diseño de herramientas
Un esfuerzo conjunto entre Chrome y Edge
Las herramientas de la 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 coordinamos esta tarea semanalmente para lograrlo.
Resumen de las funciones
Existen tres funciones principales para las herramientas de cuadrícula de CSS:
- Superposición persistente específica de la cuadrícula que ayuda con la información dimensional y de ordenamiento
- Insignias en el árbol del DOM que destacan los contenedores de la cuadrícula de CSS y activan o desactiva las superposiciones de la cuadrícula
- Un panel de barra lateral que permite a los desarrolladores personalizar la visualización de las superposiciones del DOM (p.ej., cambiar el color y el ancho de las reglas)
- Un editor de cuadrícula de CSS en el panel Styles
A continuación, las analizaremos en detalle.
Superposiciones persistentes de cuadrícula
En Herramientas para desarrolladores, una superposición es un instrumento potente que proporciona información sobre el diseño y el estilo de un elemento individual:
Esta información adicional está superpuesta sobre el elemento de interés. Anteriormente, cuando colocabas el cursor sobre una cuadrícula con Herramientas para desarrolladores abiertas, la superposición mostraba la información de su modelo de cuadro, pero limitaba el contenido que se destacaba a los elementos de la cuadrícula sin explicar el motivo. Hay dos partes principales que nos gustaría agregar para las superposiciones de la cuadrícula de CSS:
- queremos mostrar más información útil sobre las cuadrículas; p.ej., las dimensiones y brechas de autoría
- queremos que las superposiciones sean fijas, de modo que podamos ver múltiples cuadrículas al mismo tiempo, y podemos ver las superposiciones que actualizan la información de la cuadrícula a medida que cambiamos los estilos de los elementos.
Veamos cómo los logramos en ambos casos.
Tamaños creados en comparación con tamaños calculados
Una de las partes difíciles de depurar la cuadrícula de CSS son las diferentes maneras de definir los tamaños de seguimiento de la cuadrícula. Por ejemplo, puedes utilizar una combinación de valores de píxeles, valores porcentuales, fracciones, función de repetición y función minmax para crear tamaños de seguimiento 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 autorizados a los tamaños calculados que el navegador calculó para nosotros. Para cerrar esta brecha, colocamos estos dos datos uno al lado del otro en la superposición:
La cadena antes del punto es el valor de autor, y la cadena después del punto representa el valor calculado real.
Anteriormente, Herramientas para desarrolladores no podían obtener valores creados. En teoría, podríamos analizar de alguna manera los valores creados en Herramientas para desarrolladores y calcularlos de acuerdo con la especificación de la cuadrícula de CSS. Esto habría involucrado muchos casos complicados y, básicamente, sería 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 los "valores en cascada". Un valor en cascada es el valor final efectivo, después de la cascada CSS, para una propiedad de CSS. Es el valor que gana después de que el motor de estilo haya compilado todas las hojas de estilo, pero antes de calcular cualquier valor, p.ej., porcentajes, fracciones, etc.
Ahora usamos esta API para mostrar los valores creados en superposiciones de cuadrícula.
Superposiciones persistentes
Antes de que se usen las herramientas de la cuadrícula de CSS, la superposición en Herramientas para desarrolladores era sencilla: colocas el cursor sobre un elemento, ya sea en el panel del árbol del DOM de Herramientas para desarrolladores, o directamente en la página inspeccionada, y verás una superposición que describe este elemento. Si te desplazas, la superposición desaparecerá. Para las superposiciones de cuadrículas, queríamos algo diferente: se pueden destacar varias cuadrículas al mismo tiempo y las superposiciones de la cuadrícula pueden permanecer activas mientras que las superposiciones normales que se activan con el cursor se mantienen en funcionamiento.
Por ejemplo:
Sin embargo, la superposición en Herramientas para desarrolladores no se diseñó teniendo en cuenta este mecanismo persistente y 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 paquete de herramientas de resaltado existente, que luego evolucionó a un PersistentTool global para destacar todas las superposiciones persistentes al mismo tiempo. Para cada tipo de superposiciones persistentes (Grid, Flex, etc.), conservamos un campo de configuración respectivo dentro de la herramienta persistente. Cada vez que el resaltador de superposiciones verifique qué dibujar, también incluirá estas configuraciones.
Para permitir que las Herramientas para desarrolladores controlen lo que debe destacarse, creamos un nuevo comando de CDP para la superposición persistente de la cuadrícula:
# 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 que se muestra cuando se coloca el cursor sobre él.
Insignias de la cuadrícula en tiempo real
Para ayudar a los desarrolladores a activar y desactivar fácilmente las superposiciones de la cuadrícula, decidimos agregar pequeñas insignias junto a los contenedores de cuadrícula en el Árbol del DOM. Estas insignias también pueden ayudar a los desarrolladores a identificar contenedores de Grid en sus estructuras de DOM.
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 las insignias sea lo más fácil posible. ElementsTreeElement, la clase responsable de crear y administrar elementos individuales del árbol del DOM en Herramientas para desarrolladores, se actualizó con varios métodos públicos nuevos para configurar insignias. Si hay múltiples insignias para un elemento, se ordenan por sus categorías y, luego, se muestran 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, tenemos compatibilidad integrada con la accesibilidad desde el principio. Se requiere que cada insignia interactiva proporcione un aria-label predeterminado y uno activo, mientras que las insignias de solo lectura usan los nombres de sus insignias como aria-label.
¿Cómo obtuvimos actualizaciones de diseño en tiempo real?
Muchos cambios del DOM se reflejan en el árbol del DOM de Herramientas para desarrolladores en tiempo real. Por ejemplo, los nodos recién agregados aparecen al instante en el árbol del DOM, y los nombres de las clases que se quitan también desaparecen instantáneamente. Queremos que el estado de la insignia de cuadrícula refleje la misma información actualizada. Sin embargo, esto resultó difícil de implementar porque las Herramientas para desarrolladores no podían recibir notificaciones cuando los elementos que se muestran en el árbol del DOM obtienen actualizaciones de estilo computadas. La única forma existente de saber cuándo un elemento se convierte en contenedor de cuadrícula o deja de serlo es buscar constantemente la información de estilo actualizada de cada elemento en el navegador. Esto sería prohibitivamente costoso.
Para que el frontend sepa cuándo se actualizó el estilo de un elemento, agregamos un nuevo método CDP para el sondeo de actualizaciones de estilo. Para obtener actualizaciones de estilo de los nodos del DOM, lo primero que hacemos es indicarle al navegador las declaraciones de CSS de las que queremos realizar un seguimiento. En el caso de las insignias de cuadrícula, solicitaremos 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 realizadas en los nodos del DOM en el panel Elements, el navegador enviará a las Herramientas para desarrolladores una lista de nodos actualizados y resolverá la solicitud de sondeo existente. Cuando las herramientas para desarrolladores quieren recibir notificaciones sobre actualizaciones de estilo nuevamente, pueden enviar esta solicitud de sondeo en lugar de sondear constantemente el backend desde cada uno de los nodos. Las Herramientas para desarrolladores también pueden cambiar las declaraciones de CSS de las que se hace un seguimiento enviando una nueva lista al navegador.
Panel de diseño
Si bien las insignias del árbol del DOM ayudan a detectar 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 de barra lateral dedicado solo para las herramientas de diseño. Esto nos brinda un espacio dedicado para reunir todos los contenedores de Grid y configurar todas las opciones de superposiciones de cuadrícula. El panel Layout también nos permitirá incluir herramientas futuras con mucho diseño (p.ej., Flexbox o Container Querys).
Cómo buscar elementos por estilos calculados
Para mostrar la lista de contenedores de la cuadrícula de CSS en el panel Layout, debemos encontrar nodos del DOM por estilos calculados. Esto tampoco resultó sencillo, porque Herramientas para desarrolladores no conocen todos los nodos del DOM cuando esta herramienta está abierta. En su lugar, Herramientas para desarrolladores solo conoce un subconjunto pequeño de nodos, generalmente en el nivel superior de la jerarquía del DOM, solo para iniciar el árbol del DOM de Herramientas para desarrolladores. Por motivos de rendimiento, otros nodos solo se recuperarán si se solicitan más. Esto significa que necesitamos un nuevo comando de CDP para recopilar todos los nodos de la página y filtrarlos por sus 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
Esto permite que el frontend de Herramientas para desarrolladores obtenga una lista de contenedores de la cuadrícula de CSS en una página, posiblemente a través de iframes y shadow roots, y los renderice en el panel Layout.
Conclusión
Las herramientas de cuadrícula de CSS fueron uno de los primeros proyectos de herramientas de diseño de Herramientas para desarrolladores en compatibilidad con una función de plataforma web. Presentó muchas herramientas fundamentales en Herramientas para desarrolladores (p.ej., superposiciones persistentes, insignias del árbol del DOM y el panel Layout), y sentó las bases para futuras herramientas de diseño en Herramientas para desarrolladores de Chrome, como Flexbox y las consultas de contenedores. 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 revisaremos en el futuro.
Descarga los canales de vista previa
Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban las API de vanguardia de la plataforma web y te permiten encontrar problemas en tu sitio antes que los usuarios.
Cómo comunicarte con el equipo de Herramientas para desarrolladores de Chrome
Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otro aspecto relacionado con Herramientas para desarrolladores.
- Envíanos una sugerencia o un comentario a través de crbug.com.
- Informa un problema en Herramientas para desarrolladores con Más opciones
> Ayuda > Informar problemas de Herramientas para desarrolladores en esta herramienta. - Envía un tweet a @ChromeDevTools.
- Deje comentarios en las Novedades de los videos de YouTube de Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores los videos de YouTube.