Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

Elijah Manor
InstructorElijah Manor
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

Firefox DevTools has an awesome feature that helps you determine Inactive CSS, to know why it's inactive, it gives you hints on how to fix it, and even links to documentation for additional help.

Instructor: [0:00] Firefox DevTools has an awesome feature that helps you determine inactive CSS, to know why it's active, and to give you hints on how to fix it.

[0:09] First, let's take a look at our grid element. We can see some gray declarations and one of them has additional information. It's letting us know this declaration is inactive because it's not a grid container and gives us some suggestions. Let's add display of grid. That works much better.

[0:31] Next, let's look at the flex element. Again, we see a couple of helpful information icons. One is telling me the element needs to be a grid container. The other is telling me it should be either a grid or a flex container.

[0:46] Before we fix it, let's move to its child first, flex item. Here, we get information that flex-grow has no effect since it's not a flex item. It recommends that I give it its parent, a display of flex. Let's do that.

[1:03] Nice, looking better. However, we still do have a problem, but thanks to the informational icon, we can know why. Justify-items only applies to grid, and not flex. We could safely delete this declaration.

[1:19] Before we move on, let's adjust our viewport. The flex item was intended to truncate with an ellipsis when resized to a narrow width, but it's not working. Let's look at the <h2> to dig a little deeper. Here is another informational icon. It's letting us know that text-overflow doesn't work if the element is not overflow hidden, so we can fix that. Now, when we resize, the text is properly truncated with ellipsis.

[1:48] Let's move to the special element. There are several problems with this one, but they're all related. We're told that the z-index does not apply to this element because it is position: static by default. In a similar way, left and top have no meaning to an element with the static position. To fix this, we can adjust its position to either relative or, in our case, absolute.

[2:13] One last example, but these are just a few of the awesome insights these DevTools provide us. Let's select the img element. We're providing a width declaration, but it's not just working. Thankfully, the informational help lets us know that the width has no effect on an element that is inline.

[2:30] If we switch the element to display: inline-block, the desired width will kick in and we could tweak the display in the DevTools to play around.

egghead
egghead
~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today