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

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.