Una guía para herramientas de desarrollo de CSS nuevas y experimentales en Firefox

Durante los últimos años, nuestro equipo en Firefox ha estado trabajando en nuevas herramientas CSS que abordan técnicas de vanguardia y frustraciones antiguas. Somos el equipo de herramientas de diseño, un subconjunto de las herramientas de desarrollo de Firefox, y nuestra misión es mejorar el flujo de trabajo del diseño web moderno.

La web ha experimentado una evolución increíble en la última década: nuevas funciones de HTML/CSS, mejoras en el navegador y técnicas de diseño. Nuestro equipo se dedica a crear herramientas que coincidan con esa innovación para que los diseñadores y desarrolladores puedan aprovechar más la eficiencia y la creatividad que ahora es posible.

En esta guía, compartiremos una descripción general de nuestras siete nuevas herramientas, con historias del proceso de diseño y pasos prácticos para probar cada herramienta.

1. Inspector de red

Todo comenzó hace tres años cuando Jen Simmons, nuestra experta en diseño de CSS y promotora de desarrollo, trabajó con miembros de Firefox DevTools para crear una herramienta que ayudaría a los usuarios a examinar los diseños de CSS Grid.

Como una de las características nuevas más poderosas de la web moderna, CSS Grid había ganado rápidamente una adopción decente del navegador, pero aún tenía una baja adopción del sitio web. Hay una curva de aprendizaje empinada y aún necesita respaldos para ciertos navegadores. Por lo tanto, parte de nuestro objetivo era ayudar a popularizar Grid brindando a los desarrolladores una forma más práctica de aprenderlo.

El núcleo de la herramienta es un esquema de cuadrícula, superpuesto en la página, que ayuda a los desarrolladores a visualizar cómo la cuadrícula posiciona sus elementos y cómo cambia el diseño cuando ajustan sus estilos. Agregamos etiquetas numeradas para identificar cada línea de cuadrícula, la capacidad de ver hasta tres cuadrículas a la vez y la personalización de color para las superposiciones. Recientemente, también agregamos soporte para subgrid, una nueva especificación de CSS implementada en Firefox y, con suerte, pronto en más navegadores.

Grid Inspector fue una inspiración para todas las herramientas que siguieron. Incluso fue una inspiración para un nuevo equipo: ¡Herramientas de diseño! Formados a fines de 2017, estamos distribuidos en cuatro zonas horarias y colaboramos con muchos otros en Mozilla, como los desarrolladores de nuestro motor de renderizado y la buena gente de MDN.

Pruebe el inspector de cuadrícula

1. En Firefox, visite nuestro sitio de ejemplo de Grid.
2. Abra el Inspector con Cmd + Shift + C .
3. Active la superposición de cuadrícula a través de una de estas tres formas:
• Panel de diseño :
  En la sección Cuadrícula, marque la casilla de verificación junto a .content.grid-content ;
• Vista de marcado :
  Alterne la insignia de "cuadrícula" junto a <div class="content grid-content"> ;
• Vista de reglas :
  Haga clic en el botón al lado de display:grid; dentro #page-intro .grid-content ;
4. Experimente con el inspector de cuadrícula:
• Cambie el color de superposición púrpura a rojo;
• Alternar "Números de línea" o "Extender líneas infinitamente";
• Active más superposiciones de cuadrícula;
• Vea lo que sucede cuando deshabilita grid-gap: 15px en Reglas.

Desde Grid, hemos estado buscando expandir las posibilidades de lo que puede ser una herramienta CSS de navegador.

“

2. Editor de ruta de forma

El siguiente proyecto en el que trabajamos fue Shape Path Editor: nuestra primera herramienta de edición visual.

CSS Shapes le permite definir formas para que fluya el texto: un círculo, un triángulo o un polígono de muchos lados. Se puede usar con la propiedad clip-path que le permite recortar elementos en cualquiera de esas mismas formas. Estas dos técnicas juntas abren la posibilidad de algunos diseños únicos inspirados en el diseño gráfico.

Sin embargo, crear estas formas a veces complejas puede ser difícil. Escribir todas las coordenadas manualmente y usar las unidades CSS correctas es propenso a errores y está muy alejado de la mentalidad creativa que permite Shapes. Por lo tanto, creamos una herramienta que le permite editar su código haciendo clic directamente y arrastrando formas en la página.

Este tipo de función, la edición visual, era nueva para nosotros y para las herramientas del navegador en general. Es un ejemplo de cómo podemos ir más allá de la inspección y la depuración y entrar en el ámbito del diseño.

