Un guide pour les nouveaux et expérimentaux CSS DevTools dans Firefox

Au cours des dernières années, notre équipe de Firefox a travaillé sur de nouveaux outils CSS qui traitent à la fois des techniques de pointe et de l'âge. frustrations anciennes. Nous formons l'équipe des outils de mise en page, un sous-ensemble des outils de développement de Firefox, et notre objectif est d'améliorer le processus de conception de sites 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 est dédiée à 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é actuellement possibles.

Ce guide présente un aperçu de nos sept nouveaux outils, avec des récits de le processus de conception et les étapes pratiques pour essayer chaque outil.

1. Inspecteur de grille

Tout a commencé il y a trois ans, lorsque notre expert en mise en page CSS et notre avocat du développement, Jen Simmons travaillèrent avec des membres de Firefox DevTools pour créer un outil qui aiderait les utilisateurs dans à examiner CSS Grid. layouts .

L’une des nouvelles fonctionnalités les plus puissantes du Web moderne, CSS Grid avait rapidement été adoptée par les navigateurs, mais son adoption par les sites Web était encore médiocre. La courbe d’apprentissage est rude et vous avez encore besoin de solutions de repli pour certains navigateurs. Ainsi, une partie de notre objectif était de contribuer à la vulgarisation de Grid en offrant aux développeurs un moyen plus pratique de l’apprendre.

Le noyau de l'outil est un contour de grille, superposé à la page, qui permet aux développeurs de visualiser comment la grille positionne leurs éléments et comment la disposition 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 sous-grille une toute nouvelle spécification CSS implémentée dans Firefox et, espérons-le, bientôt dans d'autres navigateurs.

Grid Inspector a été une inspiration pour tous les outils qui ont suivi. C'était même une source d'inspiration pour une nouvelle équipe: Layout Tools! Formés à la fin de 2017, nous travaillons sur plusieurs fuseaux horaires et collaborons avec de nombreux autres utilisateurs de Mozilla, tels que nos développeurs de moteurs de rendu et les bonnes personnes de MDN .

Essayez de l'inspecteur de grille

1. Dans Firefox, visitez notre exemple de grille .
2. Ouvrez l’inspecteur avec Cmd + Shift + C .
3. Turn superposition de grille de trois manières différentes:

• Panneau de présentation :
  Dans la section Grille, cochez la case en regard de .content.grid-content ;
• . Affichage du balisage :
  Basculez l’insigne «Grille» à côté de
  ;
• La vue Règles :
Cliquez sur le bouton à côté de . ; inside # page-intro. Grid-content ;
• Expérience avec l'inspecteur de grille:
• Modifiez la couleur de fond de recouvrement violet en rouge;
• Inversez «Nombres de ligne» ou « Ex tendre les lignes infiniment ";
• Activez davantage de superpositions de grille;
• Voyez ce qui se passe lorsque vous désactivez grid-gap: 15 pixels dans Règles.

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

2. Editeur de chemin de forme

Le prochain projet sur lequel nous avons travaillé est le Editeur de chemin de forme : notre premier outil d'édition visuelle.

CSS Shapes vous permet de définir des formes de texte à parcourir: a cercle, un triangle ou un polygone à plusieurs côtés. Il peut être utilisé avec la propriété clip-path qui vous permet de redimensionner des éléments selon ces mêmes formes. Ces deux techniques ensemble ouvrent la possibilité de créer des schémas tout à fait uniques inspirés par le graphisme.

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

Ce type de fonctionnalité – la modification visuelle – était nouveau pour nous et les outils de navigateur en général. C'est un exemple de la manière dont nous pouvons aller au-delà de l'inspection et du débogage pour entrer dans le domaine du design.

Essayez l'éditeur de chemins de formes

