Un guide des outils de développement CSS nouveaux et expérimentaux dans Firefox

Au cours des dernières années, notre équipe de Firefox a travaillé sur de nouveaux outils CSS qui répondent à la fois aux techniques de pointe et aux frustrations séculaires. Nous sommes l'équipe des outils de mise en page, un sous-ensemble des outils de développement de Firefox, et notre quête est d'améliorer le flux de travail de conception Web moderne.

Le Web a connu une évolution incroyable au cours de la dernière décennie : nouvelles fonctionnalités HTML/CSS, améliorations du navigateur et techniques de conception. Notre équipe se consacre à la création d'outils qui correspondent à cette innovation afin que les concepteurs et les développeurs puissent exploiter davantage l'efficacité et la créativité qui sont désormais possibles.

Dans ce guide, nous partagerons un aperçu de nos sept nouveaux outils, avec des histoires du processus de conception et des étapes pratiques pour essayer chaque outil.

1. Inspecteur de grille

Tout a commencé il y a trois ans lorsque notre experte en mise en page CSS et défenseur des développeurs, Jen Simmons, a travaillé avec des membres de Firefox DevTools pour créer un outil qui aiderait les utilisateurs à examiner les mises en page CSS Grid.

En tant que l'une des nouvelles fonctionnalités les plus puissantes du Web moderne, CSS Grid a rapidement été adopté par un navigateur décent, mais son adoption par le site Web était toujours faible. La courbe d'apprentissage est abrupte et vous avez toujours besoin de solutions de repli pour certains navigateurs. Ainsi, une partie de notre objectif était d'aider à populariser Grid en donnant aux développeurs un moyen plus pratique de l'apprendre.

Le cœur de l'outil est un contour de grille, superposé sur la page, qui aide les développeurs à visualiser comment la grille positionne leurs éléments et comment la mise en page change lorsqu'ils modifient leurs styles. Nous avons ajouté des étiquettes numérotées pour identifier chaque ligne de grille, la possibilité d'afficher jusqu'à trois grilles à la fois et la personnalisation des couleurs pour les superpositions. Récemment, nous avons également ajouté la prise en charge de la sous-grille, une toute nouvelle spécification CSS implémentée dans Firefox et, espérons-le, dans d'autres navigateurs bientôt.

Grid Inspector a été une source d'inspiration pour tous les outils qui ont suivi. Ce fut même une source d'inspiration pour une nouvelle équipe : Layout Tools ! Formé fin 2017, nous sommes répartis sur quatre fuseaux horaires et collaborons avec de nombreux autres utilisateurs de Mozilla, comme nos développeurs de moteurs de rendu et les bonnes personnes de MDN.

Essayez l'inspecteur de grille

1. Dans Firefox, visitez notre site d'exemple de grille.
2. Ouvrez l'inspecteur avec Cmd + Maj + C .
3. Activez la superposition de grille de l'une des trois manières suivantes :
• Panneau de mise en page :
  Dans la section Grille, cochez la case à côté de .content.grid-content ;
• Vue de balisage :
  Basculez le badge "grid" à côté de <div class="content grid-content"> ;
• Affichage des règles :
  Clique le bouton à côté de display:grid; à l'intérieur #page-intro .grid-content ;
4. Expérimentez avec l'inspecteur de grille :
• Changez la couleur de superposition violette en rouge;
• Basculer "Numéros de ligne" ou "Étendre les lignes à l'infini" ;
• Activez plus de superpositions de grille ;
• Voyez ce qui se passe lorsque vous désactivez grid-gap: 15px dans Rules.

Depuis Grid, nous cherchons à étendre les possibilités de ce que peut être un outil CSS pour navigateur.

"

2. Éditeur de chemin de forme

Le prochain projet sur lequel nous avons travaillé était le Shape Path Editor : notre premier outil d'édition visuelle.

CSS Shapes vous permet de définir des formes autour desquelles le texte circulera : un cercle, un triangle ou un polygone à plusieurs côtés. Il peut être utilisé avec la propriété clip-path qui vous permet de découper des éléments à l'une de ces mêmes formes. Ces deux techniques ouvrent ensemble la possibilité de mises en page inspirées de la conception graphique très uniques.

Cependant, créer ces formes parfois complexes peut être difficile. Taper toutes les coordonnées manuellement et utiliser les bonnes unités CSS est source d'erreurs et très éloigné de l'état d'esprit créatif que permet Shapes. Par conséquent, nous avons créé un outil qui vous permet de modifier votre code en cliquant et en faisant glisser directement des formes sur la page.

Ce type de fonctionnalité, l'édition visuelle, était nouveau pour nous et les outils de navigation en général. C'est un exemple de la façon dont nous pouvons aller au-delà de l'inspection et du débogage et entrer dans le domaine de la conception.

