![](/style/images/good.png)
![](/style/images/bad.png)
Debug your CSS with outline visualizations.
source link: https://www.otsukare.info/2016/10/05/debugging-css
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Reading The GDS blog post on how to prototype in the browser, I realized that it's always good to explain little tips for the benefits of others. Their technique is something I use on a daily basis for modifying content, evolving a design, etc.
When diagnosing on webcompat.com, I often use a trick for having a better understanding of the way the elements flow with regards to each other.
Using CSS outline
for visualizing
David Lorente reported an issue about the menu of Universia. Basically two items where missing in the main navigation bar of the Web site.
Hovering the menu with the mouse and doing ctrl+click to get the contextual menu, I can choose inspect.
![Inspect Contextual Menu](https://www.otsukare.info/images/20161005-menu.png)
It opens the developer tools and place the cursor on the right element and displays its associated CSS.
![Inspector](https://www.otsukare.info/images/20161005-inspector.png)
For this particular issue because the elements were not immediately visible. I decided to add a higher z-index
in case there were hidden by another layer, but more specifically. I selected the wrapper element for the navigation bar <div class="header-nav">
and headed to the +
sign on the right side.
![Add new rule](https://www.otsukare.info/images/20161005-add-new-rule.jpg)
Clicking on it will help you to add a new rule for this selected node (element) in the inspector. In this case, it will add .header-nav
.
![header nav selector](https://www.otsukare.info/images/20161005-header-nav.png)
which I usually edit for adding all the children of this node with .header-nav *
. Then I proceed to add an outline
CSS property with a color which will give an acceptable contrast, helping me to understand what is happening. In this case outline: 1px solid pink
![outline css rule](https://www.otsukare.info/images/20161005-outline.png)
The result helps to visualize all the children boxes of the div
.
![Visualization](https://www.otsukare.info/images/20161005-visualizing.png)
It is now a lot easier to understand what is going on.
Why CSS outline
?
The reason I use CSS outline
is that they do not participate to the intrinsic sizes of boxes and does not destroy the flow of boxes. It just makes them visible for the purpose of the diagnosis.
What are the tricks you are using which seems obvious to you? Share them with others.
Oh and the site has been fixed since.
Otsukare!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK