Web Development Tools: Firefox Inspector
Back in the old days of static websites, it was pretty easy to see which elements were inside which layers. But, with Content Management Systems (CMS), there are layers created on the fly by the CMS, as well as, layers a developer creates in the customizations. What this means is that the developer can’t see all the layers that will go to the browser by looking at the template code.
And, whether the site is static (pure HTML/CSS) or dynamic (generally database driven) layers will interact in unexpected ways, and it’s often difficult to see how one lay is overlapping or pushing on another layer. Many browsers have a tool built into them that allows you to see individual layers. For this post, the screenshots are of the Firefox Inspector. (Firefox 61.0.1) I will use two tasks to illustrate how the Firefox Inspector tool helps my work. You can follow along, if you have Firefox installed on your computer.
There are a number of features in the Inspector, but for this post, we will look at finding the CSS layers.
I want to change the size of the text in the tagline (called the site description in WordPress. The Inspector tool can help me isolate that layer. The Inspector shows me the size of the layer and also all the selectors. On the screen, the layer is highlighted in blue. In the left panel, I see the layer with its descriptors in it position with the rest of the code. On the right side, I can see that code for the tagline layer exists in three places: 1) inline: 2, style.css: 42, style.css:631. The fact that there are three sets of code, makes the task more complicated.
Also, the fact that this piece of text is in a <span> would normally mean that there are some formatting features I can’t add to it. For example, I wouldn’t be able to center it. But, in the first layer, it has the display: block; rule, which means that it can function with all the rules that a <div> can. In my opinion, it would have been better just to put this in a <div> in this situation.
The positioning of the search icon in the banner is driving me crazy!