Potentes adiciones al CSS Grid Inspector en Firefox Nightly

21 septiembre, 2017 21:37 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

CSS Grid está revolucionando el diseño web. Es un estándar de diseño flexible y simple que puede ser utilizado en todos los navegadores y dispositivos. Al igual que nosotros, los diseñadores y desarrolladores se están enamorando rápidamente. Es por eso que hemos estado trabajando duro en el panel de Layout en las herramientas de desarrollador de Firefox, añadiendo potentes actualizaciones al CSS Grid Inspector y al Box Model. Las últimas mejoras ya están disponibles en Firefox Nightly.

Mejoras del Layout Panel

El nuevo Layout Panel enumera todos los contenedores de CSS Grid disponibles en la página e incluye una superposición para ayudarte a visualizar el grid (cuadrícula) en sí. Ahora puedes personalizar la información mostrada en la superposición, incluyendo el número de líneas y dimensiones del grid.

Esto es especialmente útil si todavía te estás familiarizando con CSS Grid y su funcionamiento.

También hay un nuevo esquema interactivo del grid en la barra lateral. Pasa el puntero sobre el esquema para resaltar partes del grid en las páginas y mostrar información sobre el tamaño, el área y la posición.

La nueva configuración “Mostrar áreas del grid” muestra las áreas delimitadoras y el nombre de área asociado en cada celda. Esta funcionalidad fue inspirada por el CSS Grid Template Builder creado por Anthony Dugois.

Finalmente, el Grid Inspector es capaz de visualizar las transformaciones aplicadas al contenedor del grid. Esto permite a los desarrolladores ver con precisión dónde están en la página las líneas de su grid de entre los grids trasladados, sesgados, girados o escalados.

Box Model Panel mejorado

También hemos añadido un componente llamado Box Model Properties que muestra las propiedades que afectan a la posición, el tamaño y la geometría del elemento seleccionado. Además, podrás ver y editar las propiedades de la posición superior / izquierda / inferior / derecha y de altura / anchura, haciendo ajustes en vivo de forma rápida y fácil.

Por último, también podrás ver el desplazamiento del elemento superior para cualquier elemento posicionado, lo cual resulta útil para encontrar rápidamente elementos anidados.

Como siempre, queremos escuchar lo que te gusta o no te gusta y cómo podemos mejorar Firefox Dev Tools. Encuéntranos en Discourse o @firefoxdevtools en Twitter.

Agradecimientos a la comunidad

Han sido muchas las personas que han influenciado en la entrega del panel CSS Layout en Nightly, especialmente los equipos de Firefox Developer Tools y Developer Relations. Les damos las gracias por todas las contribuciones que han hecho para hacer que Firefox sea impresionante.

También recibimos un montón de ayuda de gente increíble de la comunidad, y los participantes en programas como Undergraduate Capstone Open Source Projects (UCOSP) y Google Summer of Code (GSoC). Muchas gracias a todos los colaboradores que ayudaron a traer funcionalidades a esta versión, incluyendo:

Micah Tigley – Estudiante de informática en la Universidad de Lethbridge, estudiante de Invierno 2017 de UCOSP, estudiante de Verano 2017 en GSoC. Micah implementó el contorno del grid interactivo y la visualización del área del grid.

Alex Lockhart – estudiante de la Universidad de Dalhousie, estudiante de Invierno 2017 UCOSP. Alex contribuyó al panel Box Model con información de las propiedades y posición del Box Model .

Sheldon Roddick – Estudiante en la Universidad de Rivers Thompson, estudiante de Invierno 2017 de UCOSP. Sheldon hizo una rápida contribución para añadir la capacidad de editar el ancho y la altura en el Box Model.

Si quieres convertirte en colaborador de Firefox Dev Tools, únete a GitHub o Slack o #devtools en irc.mozilla.com. Aquí encontrarás todos los recursos que necesitas para empezar.

The following two tabs change content below.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa