Advertisement
  1. Web Design
  2. CSS
Webdesign

Find Out Why Your CSS Isn’t Working! New Firefox DevTools Features

by
Length:ShortLanguages:

There isn’t a web designer alive who doesn’t wish they could get back the hours of their life spent scouring CSS for seemingly impossible-to-find bugs.

The team of developers working on Firefox DevTools might not be able to restore that lost time, but instead they’re bringing us new tools that can help us get through our future troubleshooting as fast as possible.

In this article you’ll see how to use two new features available now in Firefox Nightly DevTools (or “Developer Tools” depending on what you prefer to call them) to help you find out what’s wrong with your CSS, and at the end of the article you’ll also get a peek at a bonus bit of recently added functionality.

Download Firefox Nightly
Download Firefox Nightly

1. See Why Inactive CSS Isn’t Working

How many times have you added some CSS to your design, checked your preview, and found that your changes have had absolutely no effect? If you’re anything like the rest of us the answer is almost certainly: many, many times.

Well, the new “inactive CSS” messages in Firefox DevTools are going to help you see what’s missing from your code at a glance.

Here’s an example of how you might use this functionality.

Let’s say you’ve added a <span> element to your page to hold an SVG icon, and you want to restrict it to a size of 50px by 50px. You’ve added height and width properties to your CSS accordingly, however they don’t seem to be controlling the element size at all. You look in the Firefox DevTools inspector tab at the Styles panel, and see both properties are greyed out and have a little ⓘ icon at the end of their lines.

You hover over this icon and Firefox shows you a message telling you why the CSS isn’t working:

why the css isnt working as you thought

The message tells you the reason the width and height properties are inactive on this element is because its display type is set to inline.

Firefox recommends switching to display:inline-block;. So you follow the provided advice and the issue goes away with the icon now sized at 50px square as intended:

element resized just as it should be

Right now the inactive CSS flagging system is still very new and doesn’t yet have the complete list of informative messages it will have when it moves over to Firefox proper. The Firefox DevTools team tells us:

“We will be adding a larger collection of warnings very soon too, to warn users about more tricky CSS cases.”

That said, the functionality that’s there now is already helpful and ready for use.

2. List All Elements Related to a CSS Warning

You might think of DevTools consoles as being something primarily used with JavaScript, however you can also use the Firefox console to see warnings about issues in CSS. To ensure you’re seeing these warnings go to the Console tab in DevTools and hit the little CSS button highlighted in the image below:

the little CSS button highlighted

With this switch toggled on, if there are problems in your CSS you’ll likely see a warning in the console here.

For example, let’s say you’ve knocked together a quick style to create a stack of boxes but unbeknownst to you your keyboard is playing up and blinked off for a second right as you were specifying a unit on your padding value.

You see the DevTools console is showing you a message saying the padding value couldn’t be parsed and that the declaration has been dropped. In earlier versions of Firefox you would have seen this message and a line reference for the stylesheet, but now it can also display a list of every element effected by this dropped declaration.

To see this list you expand the warning message and its nested NodeList item. You can now see the HTML of each element, and when you hover over the little target-like icon at the end of a line the related element is highlighted on the page:

the related element is highlighted on the page

Click one of the icons and it takes you directly to the related location in the Inspector panel, showing both the HTML and CSS in question:

 both the HTML and CSS in question

Here you see the problem property greyed and crossed out, you then spot the missing unit on the value and solve the issue right away.

Bonus: Print Preview From @media Rules

Firefox can now give you a live preview of how your site will look in print, as determined by its media queries. This addition may not directly relate to finding issues in CSS, however perhaps we could still broadly consider this a troubleshooting feature, because how many of us actively consider the design of how our sites appear in print? Maybe the often complete absence of CSS that could be useful is a problem in itself.

The ability to easily preview your print version can be a great way to help you fix that problem - if you deem such a solution valuable for your audience. When viewing your site in its normal mode open DevTools and, in the Inspector tab, click the little page-like button at the top right of the styles panel:

open DevTools and in the Inspector tab

You’ll then get a preview of whatever styling has been generated from your @media print {...} rules:

preview of whatever styling has been generated from your media print  rules

If you want your sites to look pretty in print, this feature will be a great help in making that happen.

Wrapping Up

As a final note, the support for CSS subgrids we talked about in our article CSS Subgrid: Features, Syntax, and the Problem It Will Solve, (as well as associated DevTools features), is close to landing and expected for Firefox 69.

Firefox DevTools are fantastic and have several features found nowhere else, so do yourself a favor and check out what they have to offer!

Keep up with what’s happening in DevTools over at the Firefox Nightly Blog.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.