Pruebe el editor de ruta de forma

1. En Firefox, visite esta página en el sitio web de An Event Apart.
2. Abra el Inspector con Cmd + Shift + C y seleccione la primera imagen circular.
3. En Reglas, haga clic en el junto a la propiedad shape-outside .
4. En la página, haga clic en los puntos de la forma y vea qué sucede cuando arrastra para hacer que la forma sea grande o pequeña. Cámbialo a un tamaño que te quede bien.

La edición visual es un ejemplo de cómo podemos ir más allá de la inspección y la depuración y entrar en el ámbito del diseño.

“

3. Editor de fuentes

Durante años, hemos tenido un panel Fuentes en Firefox que muestra una lista informativa de todas las fuentes utilizadas en un sitio web. Al continuar con nuestro tema de diseño en el navegador, decidimos convertirlo en un Editor de fuentes para ajustar las propiedades de una fuente.

Una fuerza impulsora detrás de este proyecto fue nuestro objetivo de admitir Fuentes variables al mismo tiempo que el equipo del motor de renderizado de Firefox agregaba soporte para ellas. Las fuentes variables brindan a los diseñadores de fuentes una forma de ofrecer variaciones detalladas a lo largo de los ejes, como el peso, dentro de un archivo de fuente. También admite ejes personalizados, que brindan a los creadores de fuentes y diseñadores web una increíble cantidad de flexibilidad. Nuestra herramienta detecta automáticamente estos ejes personalizados y le brinda una forma de ajustarlos y visualizarlos. De lo contrario, esto requeriría sitios web especializados como Axis-Praxis.

Además, agregamos una función que brinda la capacidad de pasar el mouse sobre el nombre de una fuente para resaltar dónde se usa esa fuente en particular en la página. Esto es útil porque la forma en que los navegadores seleccionan la fuente utilizada para representar un texto puede ser compleja y depende de la computadora. Algunos caracteres pueden cambiarse inesperadamente por una fuente diferente debido al subconjunto de fuentes.

Pruebe el editor de fuentes

1. En Firefox, visite este sitio de demostración de fuentes variables.
2. Abra el Inspector con Cmd + Shift + C y seleccione la palabra "variable" en el título (el selector del elemento es .title__variable-web__variable ).
3. En el tercer panel del Inspector, navegue hasta el panel Fuentes:
• Pasa el cursor sobre el nombre de la fuente Output Sans Regular para ver qué se resalta;
• Pruebe los controles deslizantes de peso e inclinación ;
• Eche un vistazo a las variaciones de fuente preestablecidas en el menú desplegable Instancias .

4. Inspector de cajas flexibles

Nuestras herramientas Cuadrícula, Formas y Fuentes variables juntas pueden potenciar un diseño gráfico muy avanzado en la web, pero siguen siendo algo vanguardistas en función de la compatibilidad del navegador. (Ya casi están allí, pero aún requieren respaldos). No queríamos trabajar solo en nuevas funciones: nos atraían los problemas que la mayoría de los desarrolladores web enfrentan a diario.

Así que empezamos a trabajar en el Flexbox Inspector. En cuanto al diseño, este ha sido nuestro proyecto más ambicioso y generó algunas nuevas estrategias de investigación de usuarios para nuestro equipo.

Al igual que Grid, CSS Flexbox tiene una curva de aprendizaje bastante empinada cuando comienza por primera vez. Se necesita tiempo para entenderlo realmente, y muchos de nosotros recurrimos a prueba y error para lograr los diseños que queremos. Al comienzo del proyecto, nuestro equipo ni siquiera estaba seguro de si nosotros mismos entendíamos Flexbox, y no sabíamos cuáles eran los principales desafíos. Así que mejoramos nuestra comprensión y realizamos una encuesta para descubrir qué era lo que más necesitaba la gente en lo que respecta a Flexbox.

Los resultados tuvieron un gran efecto en nuestros planes, justificando visualizaciones complicadas como crecimiento/reducción y mínimo/máximo. Continuamos trabajando con la comunidad a lo largo del proyecto incorporando comentarios en prototipos visuales en evolución y compilaciones nocturnas.

La herramienta incluye dos partes principales: un resaltador que funciona de manera muy similar al del Inspector de cuadrícula y una herramienta Flexbox detallada dentro del Inspector. El núcleo de la herramienta es un diagrama de elemento flexible con información de tamaño.

Con la ayuda de los ingenieros de diseño de Gecko, pudimos mostrar las decisiones de tamaño paso a paso del motor de renderizado para brindar a los usuarios una imagen completa de por qué y cómo un elemento flexible terminó con un tamaño determinado.

