Yeah, you have read it right. Stop using chrome or any other browser. Most of you might get offended, but I know what I am talking about. Chrome is the best choice when it comes to javascript and other stuff. Even I am writing this article using chrome. So, why should you stop using chrome? Well, I usually suffer a lot when CSS doesn’t work the way I want it to work. It’s totally my fault, but how can I get help? or how can I know the CSS I am applying is invalid here? Sometimes, these small CSS tweaks can make you suffer a lot.
After a lot of searches, I found a valuable resource to help me understand these CSS tweaks. I found the Firefox browser. I will explain to you, why you should reconsider your browser and start using Firefox while learning CSS.
If something doesn’t work, it will tell you why.
While learning CSS, you might experiment with CSS. Sometimes, something didn’t work and you have no idea that why it didn’t work. Here come’s Firefox, to let you help in this situation. Let me tell you how.
Above is the Developer tool of chrome and you can see that I have applied vertical-align property to the button and it didn’t work. As you might know that why it didn’t work. What about beginners, who are just learning now? For them, it might be arduous. Now let’s see Screen Shot of the Firefox developer tool.
You can see that it’s telling me what was the mistake, I was using display flex for the button, changing it to display inline will work.
What are the fonts, the website is using?
As a beginner web developer, you might be wondering about different fonts of different websites. When I started, I was so curious to know about the different kinds of fonts, some famous websites were using. Unfortunately all in vain, until I found Firefox. In the firefox developers tools, you can actually for fonts. Here’s how.
Go to the Website, then open the Firefox developer tool. Navigate to Fonts and then select All fonts on Page. There you will be able to see the list of fonts.
If you want to see the font of a specific header or any paragraph, select that paragraph and then see repeat the same process.
FlexBox inspector
CSS flexible box model is commonly known as flexbox model, it is CSS layout model. The flexbox layout allows responsive elements within a flex container to be automatically arranged depending upon screen size.
If you are working with flexbox and want to inspect the flexbox container then Firefox FlexBox inspector may be your friend in need.
You just need to open the inspector and there navigate the flex item. Go to the Styles tab and you might see the property of display flex. In front of flex, you may see a small grid icon just click on that and you will see that the flex container got highlighted. It is very useful when you are working with flexbox properties like flex-wrap etc.
CSS Grid inspector
How important it is to keep track of rows and columns in CSS Grid and Firefox CSS inspector helps you do that very easily. To open CSS inspector, you just need to follow the process as you did to open flexbox inspector. After opening grid inspector you can see the highlighted rows and columns.
This website used in the image is not affiliated with me. I just opened it to show you as an example.
Accessibility Inspector
One of the best ways to fix your website Accessibility is to inspect it through the Firefox accessibility inspector. Open the developer tool and navigate the accessibility or you can use the shortcut (shift + F12). Where you can scan for issues and it will also let you know, how you can fix these issues.
Conclusion
As you can see, how helpful Firefox can be while learning CSS. There are a lot more to just these, but I guess these features are pretty much used every time. So, I hope you are okay with my opinion now.
If you liked my article, give it a like and let me know if you know any other feature of firefox which can help the people. Share it with your friends, because Sharing is caring.
Top comments (6)
Firefox is definitely my preferred browser for CSS and styling, but I think Chrome has been catching up (and branching out in their own way).
I still use Firefox for dev, but nice to see competition between browsers (and more options never hurts!).
Indeed
Unfortunately Mozilla laid off a majority of the Firefox development team. I wouldn’t expect much from Firefox for a while, sadly.
Ohh, sad to know
Nice overview! I usually use Chrome for my dev browser but I’ll check out Firefox’s dev tools today. The flexbox and grid helpers seems useful
Yeah, you should. I too used Chrome but for good I made a shift.