Essayez l'éditeur de chemin de forme

1. Dans Firefox, visitez cette page sur le site Web An Event Apart.
2. Ouvrez l'inspecteur avec Cmd + Maj + C et sélectionnez la première image circulaire.
3. Dans Règles, cliquez sur le icône à côté de la propriété shape-outside .
4. Sur la page, cliquez sur les points de la forme et voyez ce qui se passe lorsque vous faites glisser pour rendre la forme énorme ou minuscule. Changez-le pour une taille qui vous convient.

L'édition visuelle est un exemple de la façon dont nous pouvons aller au-delà de l'inspection et du débogage et entrer dans le domaine de la conception.

"

3. Éditeur de polices

Pendant des années, nous avons eu un panneau Polices dans Firefox qui affiche une liste informative de toutes les polices utilisées dans un site Web. En poursuivant notre thème de conception dans le navigateur, nous avons décidé d'en faire un éditeur de polices pour affiner les propriétés d'une police.

L'un des moteurs de ce projet était notre objectif de prendre en charge les polices variables en même temps que l'équipe du moteur de rendu Firefox en ajoutait la prise en charge. Les polices variables permettent aux concepteurs de polices d'offrir des variations fines le long des axes, comme le poids, dans un fichier de police. Il prend également en charge les axes personnalisés, ce qui offre aux créateurs de polices et aux concepteurs Web une flexibilité incroyable. Notre outil détecte automatiquement ces axes personnalisés et vous donne un moyen de les ajuster et de les visualiser. Sinon, cela nécessiterait des sites Web spécialisés comme Axis-Praxis.

De plus, nous avons ajouté une fonctionnalité qui permet de survoler un nom de police pour mettre en évidence l'endroit où cette police particulière est utilisée sur la page. Ceci est utile car la façon dont les navigateurs sélectionnent la police utilisée pour afficher un texte peut être complexe et dépend de l'ordinateur. Certains caractères peuvent être remplacés de manière inattendue par une police différente en raison d'un sous-ensemble de polices.

Essayez l'éditeur de polices

1. Dans Firefox, visitez ce site de démonstration de polices variables.
2. Ouvrez l'inspecteur avec Cmd + Maj + C et sélectionnez le mot "variable" dans le titre (le sélecteur d'élément est .title__variable-web__variable ).
3. Dans le troisième volet de l'inspecteur, accédez au panneau Polices :
• Survolez le nom de la police Output Sans Regular pour voir ce qui est mis en surbrillance ;
• Essayez les curseurs de poids et d' inclinaison ;
• Jetez un œil aux variations de police prédéfinies dans le menu déroulant Instances .

4. Inspecteur Flexbox

Nos outils de grille, de formes et de polices variables peuvent ensemble alimenter une conception graphique très avancée sur le Web, mais ils sont encore quelque peu à la pointe de la technologie en fonction de la prise en charge du navigateur. (Ils sont presque là, mais nécessitent toujours des solutions de secours.) Nous ne voulions pas travailler uniquement sur de nouvelles fonctionnalités, nous étions attirés par les problèmes auxquels la plupart des développeurs Web sont confrontés au quotidien.

Nous avons donc commencé à travailler sur le Flexbox Inspector. Du point de vue de la conception, cela a été notre projet le plus ambitieux, et il a fait germer de nouvelles stratégies de recherche d'utilisateurs pour notre équipe.

Comme Grid, CSS Flexbox a une courbe d'apprentissage assez raide lorsque vous démarrez pour la première fois. Il faut du temps pour vraiment le comprendre, et beaucoup d'entre nous ont recours à des essais et des erreurs pour réaliser les mises en page que nous voulons. Au début du projet, notre équipe n'était même pas sûre de comprendre nous-mêmes Flexbox, et nous ne savions pas quels étaient les principaux défis. Nous avons donc amélioré notre compréhension et mené une enquête pour découvrir ce dont les gens avaient le plus besoin en matière de Flexbox.

Les résultats ont eu un effet important sur nos plans, plaidant en faveur de visualisations compliquées telles que croissance/rétrécissement et min/max. Nous avons continué à travailler avec la communauté tout au long du projet en incorporant des commentaires dans des prototypes visuels évolutifs et des versions nocturnes.

L'outil comprend deux parties principales : un surligneur qui fonctionne un peu comme celui de l'inspecteur de grille et un outil Flexbox détaillé à l'intérieur de l'inspecteur. Le cœur de l'outil est un diagramme d'éléments flexibles avec des informations de dimensionnement.

Avec l'aide des ingénieurs de mise en page de Gecko, nous avons pu montrer les décisions de taille étape par étape du moteur de rendu pour donner aux utilisateurs une image complète de pourquoi et comment un élément flexible s'est retrouvé avec une certaine taille.

