¿Por qué creamos herramientas de cuadrícula de CSS?
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 volviera popular y, en conjunto, 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 sistema de diseño relativamente nuevo, la cuadrícula de CSS también es difícil de lograr. 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. Es por eso que nos propusimos proporcionar herramientas de cuadrícula de CSS dedicadas en Herramientas para desarrolladores, de modo que los desarrolladores pudieran 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 cuadrícula de CSS captaron la atención de las Herramientas para desarrolladores de Chrome y las Herramientas para desarrolladores de Edge. Decidimos colaborar desde el principio. Compartimos nuestros recursos de producto, ingeniería y diseño de ambos equipos y coordinamos semanalmente para lograrlo.
Resumen de las funciones
Existen tres funciones principales para las herramientas de la cuadrícula de CSS:
- Superposición persistente y específica de la cuadrícula que ayuda con la información dimensional y de orden
- Insignias en el árbol del DOM que destacan los contenedores de la cuadrícula de CSS y alternan las superposiciones de la cuadrícula.
- Un panel de la barra lateral que permite a los desarrolladores personalizar la visualización de las superposiciones del DOM (por ejemplo, cambiar el color y el ancho de las reglas)
- 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 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 se superpone sobre el elemento de interés. Anteriormente, cuando se colocaba el cursor sobre una cuadrícula con Herramientas para desarrolladores abierta, la superposición mostraba la información del modelo de cuadro, pero limitaba el contenido destacado a elementos de la cuadrícula sin explicar por qué este es el caso. 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., dimensiones y brechas de creación
- queremos que las superposiciones sean fijas, de modo que podamos ver varias cuadrículas al mismo tiempo, y podemos ver superposiciones que actualizan la información de la cuadrícula a medida que cambiamos los estilos de los elementos.
Veamos cómo logramos ambos resultados.
Tamaños creados en comparación con tamaños procesados
Una de las partes difíciles de la depuración de la cuadrícula de CSS son las diversas formas de definir los tamaños de los seguimientos de cuadrícula. Por ejemplo, puedes usar una combinación de valores de píxeles, valores porcentuales, fracciones, función de repetición y función mínima para crear tamaños de pista 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 a los tamaños de segmentos calculados que el navegador calculó para nosotros. Para cerrar esta brecha, colocamos estos dos datos en paralelo en la superposición:
La cadena que aparece antes del punto es el valor creado, y la cadena que aparece después del punto representa el valor calculado real.
Anteriormente, las Herramientas para desarrolladores no tenían la capacidad de obtener valores de autor. En teoría, podríamos analizar de alguna manera los valores creados en Herramientas para desarrolladores y calcularlos de acuerdo con las especificaciones de la 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 en superposiciones de cuadrícula.
Superposiciones persistentes
Antes de usar las herramientas de cuadrícula de CSS, la superposición en Herramientas para desarrolladores era sencilla: colocabas 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 describa este elemento. Si colocas el cursor sobre un elemento, la superposición desaparecerá. Para las superposiciones de cuadrícula, queríamos algo diferente: varias cuadrículas se podían destacar al mismo tiempo y las superposiciones de cuadrícula podían permanecer activas mientras las superposiciones normales al desplazarse sobre el anuncio siguen funcionando.
Por ejemplo:
Sin embargo, la superposición en Herramientas para desarrolladores no se diseñó teniendo en cuenta este mecanismo persistente y de múltiples 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 existente de herramientas para destacar, que luego evolucionó a un PersistentTool global para resaltar todas las superposiciones persistentes al mismo tiempo. Para cada tipo de superposiciones persistentes (Grid, Flex, etc.), mantenemos un campo de configuración respectivo dentro de la herramienta persistente. Cada vez que el resaltador de superposición verifica lo que debe 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 dibujarlo. Esto nos permite agregar un mecanismo persistente de varios elementos sin afectar el comportamiento actual de desplazamiento.
Insignias de 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 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, nos gustaría 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 Herramientas para desarrolladores, 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 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 instantáneamente en el árbol del DOM, y los nombres de las clases que se quitan también desaparecen al instante. Queremos que el estado de la insignia de 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 o deja de ser un contenedor de cuadrícula sería consultar constantemente al navegador sobre la información de estilo actualizada de cada elemento. Esto sería prohibidamente costoso.
Para que el frontend sepa con mayor facilidad cuándo se actualizó 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 del DOM, comenzamos por decirle al navegador a qué declaraciones CSS queremos realizar 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 con seguimiento para nodos del DOM en el panel Elements, el navegador enviará a Herramientas para desarrolladores una lista de nodos actualizados y resolverá la solicitud de sondeo existente. Cuando Herramientas para desarrolladores quiera volver a recibir notificaciones sobre las actualizaciones de estilo, puede enviar esta solicitud de sondeo en lugar de sondear constantemente el backend desde cada nodo. 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
Aunque 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 y desactivar fácilmente sus superposiciones persistentes para depurar sus diseños. Por lo tanto, decidimos crear un panel de la barra lateral dedicado solo 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 de Layout también nos permite incluir aquí herramientas futuras con mucho diseño (p.ej., Flexbox y Consultas de contenedores).
Cómo buscar elementos por estilos calculados
Para mostrar la lista de contenedores de cuadrícula de CSS en el panel Layout, debemos encontrar nodos del DOM por estilos computados. Esto tampoco fue sencillo, ya que Herramientas para desarrolladores no conoce todos los nodos del DOM cuando 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 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 cuadrícula de CSS en una página, posiblemente atravesando iframes y shadow roots, y los represente 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 Herramientas para desarrolladores en admitir una función de 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 sentó las bases 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 vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.
Comunicarse 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 otra cosa relacionada con Herramientas para desarrolladores.
- Para enviarnos sugerencias o comentarios, accede a crbug.com.
- Para informar un problema de Herramientas para desarrolladores, use Más opciones
> Ayuda > Informar problemas de Herramientas para desarrolladores en Herramientas para desarrolladores. - Twittea a @ChromeDevTools.
- Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.