Mozilla Anunciado hace un momento que ha mejorado significativamente el Inspector de cuadrícula CSS de las herramientas de desarrollo integradas de Firefox.

La nueva funcionalidad se ha agregado a Firefox Nightly, la versión de desarrollo de vanguardia del navegador web Firefox que obtiene nuevas funciones primero antes de migrar a Beta y luego a las versiones estables del navegador web.

El diseño de cuadrícula CSS es un método para dividir una página web en regiones y definir relaciones de elementos en la página. La cuadrícula de nombres proviene de la característica del diseño de alinear elementos en columnas y filas.

Si bien es similar a las tablas, CSS Grid ofrece ventajas como la capacidad de superponer elementos o usar capas.

Mozilla mejora CSS Grid Inspector en Firefox Nightly

herramientas de desarrollador de firefox css grid

Los usuarios de Firefox Nightly pueden abrir las herramientas de desarrollo del navegador mediante el acceso directo F12. Para hacer uso de la nueva funcionalidad CSS Grid, necesitan abrir la herramienta Inspector en una página que usa CSS Grid.

El Panel de diseño enumera todos los contenedores de cuadrícula CSS en la página activa. Incluye una superposición en la parte superior que visualiza el diseño, la posición y la capa de cada contenedor.

Los desarrolladores de Firefox pueden personalizar la pantalla usando las siguientes tres configuraciones que están disponibles en este momento:

  • Extiende las líneas de la cuadrícula infinitamente.
  • Muestra números en líneas.
  • Mostrar áreas de cuadrícula. Esto enumera las áreas delimitadas y el nombre del área asociada de cada celda de la cuadrícula directamente en la página.

Otro elemento visual que es nuevo en las herramientas de desarrollo es la capacidad de pasar el mouse sobre cualquier contenedor para que se destaque en la página. Primero debe seleccionar la cuadrícula superpuesta para que funcionen las opciones.

Otra nueva característica del Grid Inspector permite a los desarrolladores ver dónde están las líneas de la cuadrícula para las cuadrículas que se trasladan, sesgan, rotan o escalan.

Mozilla también agregó nuevas Propiedades de modelo de caja al Inspector de cuadrícula. Enumera todas las propiedades que afectan la posición, el tamaño y la geometría del elemento seleccionado.

Los desarrolladores pueden editar algunas propiedades, la posición y las propiedades de altura / ancho directamente allí.

Aquí hay un video que lo guía a través de la nueva funcionalidad.

Ahora tu: si es un desarrollador web, ¿cuál es su opinión sobre CSS Gird y la funcionalidad de las herramientas de desarrollo de Firefox al respecto?