{"id":312190,"date":"2020-06-04T15:18:42","date_gmt":"2020-06-04T22:18:42","guid":{"rendered":"https:\/\/css-tricks.com\/?p=312190"},"modified":"2020-06-04T15:18:43","modified_gmt":"2020-06-04T22:18:43","slug":"understand-why-css-has-no-effect-with-the-inactive-css-rules-indicator-in-firefox-devtools","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/understand-why-css-has-no-effect-with-the-inactive-css-rules-indicator-in-firefox-devtools\/","title":{"rendered":"Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools"},"content":{"rendered":"\n<p>It&#8217;s useful when DevTools tells you that a declaration is invalid. For example, <code>colr: red;<\/code> isn&#8217;t valid because <code>colr<\/code> isn&#8217;t a valid property. Likewise <code>color: rd;<\/code> isn&#8217;t valid because <code>rd<\/code> isn&#8217;t a valid value. For the most part, a browser&#8217;s DevTools shows the declaration as <s>crossed out<\/s> with a warning (<img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"17\" class=\"wp-image-312191\" style=\"width: 20px;\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/warning.png?resize=20%2C17&#038;ssl=1\" alt=\"\" data-recalc-dims=\"1\">) icon. It would be nice if they went a step further to tell you which thing was wrong (or both) and suggest likely fixes, but hey, I don&#8217;t wanna look a gift horse in the mouth. <\/p>\n\n\n\n<p>Firefox is starting to go a step further in telling you when certain declarations aren&#8217;t valid, not because of a syntax error, but because they don&#8217;t meet <em>other<\/em> qualifications. For example, I tossed a <code>grid-column-gap: 1rem<\/code> on a random <code>&lt;p&gt;<\/code> and I was told this in a little popup:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><code>grid-column-gap<\/code> has no effect on this element since it\u2019s not a flex container, a grid container, or a multi-column container.<\/p><p>Try adding either <code>display:grid<\/code>, <code>display:flex<\/code>, or <code>columns:2<\/code>. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/column-gap\" rel=\"noopener\">Learn more<\/a><\/p><\/blockquote>\n\n\n\n<p>Well that&#8217;s awful handy. <\/p>\n\n\n\n<p>Elijah Manor has <a href=\"https:\/\/elijahmanor.com\/firefox-devtools-inactive-css\/\" rel=\"noopener\">a blog post<\/a> and video digging into this a bit. <\/p>\n\n\n\n<!--more-->\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/egghead.io\/lessons\/css-understand-why-css-has-no-effect-with-the-inactive-css-rules-indicator-in-firefox-devtools\/embed?preload=false&amp;af=2rdckc\" frameborder=\"0\" allowfullscreen=\"\"><\/iframe>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s useful when DevTools tells you that a declaration is invalid. For example, colr: red; isn&#8217;t valid because colr isn&#8217;t a valid property. Likewise color: rd; isn&#8217;t valid because rd isn&#8217;t a valid value. For the most part, a browser&#8217;s DevTools shows the declaration as crossed out with a warning () icon. It would be [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":312195,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1144,1471],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-02-at-12.51.48-PM.png?fit=1398%2C646&ssl=1","jetpack-related-posts":[{"id":377264,"url":"https:\/\/css-tricks.com\/some-cross-browser-devtools-features-you-might-not-know\/","url_meta":{"origin":312190,"position":0},"title":"Some Cross-Browser DevTools Features You Might Not Know","date":"March 22, 2023","format":false,"excerpt":"I spend a lot of time in DevTools, and I\u2019m sure you do too. Sometimes I even bounce between them, especially when I\u2019m debugging cross-browser issues. DevTools is a lot like browsers themselves \u2014 not all of the features in one browser\u2019s DevTools will be the same or supported in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":281581,"url":"https:\/\/css-tricks.com\/firefox-devtools-webconsole-2018-retrospective\/","url_meta":{"origin":312190,"position":1},"title":"Firefox DevTools WebConsole 2018 retrospective","date":"January 21, 2019","format":false,"excerpt":"Here\u2019s a wonderful post by Nicolas Chevobbe on what the Firefox DevTools team was up to last year. What strikes me is how many improvements they shipped \u2014 from big visual design improvements to tiny usability fixes that help us make sure our code works as we expect it to\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/firefox-devtools-redesign.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288072,"url":"https:\/\/css-tricks.com\/color-inputs-a-deep-dive-into-cross-browser-differences\/","url_meta":{"origin":312190,"position":2},"title":"Color Inputs: A Deep Dive into Cross-Browser Differences","date":"July 12, 2019","format":false,"excerpt":"In this article, we'll be taking a look at the structure inside elements, browser inconsistencies, why they look a certain way in a certain browser, and how to dig into it. Having a good understanding of this input allows us to evaluate whether a certain cross-browser look can be achieved\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/color-input.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340490,"url":"https:\/\/css-tricks.com\/devtools-for-css-layouts-2021-edition\/","url_meta":{"origin":312190,"position":3},"title":"DevTools for CSS layouts 2021 edition","date":"May 13, 2021","format":false,"excerpt":"Chen Hui Jing covers some recent movement in DevTools: Firefox\u2019s grid inspector was pretty full-featured from the get-to and\u00a0released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a\u00a0basic grid inspector tool in Chrome 62\u00a0that let developers highlight elements using grid layout, but more\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/chrome-align-1280.png?fit=1200%2C443&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262598,"url":"https:\/\/css-tricks.com\/sliding-nightmare-understanding-range-input\/","url_meta":{"origin":312190,"position":4},"title":"A Sliding Nightmare: Understanding the Range Input","date":"December 27, 2017","format":false,"excerpt":"You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it's not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/11\/structure_firefox-an.png?fit=1000%2C741&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332415,"url":"https:\/\/css-tricks.com\/careful-when-changing-the-display-of-summary\/","url_meta":{"origin":312190,"position":5},"title":"Careful When Changing the Display of `summary`","date":"January 11, 2021","format":false,"excerpt":"I got a very helpful bug report the other day (thanks Kilian!) about the <details> element in a blog post of mine not showing the default \u25b6 icon, and thus looking rather like any ol' random <p>. It wasn't terribly hard to diagnose. I just opened the page in Firefox,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?fit=1200%2C398&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-02-at-12.51.48-PM.png?fit=1024%2C473&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/312190"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=312190"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/312190\/revisions"}],"predecessor-version":[{"id":312399,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/312190\/revisions\/312399"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/312195"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=312190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=312190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=312190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}