1. Dans Firefox, visitez cette page sur le site Web de Un événement séparé.
2. Ouvrez l'inspecteur avec Cmd + Shift + C et sélectionnez la première image circulaire.
3. Dans Règles, cliquez sur l'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 produit lorsque vous faites glisser pour rendre la forme immense ou minuscule. Changez-le en une taille qui vous convient.

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

3. Editeur de polices

Depuis des années, nous avons installé dans Firefox un panneau Polices contenant une liste informative de toutes les polices utilisées sur un site Web. En continuant notre thème de conception dans le navigateur, nous avons décidé de transformer cela en un éditeur de polices permettant d'affiner les propriétés des polices.



L'un des éléments moteurs de ce projet était notre objectif de prise en charge de Variable Fonts au moment même où l'équipe du moteur de rendu Firefox lui fournissait une prise en charge. Variable Fonts offre aux concepteurs de polices un moyen d’offrir des variations fines le long des axes, tels que le poids, dans un fichier de polices. Il prend également en charge les axes personnalisés, ce qui donne aux créateurs de polices et aux concepteurs Web une souplesse incroyable. Notre outil détecte automatiquement ces axes personnalisés et vous donne un moyen de les ajuster et de les visualiser. Cela nécessiterait par ailleurs des sites Web spécialisés tels que 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. Cela est utile car la façon dont les navigateurs sélectionnent la police utilisée pour restituer un texte peut être complexe et dépendre de l’ordinateur de celui-ci. Certains caractères peuvent être intervertis de manière inattendue pour une police différente en raison de la sous-configuration .

Essayez l'éditeur de polices

1. Dans Firefox, visitez ce site de démonstration de polices variables . . 19659016] Ouvrez l'inspecteur avec Cmd + Shift + C et sélectionnez le mot "variable" dans le titre (le sélecteur de l'élément est . Titre web__variable ).
2. Dans le troisième volet de l'inspecteur, accédez au panneau Polices:
• Survolez le nom de la police Output Sans Regular pour voir les éléments en surbrillance;
• Try les curseurs et obliques ;
• Consultez les variations de police prédéfinies dans le menu déroulant Instances .

4. Flexbox Inspector