Remarque : Découvrez l'histoire complète de notre processus de conception dans "Conception de l'inspecteur Flexbox".

Essayez l'inspecteur Flexbox

1. Dans Firefox, visitez Bugzilla de Mozilla.
2. Ouvrez l'inspecteur avec Cmd + Maj + C et sélectionnez l'élément div.inner (juste à l'intérieur de la barre d'en-tête).
3. Activez la superposition Flexbox de l'une des trois manières suivantes :
• Panneau de mise en page :
  Dans la section Flex Container, activez l'interrupteur ;
• Vue de balisage :
  Basculez le badge "flex" à côté de <div class="inner"> ;
• Affichage des règles :
  Clique le bouton à côté de display:flex .
4. Utilisez le panneau Flex Container pour accéder à un élément Flex appelé nav#header-nav .
• Notez les tailles indiquées dans le diagramme et le tableau des tailles ;
• Augmentez et diminuez la largeur de votre navigateur et voyez comment le diagramme change.

Intermède : Doubler la recherche

En tant que petite équipe sans support formel de recherche d'utilisateurs, nous avons souvent eu recours au design by dogfooding : en basant nos opinions sur nos propres expériences d'utilisation des outils. Mais après notre succès avec l'enquête Flexbox, nous savions que nous voulions être meilleurs dans la collecte de données pour nous guider. Nous avons mené une nouvelle enquête pour aider à informer nos prochaines étapes.

Nous avons collecté une liste des 20 plus grands défis auxquels sont confrontés les développeurs Web et avons demandé à notre communauté de les classer en utilisant un format max-diff.

Lorsque nous avons découvert que le grand gagnant des défis était le débogage de la mise en page CSS, nous avons mené une enquête de suivi sur des bogues CSS spécifiques pour découvrir les plus gros problèmes. Nous avons complété ces enquêtes par des interviews d'utilisateurs et des tests d'utilisateurs.

Nous avons également demandé aux gens de classer leurs frustrations avec les outils de développement de navigateur. Le principal problème évident était de déplacer les modifications CSS vers l'éditeur. C'est devenu notre prochain projet.

5. Panneau des modifications

La difficulté de transférer son travail d'un outil de développement de navigateur vers l'éditeur est l'un de ces problèmes séculaires auxquels nous nous sommes tous habitués. Nous étions ravis de créer une solution simple et immédiatement utilisable.

Edge et Chrome DevTools ont d'abord proposé des variantes de cet outil. Le nôtre se concentre sur l'assistance à un large éventail de flux de travail CSS : lancez DevTools, modifiez les styles de votre choix, puis exportez vos modifications en copiant l'ensemble complet des modifications (pour la collaboration) ou une seule règle modifiée (pour coller dans le code).

Cela améliore la robustesse de l'ensemble du flux de travail, y compris nos autres outils de mise en page. Et ce n'est qu'un début : nous savons que l'actualisation accidentelle et la navigation à partir de la page sont une grande source de perte de données, donc un moyen d'apporter de la persistance à l'outil sera une prochaine étape importante.

Essayez le panneau des modifications

1. Dans Firefox, accédez à n'importe quel site Web.
2. Ouvrez l'inspecteur avec Cmd + Maj + C et sélectionnez un élément.
3. Apportez quelques modifications au CSS :
• Modifiez les styles dans le volet Règles ;
• Ajustez les polices dans le volet Polices.
4. Dans le volet droit de l'inspecteur, accédez à l'onglet Modifications et procédez comme suit :
• Cliquez sur Copier toutes les modifications , puis collez-le dans un éditeur de texte pour afficher la sortie ;
• Passez la souris sur le nom du sélecteur et cliquez sur Copier la règle , puis collez-le pour afficher le résultat.

6. CSS inactif

Notre fonctionnalité CSS inactive résout l'un des principaux problèmes de notre enquête de débogage de mise en page sur des bogues CSS spécifiques :

« Pourquoi cette propriété CSS ne fait-elle rien ? »

Du point de vue de la conception, cette fonctionnalité est très simple : elle grise le CSS qui n'affecte pas la page et affiche une info-bulle pour expliquer pourquoi la propriété n'a pas d'effet. Mais nous savons que cela peut augmenter l'efficacité et réduire la frustration. Nous avons été soutenus par les recherches de Sarah Lim et de ses collègues qui ont construit un outil similaire. Dans leurs études, ils ont constaté que les développeurs novices étaient 50 % plus rapides à construire avec CSS lorsqu'ils utilisaient un outil qui leur permettait d'ignorer le code non pertinent.

D'une certaine manière, c'est notre type de fonctionnalité préféré : un fruit UX à portée de main qui s'enregistre à peine en tant que fonctionnalité, mais améliore l'ensemble du flux de travail sans avoir vraiment besoin d'être découvert ou appris.