Nota : Conozca la historia completa de nuestro proceso de diseño en "Diseño de Flexbox Inspector".

Pruebe el Inspector Flexbox

1. En Firefox, visite Bugzilla de Mozilla.
2. Abra el Inspector con Cmd + Shift + C y seleccione el elemento div.inner (justo dentro de la barra de encabezado).
3. Active la superposición de Flexbox a través de una de estas tres formas:
• Panel de diseño :
  En la sección Flex Container, encienda el interruptor;
• Vista de marcado :
  Alterne la insignia "flexible" junto a <div class="inner"> ;
• Vista de reglas :
  Haga clic en el botón al lado de display:flex .
4. Use el panel Flex Container para navegar a un Flex Item llamado nav#header-nav .
• Tenga en cuenta los tamaños que se muestran en el diagrama y la tabla de tallas;
• Aumente y disminuya el ancho de su navegador y vea cómo cambia el diagrama.

Interludio: Duplicando la investigación

Como un equipo pequeño sin apoyo formal de investigación de usuarios, a menudo recurrimos al diseño por prueba interna: basamos nuestras opiniones en nuestras propias experiencias al usar las herramientas. Pero después de nuestro éxito con la encuesta Flexbox, sabíamos que queríamos ser mejores en la recopilación de datos para guiarnos. Realizamos una nueva encuesta para ayudar a informar nuestros próximos pasos.

Obtuvimos una lista de los 20 desafíos más grandes que enfrentan los desarrolladores web y le pedimos a nuestra comunidad que los clasificara usando un formato de diferencia máxima.

Cuando descubrimos que el gran ganador de los desafíos era la depuración de diseño de CSS, realizamos una encuesta de seguimiento sobre errores de CSS específicos para descubrir los puntos débiles más importantes. Complementamos estas encuestas con entrevistas y pruebas de usuarios.

También les pedimos a las personas que clasificaran sus frustraciones con las herramientas de desarrollo de navegadores. El principal problema claro fue mover los cambios de CSS de vuelta al editor. Este se convirtió en nuestro próximo proyecto.

5. Panel de cambios

La dificultad de transferir el trabajo de una herramienta de desarrollo de navegador al editor es uno de esos problemas antiguos a los que todos nos acostumbramos. Estábamos emocionados de hacer una solución simple y de uso inmediato.

Edge y Chrome DevTools salieron primero con variantes de esta herramienta. El nuestro se centra en ayudar a una amplia gama de flujos de trabajo de CSS: inicie DevTools, cambie los estilos que desee y luego exporte sus cambios copiando el conjunto completo de cambios (para colaboración) o solo una regla modificada (para pegar en el código).

Esto mejora la solidez de todo el flujo de trabajo, incluidas nuestras otras herramientas de diseño. Y esto es solo un comienzo: sabemos que la actualización y la navegación accidentales desde la página son una gran fuente de pérdida de datos, por lo que el próximo paso importante será una manera de hacer que la herramienta sea persistente.

Pruebe el panel de cambios

1. En Firefox, navegue a cualquier sitio web.
2. Abra el Inspector con Cmd + Shift + C y seleccione un elemento.
3. Haz algunos cambios en el CSS:
• Modifique estilos en el panel Reglas;
• Ajuste las fuentes en el panel Fuentes.
4. En el panel derecho del Inspector, vaya a la pestaña Cambios y haga lo siguiente:
• Haga clic en Copiar todos los cambios , luego péguelo en un editor de texto para ver el resultado;
• Pase el cursor sobre el nombre del selector y haga clic en Copiar regla , luego péguelo para ver el resultado.

6. CSS inactivo

Nuestra función de CSS inactivo resuelve uno de los principales problemas de nuestra encuesta de depuración de diseño sobre errores de CSS específicos:

"¿Por qué esta propiedad CSS no hace nada?"

En cuanto al diseño, esta característica es muy simple: atenúa el CSS que no afecta la página y muestra información sobre herramientas para explicar por qué la propiedad no tiene efecto. Pero sabemos que esto puede aumentar la eficiencia y reducir la frustración. Nos fortaleció la investigación de Sarah Lim y sus colegas, quienes crearon una herramienta similar. En sus estudios, descubrieron que los desarrolladores novatos eran un 50 % más rápidos en la construcción con CSS cuando usaban una herramienta que les permitía ignorar el código irrelevante.

En cierto modo, este es nuestro tipo de característica favorita: una fruta UX de bajo costo que apenas se registra como una característica, pero mejora todo el flujo de trabajo sin realmente necesitar ser descubierto o aprendido.

