{"id":71761,"date":"2019-10-11T04:15:05","date_gmt":"2019-10-11T11:15:05","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/"},"modified":"2019-10-11T04:15:05","modified_gmt":"2019-10-11T11:15:05","slug":"a-guide-to-new-and-experimental-css-devtools-in-firefox","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/","title":{"rendered":"A Guide To New And Experimental CSS DevTools In Firefox"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/10\/guide-new-experimental-css-devtools-firefox\/\"><title>A Guide To New And Experimental CSS DevTools In Firefox<\/title><\/p>\n<article>\n<header>\n<h1>A Guide To New And Experimental CSS DevTools In Firefox<\/h1>\n<address>Victoria Wang<\/address>\n<p>                  <time datetime=\"2019-10-10T14:30:59+02:00\">2019-10-10T14:30:59+02:00<\/time><time datetime=\"2019-10-11T11:06:37+00:00\">2019-10-11T11:06:37+00:00<\/time><\/header>\n<p>Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of Firefox Developer Tools, and our quest is to improve the modern web design workflow.<\/p>\n<p>The web has seen an incredible evolution in the last decade: new HTML\/CSS features, browser improvements, and design techniques. Our team is devoted to building tools that match that innovation so that designers and developers can harness more of the efficiency and creativity that\u2019s now possible.<\/p>\n<p>In this guide, we\u2019ll share an overview of our seven new tools, with stories from the design process and practical steps for trying out each tool.<\/p>\n<div>\n<h4>Editorial Design Patterns<\/h4>\n<p>By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid \u2014 features that become even more powerful when we introduce subgrids. <a href=\"https:\/\/www.smashingmagazine.com\/2019\/10\/editorial-design-patterns-css-grid-subgrid-naming\/\">Read related article\u00a0?<\/a><\/p>\n<\/div>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>1. Grid Inspector<\/h3>\n<p>It all started three years ago when our CSS layout expert and dev advocate, <a href=\"https:\/\/jensimmons.com\/\">Jen Simmons<\/a>, worked with members of Firefox DevTools to build a tool that would aid users in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Page_Inspector\/How_to\/Examine_grid_layouts\">examining CSS Grid layouts<\/a>.<\/p>\n<p>As one of the most powerful new features of the modern web, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/grid\">CSS Grid<\/a> had quickly gained decent browser adoption, but it still had low website adoption. There\u2019s a steep learning curve, and you still need fallbacks for certain browsers. Thus, part of our goal was to help popularize Grid by giving developers a more hands-on way to learn it.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ba92694-fce0-4a57-a4a6-7912f78b1cec\/guide-firefox-new-css-tools-grid-inspector.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-grid-inspector.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ba92694-fce0-4a57-a4a6-7912f78b1cec\/guide-firefox-new-css-tools-grid-inspector.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ba92694-fce0-4a57-a4a6-7912f78b1cec\/guide-firefox-new-css-tools-grid-inspector.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ba92694-fce0-4a57-a4a6-7912f78b1cec\/guide-firefox-new-css-tools-grid-inspector.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ba92694-fce0-4a57-a4a6-7912f78b1cec\/guide-firefox-new-css-tools-grid-inspector.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-grid-inspector.png?w=900\" sizes=\"100vw\" alt=\"An example of the Grid Inspector displaying an outline of the grid layout\"><\/a><figcaption>\n      Grid Inspector (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ba92694-fce0-4a57-a4a6-7912f78b1cec\/guide-firefox-new-css-tools-grid-inspector.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The core of the tool is a grid outline, overlaid on the page, which helps devs visualize how the grid is positioning their elements, and how the layout changes when they tweak their styles. We added numbered labels to identify each grid line, the ability to view up to three grids at once, and color customization for the overlays. Recently, we also added support for <a href=\"https:\/\/hacks.mozilla.org\/2019\/06\/css-grid-level-2-subgrid-is-coming-to-firefox\/\">subgrid<\/a>, a brand new CSS specification implemented in Firefox and hopefully in more browsers soon.<\/p>\n<p>Grid Inspector was an inspiration for all the tools that followed. It was even an inspiration for a new team: Layout Tools! Formed in late 2017, we\u2019re spread across four time zones and collaborate with many others in Mozilla, like our rendering engine developers and the good folks at <a href=\"https:\/\/developer.mozilla.org\/\">MDN<\/a>.<\/p>\n<h4>Try Out The Grid Inspector<\/h4>\n<ol>\n<li>In Firefox, visit our <a href=\"https:\/\/www.mozilla.org\/en-US\/developer\/css-grid\/\">Grid example site<\/a>.<\/li>\n<li>Open the Inspector with <kbd>Cmd<\/kbd> + <kbd>Shift<\/kbd> + <kbd>C<\/kbd>.<\/li>\n<li>Turn on Grid overlay via one of three ways:<\/li>\n<\/ol>\n<ul>\n<li><strong>Layout Panel<\/strong>:<br \/>In the Grid section, check the checkbox next to <code>.content.grid-content<\/code>;<\/li>\n<li><strong>Markup View<\/strong>:<br \/>Toggle the \u201cgrid\u201d badge next to <code>\n<div class=\"content grid-content\"><\/code>;<\/li>\n<li><strong>Rules View<\/strong>:<br \/>Click the <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/gridicon.png?w=900\"> button next to <code>display:grid;<\/code> inside <code>#page-intro .grid-content<\/code>;<\/li>\n<\/ul>\n<li>Experiment with the Grid Inspector:<\/li>\n<ul>\n<li>Change the purple overlay color to red;<\/li>\n<li>Toggle \u201cLine numbers\u201d or \u201cExtend lines infinitely\u201d;<\/li>\n<li>Turn on more grid overlays;<\/li>\n<li>See what happens when you disable <code>grid-gap: 15px<\/code> in Rules.<\/li>\n<\/ul>\n<blockquote>\n<p>\n    <a aria-label=\"Share on Twitter\" href=\"http:\/\/twitter.com\/share?text=Since%20Grid,%20we%E2%80%99ve%20been%20seeking%20to%20expand%20on%20the%20possibilities%20of%20what%20a%20browser%20CSS%20tool%20can%20be.%0A&#038;url=https:\/\/smashingmagazine.com%2F2019%2F10%2Fguide-new-experimental-css-devtools-firefox%2F\"><br \/>\n      Since Grid, we\u2019ve been seeking to expand on the possibilities of what a browser CSS tool can be.<\/p>\n<p>    <\/a>\n  <\/p>\n<div>\n<div>\n      <span>\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<h3>2. Shape Path Editor<\/h3>\n<p>The next project we worked on was the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Page_Inspector\/How_to\/Edit_CSS_shapes\">Shape Path Editor<\/a>: our first visual editing tool.<\/p>\n<figure><\/figure>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Shapes\">CSS Shapes<\/a> allows you to define shapes for text to flow around: a circle, a triangle, or a many-sided polygon. It can be used with the <code>clip-path<\/code> property which allows you to trim elements to any of those same shapes. These two techniques together open the possibility for some very unique graphic design-inspired layouts.<\/p>\n<p>However, creating these sometimes complex shapes can be difficult. Typing all of the coordinates manually and using the right CSS units is error-prone and far removed from the creative mindset that Shapes allows. Therefore, we made a tool that allows you to edit your code by directly clicking and dragging shapes on the page.<\/p>\n<p>This type of feature\u2014visual editing\u2014was new for us and browser tools in general. It\u2019s an example of how we can go beyond inspecting and debugging and into the realm of design.<\/p>\n<h4>Try Out The Shape Path Editor<\/h4>\n<ol>\n<li>In Firefox, visit <a href=\"https:\/\/aneventapart.com\/who-attends\">this page<\/a> on the An Event Apart website.<\/li>\n<li>Open the Inspector with <kbd>Cmd<\/kbd> + <kbd>Shift<\/kbd> + <kbd>C<\/kbd> and select the first circular image.<\/li>\n<li>In Rules, click on the <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/shapesicon.png?w=900\"> icon next to the <code>shape-outside<\/code> property.<\/li>\n<li>On the page, click on the points of the shape and see what happens when you drag to make the shape huge or tiny. Change it to a size that looks good to you.<\/li>\n<\/ol>\n<blockquote>\n<p>\n    <a aria-label=\"Share on Twitter\" href=\"http:\/\/twitter.com\/share?text=Visual%20editing%20is%20an%20example%20of%20how%20we%20can%20go%20beyond%20inspecting%20and%20debugging%20and%20into%20the%20realm%20of%20design.%0A&#038;url=https:\/\/smashingmagazine.com%2F2019%2F10%2Fguide-new-experimental-css-devtools-firefox%2F\"><br \/>\n      Visual editing is an example of how we can go beyond inspecting and debugging and into the realm of design.<\/p>\n<p>    <\/a>\n  <\/p>\n<div>\n<div>\n      <span>\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<h3>3. Fonts Editor<\/h3>\n<p>For years, we\u2019ve had a Fonts panel in Firefox that shows an informative list of all the fonts used in a website. In continuing our theme of designing in the browser, we decided to turn this into a Font Editor for fine-tuning a font\u2019s properties.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ce68cc41-ae3c-4263-b2ac-3f142f383351\/guide-firefox-new-css-tools-fonts-editor.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-fonts-editor.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ce68cc41-ae3c-4263-b2ac-3f142f383351\/guide-firefox-new-css-tools-fonts-editor.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ce68cc41-ae3c-4263-b2ac-3f142f383351\/guide-firefox-new-css-tools-fonts-editor.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ce68cc41-ae3c-4263-b2ac-3f142f383351\/guide-firefox-new-css-tools-fonts-editor.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ce68cc41-ae3c-4263-b2ac-3f142f383351\/guide-firefox-new-css-tools-fonts-editor.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-fonts-editor.png?w=900\" sizes=\"100vw\" alt=\"An example of the Fonts Editor index of fonts and variable fonts editing\"><\/a><figcaption>\n      Fonts Editor (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ce68cc41-ae3c-4263-b2ac-3f142f383351\/guide-firefox-new-css-tools-fonts-editor.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>A driving force behind this project was our goal to support <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Fonts\/Variable_Fonts_Guide\">Variable Fonts<\/a> at the same time that the Firefox rendering engine team was adding support for it. Variable Fonts gives font designers a way to offer fine-grained variations along axes, like weight, within one font file. It also supports custom axes, which give both font creators and web designers an amazing amount of flexibility. Our tool automatically detects these custom axes and gives you a way to adjust and visualize them. This would otherwise require specialized websites like <a href=\"https:\/\/www.axis-praxis.org\/specimens\/decovar\">Axis-Praxis<\/a>.<\/p>\n<p>Additionally, we added a feature that provides the ability to hover over a font name to highlight where that particular font is being used on the page. This is helpful because the way browsers select the font used to render a piece of text can be complex and depend on one\u2019s computer. Some characters may be unexpectedly swapped out for a different font due to <a href=\"https:\/\/www.bramstein.com\/writing\/web-font-anti-patterns-subsetting.html\">font subsetting<\/a>.<\/p>\n<h4>Try Out The Fonts Editor<\/h4>\n<ol>\n<li>In Firefox, visit this <a href=\"https:\/\/zeichenschatz.net\/demos\/vf\/variable-web-typo\/\">variable fonts demo site<\/a>.<\/li>\n<li>Open the Inspector with <kbd>Cmd<\/kbd> + <kbd>Shift<\/kbd> + <kbd>C<\/kbd> and select the word \u201cvariable\u201d in the title (the element\u2019s selector is <code>.title__variable-web__variable<\/code>).<\/li>\n<li>In the third pane of the Inspector, navigate to the Fonts panel:<\/li>\n<\/ol>\n<ul>\n<li>Hover over the font name <strong>Output Sans Regular<\/strong> to see what gets highlighted;<\/li>\n<li>Try out the <strong>weight<\/strong> and <strong>slant<\/strong> sliders;<\/li>\n<li>Take a look at the preset font variations in the <strong>Instances<\/strong> dropdown menu.<\/li>\n<\/ul>\n<div><\/div>\n<h3>4. Flexbox Inspector<\/h3>\n<p>Our Grid, Shapes, and Variable Fonts tools can together power some very advanced graphic design on the web, but they\u2019re still somewhat cutting-edge based on browser support. (<a href=\"https:\/\/caniuse.com\/#feat=css-grid\">They\u2019re<\/a> <a href=\"https:\/\/caniuse.com\/#feat=css-shapes\">almost<\/a> <a href=\"https:\/\/caniuse.com\/#feat=variable-fonts\">there<\/a>, but still require fallbacks.) We didn\u2019t want to work only on new features\u2014we were drawn to the problems that most web developers face on a daily basis.<\/p>\n<p>So we started work on the <a href=\"https:\/\/hacks.mozilla.org\/2019\/01\/firefox-65-webp-flexbox-inspector-new-tooling\/\">Flexbox Inspector<\/a>. Design-wise, this has been our most ambitious project, and it sprouted some new user research strategies for our team.<\/p>\n<p>Like Grid, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\">CSS Flexbox<\/a> has a fairly steep learning curve when you first get started. It takes time to really understand it, and many of us resort to trial and error to achieve the layouts we want. At the beginning of the project, our team wasn\u2019t even sure if we understood Flexbox ourselves, and we didn\u2019t know what the main challenges were. So we leveled up our understanding, and we ran a survey to discover what people needed the most when it came to Flexbox.<\/p>\n<p>The results had a big effect on our plans, making the case for complicated visualizations like grow\/shrink and min\/max. We continued working with the community throughout the project by incorporating feedback into evolving <a href=\"https:\/\/discourse.mozilla.org\/t\/flexbox-inspector-input-wanted\/30611\">visual prototypes<\/a> and Nightly builds.<\/p>\n<p>The tool includes two major parts: a highlighter that works much like the Grid Inspector\u2019s, and a detailed Flexbox tool inside the Inspector. The core of the tool is a flex item diagram with sizing info.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/360fa04d-7bc6-4a2c-a3b3-0ec3d6d5bfe6\/guide-firefox-new-css-tools-flexbox-inspector.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-flexbox-inspector.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/360fa04d-7bc6-4a2c-a3b3-0ec3d6d5bfe6\/guide-firefox-new-css-tools-flexbox-inspector.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/360fa04d-7bc6-4a2c-a3b3-0ec3d6d5bfe6\/guide-firefox-new-css-tools-flexbox-inspector.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/360fa04d-7bc6-4a2c-a3b3-0ec3d6d5bfe6\/guide-firefox-new-css-tools-flexbox-inspector.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/360fa04d-7bc6-4a2c-a3b3-0ec3d6d5bfe6\/guide-firefox-new-css-tools-flexbox-inspector.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-flexbox-inspector.png?w=900\" sizes=\"100vw\" alt=\"An example of the flex item diagram and sizing table\"><\/a><figcaption>\n      Flex item diagram and sizing (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/360fa04d-7bc6-4a2c-a3b3-0ec3d6d5bfe6\/guide-firefox-new-css-tools-flexbox-inspector.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>With help from Gecko layout engineers, we were able to show the step-by-step size decisions of the rendering engine to give users a full picture of why and how a flex item ended up with a certain size.<\/p>\n<p><strong>Note<\/strong>: <em>Learn the full story of our design process in \u201c<a href=\"https:\/\/hacks.mozilla.org\/2019\/01\/designing-the-flexbox-inspector\/\">Designing the Flexbox Inspector<\/a>\u201d.<\/em><\/p>\n<h4>Try Out The Flexbox Inspector<\/h4>\n<ol>\n<li>In Firefox, visit Mozilla\u2019s <a href=\"https:\/\/bugzilla.mozilla.org\/\">Bugzilla<\/a>.<\/li>\n<li>Open the Inspector with <kbd>Cmd<\/kbd> + <kbd>Shift<\/kbd> + <kbd>C<\/kbd> and select the element <code>div.inner<\/code> (just inside the header bar).<\/li>\n<li>Turn on the Flexbox overlay via one of three ways:<\/li>\n<\/ol>\n<ul>\n<li><strong>Layout Panel<\/strong>:<br \/>In the Flex Container section, turn on the switch;<\/li>\n<li><strong>Markup View<\/strong>:<br \/>Toggle the \u201cflex\u201d badge next to <code>\n<div class=\"inner\"><\/code>;<\/li>\n<li><strong>Rules View<\/strong>:<br \/>Click the <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/flexicon.png?w=900\"> button next to <code>display:flex<\/code>.<\/li>\n<\/ul>\n<li>Use the Flex Container panel to navigate to a Flex Item called <code>nav#header-nav<\/code>.<\/li>\n<ul>\n<li>Note the sizes shown in the diagram and size chart;<\/li>\n<li>Increase and decrease your browser\u2019s width and see how the diagram changes.<\/li>\n<\/ul>\n<h3>Interlude: Doubling Down on Research<\/h3>\n<p>As a small team with no formal user research support, we\u2019ve often resorted to design-by-dogfooding: basing our opinions on our own experiences in using the tools. But after our success with the Flexbox survey, we knew we wanted to be better at collecting data to guide us. We ran a <a href=\"https:\/\/hacks.mozilla.org\/2018\/11\/new-experimental-web-design-tools-feedback-requested\/\">new survey<\/a> to help inform our next steps.<\/p>\n<p>We crowdsourced a list of the 20 biggest challenges faced by web devs and asked our community to rank them using a max-diff format.<\/p>\n<p>When we found that the big winner of the challenges was CSS Layout Debugging, we ran a <a href=\"https:\/\/hacks.mozilla.org\/2019\/02\/web-design-challenges-survey-finding\/\">follow-up survey<\/a> on specific CSS bugs to discover the biggest pain points. We supplemented these surveys with user interviews and user testing.<\/p>\n<p>We also asked folks to rank their frustrations with browser developer tools. The clear top issue was moving CSS changes back to the editor. This became our next project.<\/p>\n<h3>5. Changes Panel<\/h3>\n<p>The difficulty in transferring one\u2019s work from a browser developer tool to the editor is one of those age-old issues that we all just got used to. We were excited to make a simple and immediately usable solution.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4056e9e7-5f22-4f4f-8b91-e1ea6dc71b68\/guide-firefox-new-css-tools-changes-panel.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-changes-panel.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4056e9e7-5f22-4f4f-8b91-e1ea6dc71b68\/guide-firefox-new-css-tools-changes-panel.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4056e9e7-5f22-4f4f-8b91-e1ea6dc71b68\/guide-firefox-new-css-tools-changes-panel.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4056e9e7-5f22-4f4f-8b91-e1ea6dc71b68\/guide-firefox-new-css-tools-changes-panel.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4056e9e7-5f22-4f4f-8b91-e1ea6dc71b68\/guide-firefox-new-css-tools-changes-panel.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-changes-panel.png?w=900\" sizes=\"100vw\" alt=\"An example of the diff view provided by the Changes Panel\"><\/a><figcaption>\n      Changes Panel (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4056e9e7-5f22-4f4f-8b91-e1ea6dc71b68\/guide-firefox-new-css-tools-changes-panel.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Edge and Chrome DevTools came out with variants of this tool first. Ours is focused on assisting a wide range of CSS workflows: Launch DevTools, change any styles you want, and then export your changes by either copying the full set of changes (for collaboration) or just one changed rule (for pasting into code).<\/p>\n<p>This improves the robustness of the entire workflow, including our other layout tools. And this is just a start: We know accidental refreshing and navigation from the page is a big source of data loss, so a way to bring persistence to the tool will be an important next step.<\/p>\n<h4>Try Out The Changes Panel<\/h4>\n<ol>\n<li>In Firefox, navigate to any website.<\/li>\n<li>Open the Inspector with <kbd>Cmd<\/kbd> + <kbd>Shift<\/kbd> + <kbd>C<\/kbd> and select an element.<\/li>\n<li>Make some changes to the CSS:<\/li>\n<\/ol>\n<ul>\n<li>Modify styles in the Rules pane;<\/li>\n<li>Adjust fonts in the Fonts pane.<\/li>\n<\/ul>\n<li>In the right pane of the Inspector, navigate to the Changes tab and do the following:<\/li>\n<ul>\n<li>Click <strong>Copy All Changes<\/strong>, then paste it in a text editor to view the output;<\/li>\n<li>Hover over the selector name and click <strong>Copy Rule<\/strong>, then paste it to view the output.<\/li>\n<\/ul>\n<div><\/div>\n<h3>6. Inactive CSS<\/h3>\n<p>Our Inactive CSS feature solves one of the top issues from our layout debugging survey on specific CSS bugs:<\/p>\n<blockquote><p>\u201cWhy is this CSS property not doing anything?\u201d<\/p><\/blockquote>\n<p>Design-wise, this feature is very simple\u2014it grays out CSS that doesn\u2019t affect the page, and shows a tooltip to explain why the property doesn\u2019t have an effect. But we know this can boost efficiency and cut down on frustration. We were bolstered by <a href=\"http:\/\/users.eecs.northwestern.edu\/~hq\/papers\/ply.pdf\">research<\/a> from Sarah Lim and her colleagues who built a similar tool. In their studies, they found that novice developers were 50% faster at building with CSS when they used a tool that allowed them to ignore irrelevant code.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9e6c73d1-cc10-49cb-ad56-06b55c9ad148\/guide-firefox-new-css-tools-inactive-css.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-inactive-css.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9e6c73d1-cc10-49cb-ad56-06b55c9ad148\/guide-firefox-new-css-tools-inactive-css.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9e6c73d1-cc10-49cb-ad56-06b55c9ad148\/guide-firefox-new-css-tools-inactive-css.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9e6c73d1-cc10-49cb-ad56-06b55c9ad148\/guide-firefox-new-css-tools-inactive-css.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9e6c73d1-cc10-49cb-ad56-06b55c9ad148\/guide-firefox-new-css-tools-inactive-css.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-inactive-css.png?w=900\" sizes=\"100vw\" alt=\"An example of an inactive CSS tooltip warning\"><\/a><figcaption>\n      Inactive CSS tooltip (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9e6c73d1-cc10-49cb-ad56-06b55c9ad148\/guide-firefox-new-css-tools-inactive-css.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In a way, this is our favorite kind of feature: A low-hanging UX fruit that barely registers as a feature, but improves the whole workflow without really needing to be discovered or learned.<\/p>\n<p>Inactive CSS launches in Firefox 70 but can be used now in prerelease versions of Firefox, including Developer Edition, Beta, and Nightly.<\/p>\n<h4>Try Out Inactive CSS<\/h4>\n<ol>\n<li>Download <a href=\"https:\/\/www.mozilla.org\/firefox\/developer\/\">Firefox Developer Edition<\/a>;<\/li>\n<li>Open Firefox and navigate to <a href=\"https:\/\/www.wikipedia.org\/\">wikipedia.org<\/a>;<\/li>\n<li>Open the Inspector with <kbd>Cmd<\/kbd> + <kbd>Shift<\/kbd> + <kbd>C<\/kbd> and select the center content area, called <code>central-featured<\/code>;<\/li>\n<li>Note the grayed out <code>vertical-align<\/code> declaration;<\/li>\n<li>Hover over the info icon, and click \u201cLearn more\u201d if you\u2019re interested.<\/li>\n<\/ol>\n<h3>7. Accessibility Panel<\/h3>\n<p>Along the way we\u2019ve had accessibility features developed by a separate team that\u2019s mostly one person \u2014 <a href=\"https:\/\/twitter.com\/yura_zen\/\">Yura Zenevich<\/a>, this year with his intern <a href=\"https:\/\/twitter.com\/malihaiiislam\">Maliha Islam<\/a>.<\/p>\n<p>Together they\u2019ve turned the new Accessibility panel in Firefox into a powerful inspection and auditing tool. Besides displaying the accessibility tree and properties, you can now run different types of checks on a page. So far the checks include color contrast, text labels, and keyboard focus styling.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50a2df42-0543-416a-ae6d-73a1a71c92db\/guide-firefox-new-css-tools-accessibility.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-accessibility.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50a2df42-0543-416a-ae6d-73a1a71c92db\/guide-firefox-new-css-tools-accessibility.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50a2df42-0543-416a-ae6d-73a1a71c92db\/guide-firefox-new-css-tools-accessibility.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50a2df42-0543-416a-ae6d-73a1a71c92db\/guide-firefox-new-css-tools-accessibility.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50a2df42-0543-416a-ae6d-73a1a71c92db\/guide-firefox-new-css-tools-accessibility.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-accessibility.png?w=900\" sizes=\"100vw\" alt=\"An example of the Accessibility Panel\u2019s auditing feature\"><\/a><figcaption>\n      Auditing in the Accessibility Panel (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50a2df42-0543-416a-ae6d-73a1a71c92db\/guide-firefox-new-css-tools-accessibility.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Now in Nightly, you can try the new <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Accessibility_inspector\/Simulation\">color blindness simulator<\/a> which harnesses our upcoming <a href=\"https:\/\/www.ghacks.net\/2019\/05\/20\/firefox-webrender-rollout-begins-with-the-release-of-firefox-67\/\">WebRender<\/a> tech.<\/p>\n<h4>Try Out The Accessibility Panel<\/h4>\n<ol>\n<li>Download <a href=\"https:\/\/www.mozilla.org\/firefox\/developer\/\">Firefox Developer Edition<\/a>;<\/li>\n<li>Navigate to <a href=\"https:\/\/meetup.com\/\">meetup.com<\/a>;<\/li>\n<li>In the developer tools, navigate to the Accessibility tab, and click the \u201cTurn on Accessibility Features\u201d button;<\/li>\n<li>Click the drop-down menu next to \u201cCheck for issues\u201d and select \u201cAll Issues\u201d;<\/li>\n<li>Take a look at the various contrast, keyboard, and text label issues, and click the \u201cLearn more\u201d links if you\u2019re interested.<\/li>\n<\/ol>\n<h3>Next Up<\/h3>\n<p>We\u2019re currently hard at work on a browser compatibility tool that uses information from MDN to show browser-specific issues for a selected element. You can follow along on <a href=\"https:\/\/github.com\/firefox-devtools\/ux\/issues\/65\">GitHub<\/a> to learn more.<\/p>\n<h3>The Future<\/h3>\n<p>We\u2019re committed to supporting the modern web, and that means continuously changing and growing.<\/p>\n<p>New specifications get implemented by browser vendors all the time. Guidelines and best practices around progressive enhancement, responsiveness, and accessibility evolve constantly. Us tool makers need to keep evolving too.<\/p>\n<p>And what of the long-lived, ever-present problems in creating the web? What everyday user interfaces need to be rethought? These are some of the questions that keep us going!<\/p>\n<p>What about a better way to navigate the DOM tree of a page? That part of DevTools has gone essentially unchanged since the Firebug days.<\/p>\n<p>We\u2019ve been experimenting with features like back and forward buttons that would ease navigation between recently visited elements.<\/p>\n<p>A more dramatic change we\u2019re discussing is adding a compact DOM view that uses a syntax similar to HTML templating engines. The focus would be on the most common use case\u2014navigating to CSS\u2014rather than viewing\/editing the source.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f1d5987-b5fd-43f9-b6b7-04db4d8bb65d\/guide-firefox-new-css-tools-html-outline.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-html-outline.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f1d5987-b5fd-43f9-b6b7-04db4d8bb65d\/guide-firefox-new-css-tools-html-outline.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f1d5987-b5fd-43f9-b6b7-04db4d8bb65d\/guide-firefox-new-css-tools-html-outline.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f1d5987-b5fd-43f9-b6b7-04db4d8bb65d\/guide-firefox-new-css-tools-html-outline.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f1d5987-b5fd-43f9-b6b7-04db4d8bb65d\/guide-firefox-new-css-tools-html-outline.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-html-outline.png?w=900\" sizes=\"100vw\" alt=\"A mockup of the simplified HTML Outline View\"><\/a><figcaption>\n      HTML Outline View (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f1d5987-b5fd-43f9-b6b7-04db4d8bb65d\/guide-firefox-new-css-tools-html-outline.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We\u2019ve also been thinking about a better element selector. We know how it can be more productive to work inside the page, with less jumping back and forth into DevTools. We could make the element selector more powerful and more persistent. Perhaps it could select whitespace on a page and tell you what causes that space, or it could shed light on the relationships between different elements.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6e5c8e2a-f8b8-4ca7-b091-f86519823fd9\/guide-firefox-new-css-tools-visual-picker.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-visual-picker.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6e5c8e2a-f8b8-4ca7-b091-f86519823fd9\/guide-firefox-new-css-tools-visual-picker.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6e5c8e2a-f8b8-4ca7-b091-f86519823fd9\/guide-firefox-new-css-tools-visual-picker.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6e5c8e2a-f8b8-4ca7-b091-f86519823fd9\/guide-firefox-new-css-tools-visual-picker.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6e5c8e2a-f8b8-4ca7-b091-f86519823fd9\/guide-firefox-new-css-tools-visual-picker.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-visual-picker.png?w=900\" sizes=\"100vw\" alt=\"A mockup of element overlay with collapsed margin\"><\/a><figcaption>\n      Visual Element Selector (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6e5c8e2a-f8b8-4ca7-b091-f86519823fd9\/guide-firefox-new-css-tools-visual-picker.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>These are just two of the many ideas we hope to explore further with the help of the community.<\/p>\n<h3>We Need Your Input!<\/h3>\n<p>We want to keep making awesome tools that make your life easier as a developer or designer.<\/p>\n<p>Here\u2019s an easy way to help: Download <a href=\"https:\/\/www.mozilla.org\/firefox\/developer\/\">Firefox Developer Edition<\/a> and try using it for some of your work next week.<\/p>\n<p>Then, tell us what you think by taking our <a href=\"https:\/\/www.surveygizmo.com\/s3\/5262916\/8S\">1-page survey<\/a>.<\/p>\n<p>We\u2019re always interested in hearing ideas for improvements, particularly any low-hanging fruit that could save us all from some regular frustration. We do our work in the open, so you can <a href=\"https:\/\/firefox-dev.tools\/\">follow along<\/a> and chime in. We\u2019ll keep you updated at <a href=\"https:\/\/twitter.com\/FirefoxDevTools\">@FirefoxDevTools<\/a>.<\/p>\n<p><em>Thanks to <a href=\"https:\/\/twitter.com\/patrickbrosset\/\">Patrick Brosset<\/a> for his contributions to this article.<\/em><\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-8.png?w=900\" alt=\"Smashing Editorial\"><span>(dm, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Guide To New And Experimental CSS DevTools In Firefox A Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00 Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-71761","post","type-post","status-publish","format-standard","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"A Guide To New And Experimental CSS DevTools In FirefoxA Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of Firefox Developer\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"general info\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"A Guide To New And Experimental CSS DevTools In FirefoxA Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of Firefox Developer\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-11T11:15:05+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-11T11:15:05+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"A Guide To New And Experimental CSS DevTools In FirefoxA Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of Firefox Developer\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#article\",\"name\":\"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies\",\"headline\":\"A Guide To New And Experimental CSS DevTools In Firefox\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"http:\\\/\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/guide-firefox-new-css-tools-grid-inspector.png\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#articleImage\"},\"datePublished\":\"2019-10-11T04:15:05-07:00\",\"dateModified\":\"2019-10-11T04:15:05-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#webpage\"},\"articleSection\":\"General Info\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/general-info\\\/#listItem\",\"name\":\"General Info\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/general-info\\\/#listItem\",\"position\":2,\"name\":\"General Info\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/general-info\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#listItem\",\"name\":\"A Guide To New And Experimental CSS DevTools In Firefox\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#listItem\",\"position\":3,\"name\":\"A Guide To New And Experimental CSS DevTools In Firefox\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/general-info\\\/#listItem\",\"name\":\"General Info\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/\",\"name\":\"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies\",\"description\":\"A Guide To New And Experimental CSS DevTools In FirefoxA Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\\u2019re the Layout Tools team, a subset of Firefox Developer\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-new-and-experimental-css-devtools-in-firefox\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"datePublished\":\"2019-10-11T04:15:05-07:00\",\"dateModified\":\"2019-10-11T04:15:05-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies","description":"A Guide To New And Experimental CSS DevTools In FirefoxA Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of Firefox Developer","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/","robots":"max-image-preview:large","keywords":"general info","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#article","name":"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies","headline":"A Guide To New And Experimental CSS DevTools In Firefox","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/guide-firefox-new-css-tools-grid-inspector.png","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#articleImage"},"datePublished":"2019-10-11T04:15:05-07:00","dateModified":"2019-10-11T04:15:05-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#webpage"},"articleSection":"General Info"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/general-info\/#listItem","name":"General Info"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/general-info\/#listItem","position":2,"name":"General Info","item":"https:\/\/www.taterboy.com\/blog\/category\/general-info\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#listItem","name":"A Guide To New And Experimental CSS DevTools In Firefox"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#listItem","position":3,"name":"A Guide To New And Experimental CSS DevTools In Firefox","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/general-info\/#listItem","name":"General Info"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/","name":"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies","description":"A Guide To New And Experimental CSS DevTools In FirefoxA Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of Firefox Developer","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"datePublished":"2019-10-11T04:15:05-07:00","dateModified":"2019-10-11T04:15:05-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies","og:description":"A Guide To New And Experimental CSS DevTools In FirefoxA Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of Firefox Developer","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/","article:published_time":"2019-10-11T11:15:05+00:00","article:modified_time":"2019-10-11T11:15:05+00:00","twitter:card":"summary","twitter:title":"A Guide To New And Experimental CSS DevTools In Firefox | Design for Immersive Technologies","twitter:description":"A Guide To New And Experimental CSS DevTools In FirefoxA Guide To New And Experimental CSS DevTools In Firefox Victoria Wang 2019-10-10T14:30:59+02:002019-10-11T11:06:37+00:00Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We\u2019re the Layout Tools team, a subset of Firefox Developer"},"aioseo_meta_data":{"post_id":"71761","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:15:38","updated":"2026-09-02 07:22:33","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/general-info\/\" title=\"General Info\">General Info<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tA Guide To New And Experimental CSS DevTools In Firefox\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"General Info","link":"https:\/\/www.taterboy.com\/blog\/category\/general-info\/"},{"label":"A Guide To New And Experimental CSS DevTools In Firefox","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-new-and-experimental-css-devtools-in-firefox\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iFr","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=71761"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71761\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=71761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=71761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=71761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}