Le CSS inactif est lancé dans Firefox 70 mais peut maintenant être utilisé dans les versions préliminaires de Firefox, y compris Developer Edition, Beta et Nightly.

Essayez le CSS inactif

1. Téléchargez Firefox Developer Edition ;
2. Ouvrez Firefox et accédez à wikipedia.org ;
3. Ouvrez l'inspecteur avec Cmd + Shift + C et sélectionnez la zone de contenu centrale, appelée central-featured ;
4. Notez la déclaration vertical-align grisée ;
5. Passez la souris sur l'icône d'informations et cliquez sur "En savoir plus" si vous êtes intéressé.

7. Panneau d'accessibilité

En cours de route, nous avons fait développer des fonctionnalités d'accessibilité par une équipe distincte composée principalement d'une seule personne - Yura Zenevich, cette année avec sa stagiaire Maliha Islam.

Ensemble, ils ont transformé le nouveau panneau d'accessibilité de Firefox en un puissant outil d'inspection et d'audit. Outre l'affichage de l'arborescence et des propriétés d'accessibilité, vous pouvez désormais exécuter différents types de vérifications sur une page. Jusqu'à présent, les vérifications incluent le contraste des couleurs, les étiquettes de texte et le style de focus du clavier.

Désormais, dans Nightly, vous pouvez essayer le nouveau simulateur de daltonisme qui exploite notre prochaine technologie WebRender.

Essayez le panneau d'accessibilité

1. Téléchargez Firefox Developer Edition ;
2. Accédez à meetup.com ;
3. Dans les outils de développement, accédez à l'onglet Accessibilité et cliquez sur le bouton "Activer les fonctionnalités d'accessibilité" ;
4. Cliquez sur le menu déroulant à côté de "Vérifier les problèmes" et sélectionnez "Tous les problèmes" ;
5. Examinez les différents problèmes de contraste, de clavier et d'étiquette de texte, puis cliquez sur les liens "En savoir plus" si vous êtes intéressé.

Suivant

Nous travaillons actuellement sur un outil de compatibilité de navigateur qui utilise les informations de MDN pour afficher les problèmes spécifiques au navigateur pour un élément sélectionné. Vous pouvez suivre sur GitHub pour en savoir plus.

L'avenir

Nous nous engageons à soutenir le Web moderne, ce qui implique une évolution et une croissance continues.

De nouvelles spécifications sont constamment mises en œuvre par les fournisseurs de navigateurs. Les directives et les meilleures pratiques concernant l'amélioration progressive, la réactivité et l'accessibilité évoluent constamment. Nous, les fabricants d'outils, devons nous aussi continuer à évoluer.

Et qu'en est-il des problèmes persistants et omniprésents de la création du Web ? Quelles interfaces utilisateur du quotidien doivent être repensées ? Ce sont quelques-unes des questions qui nous font avancer!

Que diriez-vous d'une meilleure façon de naviguer dans l'arborescence DOM d'une page ? Cette partie de DevTools est restée pratiquement inchangée depuis l'époque de Firebug.

Nous avons expérimenté des fonctionnalités telles que les boutons Précédent et Suivant qui faciliteraient la navigation entre les éléments récemment visités.

Un changement plus radical dont nous discutons est l'ajout d'une vue DOM compacte qui utilise une syntaxe similaire aux moteurs de modèles HTML. L'accent serait mis sur le cas d'utilisation le plus courant - la navigation vers CSS - plutôt que sur l'affichage/la modification de la source.

Nous avons également pensé à un meilleur sélecteur d'éléments. Nous savons à quel point il peut être plus productif de travailler à l'intérieur de la page, avec moins de va-et-vient dans DevTools. Nous pourrions rendre le sélecteur d'éléments plus puissant et plus persistant. Peut-être qu'il pourrait sélectionner un espace blanc sur une page et vous dire ce qui cause cet espace, ou il pourrait faire la lumière sur les relations entre différents éléments.

Ce ne sont là que deux des nombreuses idées que nous espérons approfondir avec l'aide de la communauté.

Nous avons besoin de votre contribution !

Nous voulons continuer à créer des outils géniaux qui vous facilitent la vie en tant que développeur ou concepteur.

Voici une manière simple d'aider : Téléchargez Firefox Developer Edition et essayez de l'utiliser pour certains de vos travaux la semaine prochaine.

Ensuite, dites-nous ce que vous en pensez en répondant à notre enquête d'une page.

Nous sommes toujours intéressés à entendre des idées d'amélioration, en particulier tout fruit à portée de main qui pourrait nous sauver tous d'une certaine frustration régulière. Nous faisons notre travail en public, vous pouvez donc suivre et intervenir. Nous vous tiendrons au courant sur @FirefoxDevTools.

Merci à Patrick Brosset pour ses contributions à cet article.