El CSS inactivo se inicia en Firefox 70, pero ahora se puede usar en versiones preliminares de Firefox, incluidas Developer Edition, Beta y Nightly.

Pruebe CSS inactivo

1. Descarga Firefox Developer Edition;
2. Abre Firefox y navega a wikipedia.org;
3. Abra el Inspector con Cmd + Shift + C y seleccione el área de contenido central, llamada central-featured ;
4. Tenga en cuenta la declaración vertical-align atenuada;
5. Pasa el cursor sobre el ícono de información y haz clic en "Más información" si estás interesado.

7. Panel de Accesibilidad

A lo largo del camino, hemos tenido características de accesibilidad desarrolladas por un equipo separado que es en su mayoría una persona: Yura Zenevich, este año con su pasante Maliha Islam.

Juntos han convertido el nuevo panel de Accesibilidad de Firefox en una poderosa herramienta de inspección y auditoría. Además de mostrar el árbol de accesibilidad y las propiedades, ahora puede ejecutar diferentes tipos de comprobaciones en una página. Hasta ahora, las comprobaciones incluyen el contraste de color, las etiquetas de texto y el estilo de enfoque del teclado.

Ahora en Nightly, puede probar el nuevo simulador de daltonismo que aprovecha nuestra próxima tecnología WebRender.

Pruebe el panel de accesibilidad

1. Descarga Firefox Developer Edition;
2. Vaya a meetup.com;
3. En las herramientas para desarrolladores, vaya a la pestaña Accesibilidad y haga clic en el botón "Activar características de accesibilidad";
4. Haga clic en el menú desplegable junto a "Buscar problemas" y seleccione "Todos los problemas";
5. Eche un vistazo a los diversos problemas de contraste, teclado y etiquetas de texto, y haga clic en los enlaces "Más información" si está interesado.

Siguiente

Actualmente estamos trabajando arduamente en una herramienta de compatibilidad del navegador que usa información de MDN para mostrar problemas específicos del navegador para un elemento seleccionado. Puede seguirlo en GitHub para obtener más información.

El futuro

Estamos comprometidos a respaldar la web moderna, y eso significa cambiar y crecer continuamente.

Los proveedores de navegadores implementan nuevas especificaciones todo el tiempo. Las pautas y las mejores prácticas en torno a la mejora progresiva, la capacidad de respuesta y la accesibilidad evolucionan constantemente. Nosotros, los fabricantes de herramientas, también debemos seguir evolucionando.

¿Y qué hay de los problemas de larga duración y siempre presentes en la creación de la web? ¿Qué interfaces de usuario cotidianas deben repensarse? ¡Estas son algunas de las preguntas que nos mantienen en marcha!

¿Qué tal una mejor manera de navegar por el árbol DOM de una página? Esa parte de DevTools ha permanecido esencialmente sin cambios desde los días de Firebug.

Hemos estado experimentando con funciones como los botones de avance y retroceso que facilitarían la navegación entre los elementos visitados recientemente.

Un cambio más dramático que estamos discutiendo es agregar una vista DOM compacta que usa una sintaxis similar a los motores de plantillas HTML. El enfoque estaría en el caso de uso más común, navegar a CSS, en lugar de ver/editar la fuente.

También hemos estado pensando en un mejor selector de elementos. Sabemos cómo puede ser más productivo trabajar dentro de la página, con menos saltos de un lado a otro en DevTools. Podríamos hacer que el selector de elementos sea más potente y más persistente. Tal vez podría seleccionar espacios en blanco en una página y decirle qué causa ese espacio, o podría arrojar luz sobre las relaciones entre diferentes elementos.

Estas son solo dos de las muchas ideas que esperamos explorar más a fondo con la ayuda de la comunidad.

¡Necesitamos su opinión!

Queremos seguir creando herramientas increíbles que faciliten su vida como desarrollador o diseñador.

Esta es una manera fácil de ayudar: Descarga Firefox Developer Edition e intenta usarlo para parte de tu trabajo la próxima semana.

Luego, díganos lo que piensa respondiendo nuestra encuesta de 1 página.

Siempre estamos interesados ​​en escuchar ideas para mejoras, en particular cualquier fruto al alcance de la mano que pueda salvarnos a todos de alguna frustración habitual. Hacemos nuestro trabajo abiertamente, por lo que puede seguirnos y participar. Lo mantendremos informado en @FirefoxDevTools.

Gracias a Patrick Brosset por sus contribuciones a este artículo.