Nos outils Grille, Formes et Variable Fonts peuvent, ensemble, alimenter des graphismes très avancés sur le Web, mais ils sont encore un peu à la pointe du support du navigateur. ( Ils sont presque là-bas mais ils 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. tous les jours.

Nous avons donc commencé à travailler sur le Flexbox Inspector . Du point de vue de la conception, notre projet le plus ambitieux a donné naissance à de nouvelles stratégies de recherche des utilisateurs pour notre équipe.

Comme dans Grid, CSS Flexbox présente une courbe d'apprentissage assez abrupte au début. Il faut du temps pour bien le comprendre, et beaucoup d’entre nous ont recours à des essais et à des erreurs pour réaliser les présentations souhaitées. Au début du projet, notre équipe n’était même pas sûre de comprendre nous-mêmes la Flexbox, et nous ne savions pas quels étaient les principaux défis. Nous avons donc amélioré notre compréhension et nous avons mené une enquête pour déterminer ce dont les utilisateurs avaient le plus besoin en ce qui concerne Flexbox.

Les résultats ont eu un effet considérable sur nos plans, plaidant en faveur de visualisations compliquées telles que croître / réduire et minimiser. / max. Nous avons continué à travailler avec la communauté tout au long du projet en incorporant les commentaires dans les prototypes visuels en évolution et Nightly.

L'outil comprend deux éléments principaux: un surligneur qui fonctionne beaucoup comme le Grid Inspector, et une Flexbox détaillée. outil à l'intérieur de l'inspecteur. Le cœur de l'outil est constitué d'un diagramme d'éléments flexibles et d'informations sur le dimensionnement.



Avec de l'aide des ingénieurs en mise en page de Gecko, nous avons pu montrer les décisions de taille étape par étape du moteur de rendu afin de donner aux utilisateurs une idée complète du pourquoi et du comment un élément flexible finissait par atteindre une certaine taille.

Remarque : Découvrez toute l'histoire de notre processus de conception dans « Conception de l'inspecteur Flexbox ».

Essayez l'outil Inspecteur Flexbox

1. dans Firefox, visitez le site de Mozilla Bugzilla . Ouvrez l'inspecteur avec Cmd + Shift + C et sélectionnez l'élément div.inner (juste à l'intérieur de l'en-tête
2. Activez la superposition de la Flexbox de l’une des trois manières suivantes:
• Panneau d’agencement :
Dans la section Conteneur Flex, activez-le.
• Affichage du balisage :
  Basculez le badge "Flex" à côté de
  ;
• Afficher les règles :
Cliquez sur le . bouton en regard de display: flex .
• Utilisez le panneau Conteneur Flex pour accéder à un élément Flex appelé nav # header-nav .
• Notez les tailles indiquées dans le diagramme.
• Augmentez et diminuez la largeur de votre navigateur et voyez comment le diagramme change.

Interlude: Doubler le potentiel de recherche

En tant que petite équipe ne disposant d'aucun soutien formel en matière de recherche, nous avons souvent eu recours à la conception. -by-dogfooding: baser 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 plus efficaces dans la collecte de données pour nous guider. Nous avons réalisé une nouvelle enquête pour mieux éclairer nos prochaines étapes

. Nous avons créé une liste des 20 plus grands défis auxquels les développeurs Web doivent faire face et avons demandé à notre communauté de les classer en utilisant le format max-diff.

] Lorsque nous avons constaté que le principal gagnant des défis était le CSS Layout Debugging, nous avons mené une enquête de suivi sur des bogues CSS spécifiques afin de découvrir les plus gros problèmes. Nous avons complété ces enquêtes par des entretiens avec des utilisateurs et des tests d’utilisateurs.

Nous avons également demandé aux utilisateurs de classer leurs frustrations avec les outils de développement pour navigateurs. La principale question évidente était de renvoyer les modifications CSS dans l'éditeur. Cela est devenu notre prochain projet.

5. Panneau des modifications

La difficulté de transférer son travail d’un outil de développement de navigateur à l’éditeur est l’un de ces problèmes séculaires auxquels nous nous sommes tous habitués. Nous étions enthousiastes à l'idée de proposer une solution simple et immédiatement utilisable.



Edge et Chrome DevTools sont sortis. avec des variantes de cet outil en premier. Notre objectif consiste à assister un large éventail de flux de travail CSS: lancez DevTools, modifiez les styles de votre choix, puis exportez vos modifications en copiant l'ensemble des modifications (pour la collaboration) ou une seule règle modifiée (pour le coller dans le code).

Cela améliore la robustesse de l'ensemble du flux de travail, y compris de nos autres outils de présentation. Et ceci n'est qu'un début: nous savons qu'un rafraîchissement accidentel et que la navigation à partir de la page est une source importante de perte de données, donc un moyen de redonner de la persistance à l'outil constituera une prochaine étape importante.

Le panneau Essayer les modifications [19659015] Dans Firefox, accédez à n’importe quel site Web.

• Ouvrez l’inspecteur avec Cmd + Shift + C et sélectionnez un élément.
• Apportez des modifications. to the CSS:
• Modifiez les styles dans le volet Règles;
• Ajustez les polices dans le volet Polices.
• 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 le résultat;
• Placez le curseur de la souris sur le nom du sélecteur, puis 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 problèmes majeurs de notre enquête de débogage de présentation sur des bogues CSS spécifiques:

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

  En ce qui concerne la conception, cette fonctionnalité est très simple: elle supprime les CSS qui n’affectent pas la page et affiche une info-bulle expliquant 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 recherches de Sarah Lim et ses collègues qui ont construit un outil similaire. Dans leurs études, ils ont constaté que les développeurs novices étaient 50% plus rapides à créer avec CSS lorsqu'ils utilisaient un outil leur permettant d'ignorer le code non pertinent.

  

  D'une certaine manière, c'est notre type de fonctionnalité préféré: un fruit UX bas de gamme qui 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. 19659003] Les CSS inactifs sont lancés dans Firefox 70 mais peuvent désormais être utilisés dans les versions préliminaires de Firefox, notamment Developer Edition, Beta et Nightly.

  Essayez les CSS inactifs

  1. Télécharger Firefox Developer Edition ; 19659016] Ouvrez Firefox et naviguez jusqu'à wikipedia.org ;
  2. Ouvrez l'Inspecteur avec Cmd + Shift + C et sélectionnez la commande zone de contenu du centre, appelée à fonctions centrales ;
  3. Notez le déclaration grisée vertical-align ;
  4. Survolez l’icône d’information et cliquez sur “En savoir plus” si vous êtes intéressé.

  7. Panneau d'accessibilité

  En cours de route, des fonctionnalités d'accessibilité ont été développées par une équipe distincte composée principalement d'une personne – Yura Zenevich cette année avec son 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 d'accessibilité et des propriétés, vous pouvez désormais exécuter différents types de contrôles sur une page. Jusqu'à présent, les vérifications portaient sur le contraste de couleur, les étiquettes de texte et le style de focus du clavier.

  

  Actuellement dans Tous les soirs, vous pouvez essayer le nouveau simulateur de daltonisme qui exploite notre prochaine technologie WebRender

  Découvrez le panneau d’accessibilité

  1. Télécharger Firefox Developer Edition ;
  2. Accédez à meetup.com ;
  3. Dans les outils pour développeurs, accédez à l'onglet Accessibilité, puis cliquez sur le bouton "Activer les fonctionnalités d'accessibilité".
  4. Cliquez sur le menu déroulant.
  5. Examinez les divers 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 Up

  Nous sommes actuellement au travail sur un outil de compatibilité de navigateur t utilise les informations de MDN pour montrer les problèmes propres au navigateur pour un élément sélectionné. Vous pouvez suivre GitHub pour en savoir plus.

  L'avenir

  Nous nous engageons à soutenir le Web moderne, ce qui signifie que nous continuons à nous adapter et à nous développer.

  De nouvelles spécifications sont mises en œuvre par les vendeurs de navigateur tout le temps. Les directives et les meilleures pratiques concernant l'amélioration progressive, la réactivité et l'accessibilité évoluent constamment. Nous, les outilleurs, devons aussi continuer à évoluer.

  Et qu’en est-il des problèmes persistants et de longue date que pose la création d’Internet? Quelles interfaces utilisateur quotidiennes doivent être repensées? Voici quelques-unes des questions qui nous font avancer!

  Qu'en est-il 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 / Suivant qui faciliteraient la navigation entre les éléments récemment visités.

  Un changement plus radical dont nous discutons consiste à ajouter une vue DOM compacte utilisant une syntaxe similaire à celle des 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 comment il peut être plus productif de travailler à l'intérieur de la page, avec moins de sauts dans DevTools. Nous pourrions rendre le sélecteur d'élément plus puissant et plus persistant. Peut-être pourrait-il sélectionner des espaces sur une page et vous expliquer les causes de cet espace, ou bien éclairer les relations entre différents éléments.

  

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

  Nous avons besoin de votre contribution!

  Nous souhaitons continuer à créer des outils impressionnants qui feront de votre vie une réalité. plus facile en tant que développeur ou concepteur.

  Voici un moyen 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 pensez en prenant notre enquête sur une page .

  Nous sommes toujours intéressés par des idées d’améliorations, en particulier par les fruits qui pourraient nous sauver de la frustration habituelle. Nous faisons notre travail à l'air libre afin que vous puissiez suivre et sonner. Nous vous tiendrons au courant à l'adresse @FirefoxDevTools .

  Merci à Patrick Brosset pour ses contributions à cet article.

  (dm, il)