Stop using Chrome if you're writing CSS

Start creating responsive layouts with confidence with my free responsive layouts course: courses.kevinpowell.co/conque...
Chrome is a great browser, and for JS debugging it has the upperhand, but if you're writing CSS, there's no reason not to be using Firefox as your development browser. It has some amazing features for helping you edit CSS that Chrome just doesn't have.
In this video, I explore the ones that aren't the grid and flex inspectors, which are what get most of the attention (because they are awesome too). If you don't know about them, check out this video:
Writing both JS and CSS? No harm in switching back and forth depending on your needs at the time. Locking yourself into only using one is silly.
#firefox #devtools #css
---
Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter
---
Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@KevinPowell]

It feels a little strange posting content with what's going on in the world right now, but I do think it's important to keep on going if we're able to. I hope you, you're family, and you're loved ones manage to stay safe and healthy during this time, and my heart goes out to anyone who's having a tough time because of all this.

[@Dogger1230]

@Kevin Powell We, the world, also need a sense of normalcy, too, rather than just being able to focus on Coronavirus. Your videos help us get that. Thanks Kevin! Great video as always!

[@404-UsernameNotFound]

First COVID-19, now today we're dealing with a 5.7 earthquake and aftershocks. Glad for this video diversion 😁

[@kaine2694]

In times like those I think it is best to keep learning and doing what we are doing. Thanks for this video. Didn't know lots of that stuff.

[@YELLOWFROGdesign]

I love your tutorials! I was wondering... what do you think about coding WordPress themes from a graphic file instead of using page builders? Any other CMS platform you recommend in order to provide clients with a robust set of features? Thanks!

[@blonduose]

Thanks, it's quite difficult to study while in quarantine, but your responsive course (and yt videos) is (are) helping me not lose track.

[@ArnoDePachter]

“Firefox tells you why it doesn’t work” - SOLD

[@aviroxi]

🔥🦊

[@dominikdodo2696]

For JS development there is a nice feature that Firefox has. When you inspect element you can see labels such as flex, grid, but also *event*. When you click on "event" label you can see all the events attached to the element.

[@officialAXVin]

It was mentioned at 5:08

[@kyouhyung]

What even helps you more when working on layout are scroll and overflow labels.

[@boombapswag]

Chrome has the same thing - it's next to css rules in the "Event Listeners" tab.

[@oliverbriscoe243]

@@boombapswag and it's even better because you can remove them

[@sallus449]

Bruh chrome does that

[@HarshRajAlwaysfree]

"For shortcut people its ctrl+shift+I" F12 : _am I a joke to you?_

[@KevinPowell]

Haha, it's way too far away, I have to move my hand too far for that one :P

[@Luggruff]

Harsh Raj Always free: ""For shortcut people its ctrl+shift+I" F12 : am I a joke to you?" Right-click -> Inspect: _am I a joke to you?_

[@akumekyuketsuki]

@@Luggruff Wait a sec...did your hands just leave the keyboard?

[@Luggruff]

@@akumekyuketsuki yeah, though only in a move my brain doesn't even register at this point.

[@minamulhaq]

@@KevinPowell but once

[@D7460N]

Love how real you are as you present. Even for a pro, not everything has to be perfect. Finding fonts you didn't know were there. Relatable, practical, and informative. Thank you.

[@Ostap1974]

May be to consider createing small video series of Chrome vs Firefox dev tools deep dive topic by topic? They are very similar, but both have some strong areas imo.

[@mityaboy4639]

A year later KZbin suggest this video... what a year. thanks for the Firefox tip.

[@JonathanGibbs24]

The use case for these CSS helpers is super beneficial. We frequently do collaborative coding sessions with designers to make style updates on the fly. Knowing these tooltips & style editor is available is a huge plus - thank you!

[@K0nc3pt10n]

It amazes me how many devs are stuck in the past using Chrome. I took the challenge went from Chrome to Firefox and haven't looked back since.

[@nadeemrza918]

Can you make me learn few differences in chrome from Firefox as I started with Firefox only.

[@joe-un1ky]

Been using Firefox forever. Nice to finally see some love

[@ethangroat8333]

Same here!

[@Felipe-pb9gu]

Same here... Firefox > Chrome

[@jodorgu8640]

Have always preferred FF not just for the css-centric devtools but because of Mozilla's policy on corporate transparency and protection of user privacy. Also the built-in plugins are great

[@asandax6]

Yeah the plug ins are awesome but they dropped them on mobile and it made Firefox not good😔.

[@sligit]

@@asandax6 There are still plugins on FF mobile but they're curating them so yeah there are very few at the moment but more will be coming.

[@AhsimNreiziev]

Not to mention the fact that Chrome lacks basic functionality like being able to scroll the tab bar left or right......

[@carolmckay5152]

Thanks for that Kevin, I found that contrast inspector one day a while back and couldn't find it again. NOW I know where it is - terrific!

[@codercow1941]

Hey there Kevin, I have just finished the course and I wanted to say that it's been really helpful for me starting out a a front end dev, and to show that I'm gonna be showing my progress of my learning by streaming in this youtube channel. Thankyou for what you put in for me and everyone else who is going to be a learning the lang of HTML and CSS. :)

[@roeltaga]

Thank you for this video! I'm a junior web developer and for years now I've been using Firefox just because it is so much better than any other browser! I am so happy to see people like you spreading the word!

[@jaydenmoon1165]

I know this video is older - but your videos have helped to keep my mind on web dev and design and off of things that may get me down - thank you for all your content :D

[@mypassportpicsux]

OMG, your timing is impeccable! I’m at home using this extra time to learn CSS in-depth and I’ve wasted an entire morning making this particular header responsive. I finally finished, but I’ll definitely take your advice and check out Fire Fox going forward. Be well and thanks so much!!

[@ead5590]

Was really great to get to know about it.. I'd been using Firefox for grid related issues but the CSS dev tools features will surely help.. Thanks a lot Kevin! 😆

[@danthompson1m]

Great tutorials. Pleasant, upbeat manner and delivery - makes learning fun. Well done!

[@darinweaver6706]

as someone who is learning full stack this is just the kind of thing I need. CSS drives me nuts and debugging it is a *nightmare.* I often get to the area in the inspector where I see my style overridden by _user agent_ or somesuch and I'm like "WHY....!?". This could solve those problems where its valid syntax but just logically the flow or order or specificity is wonked up. Thanks for the vid..

[@soul.rebel1986]

Wow! I have been searching around for accessibly tools! Thank you so much this was extremely helpful 😁

[@juhavehnia7862]

Great tip! Even us who started with CSS 1.0 in the early days of web this can be really handy. There are plenty of cases where you end up wasting time trying to figure out why something doesn't work.

[@pagoli]

Thank you! I'm blown away ... that's what I was looking for. Finally I get why there are sometimes errors when using flexbox designs ... I was nearly giving up on it.

[@ayushp5882]

I'm learning CSS, and this channel really helps. He does makes css so fun and easy to play with. 🤩

[@danebrouwer]

The fact that you said "Shift" before "Ctrl" in the shortcut bugs me more than I care to admit 😂

[@KevinPowell]

haha

[@kermitec]

on a PC you can also just hit F12

[@cleptor]

I understand how you might feel. Standard macOS notation uses a "-" in keyboard shortcuts. Using a "+" like in Windows bugs the hell out of me.

[@casperdewith]

The order is Ctrl, Alt, Shift.

[@hasnaindev]

He's a mac user, what can I say.

[@FunCubing3x3]

Great video! I will likely be working with css again soon after becoming rusty at it, so your tips are very valuable, thanks! Also, the various tools that we have at our disposal for full stack development are becoming great e.g. VS Code

[@amlslmn4573]

Always good advices ! And your pronunciation is just perfect, I can understand everything as french ^^ Thank you very much Kevin, you're a king !

[@FlorinPop]

Nice tips! Thank you!

[@KevinPowell]

Any time 😁

[@ajibolanle]

Thanks Kevin! Great tips! I didn't bother downloading Firefox when I changed my system before but I have it downloaded now! Definitely going to try these out. 👍🏾

[@rainwalker2420]

I have installed Firefox developer and nightly and using Firefox developer for past a year but didn't know about these extra features. Thanks for this tutorial bro.

[@MikkoRantalainen]

11:00 Nice, I hadn't noticed that accessibility tool that you can just hover around the page. Thanks for the tip!

[@MB-zj3er]

Saving the CSS to a file from the browser is very nice thing alone that I was not aware of! Thanks for the video. 👍

[@berenjor]

This is the very first video I saw from you and it made me subscribe. Great work!

[@michalroesler]

That's an awesome video Kevin. Thank you so much. Impatiently waiting 4 the next video tutorial.

[@janpawedwa4590]

2:33 Ok, I am convinced already, downloading Firefox now!

[@craigleppan7164]

Thanks Kevin: trying it now. That is my issue right now not knowing where to look and I thing you have helped me hHUGE dude.

[@adalbertojosebrasaca9697]

Awesome !!! This is one of those tips that save hours of research on the internet looking for the solution of the error. Thank you so much for share that information.

[@pbrasil88]

* Solution to the problem / Solution for this problem #grammarpolice

[@rickfearn3663]

Terrific video Kevin. I was not aware of the advantages of Firefox when writing CSS and using the grid. Thanks!!!

[@alexhek]

Thanks for the great insight! I am learning CSS and having these Dev tools will be massively helpful 😍

[@N0thingAs1tSeems]

Wooooooow, for someone like me who has been fumbling around in CSS and is still googling how to scale images, this is extremely valuable information. Thank you

[@Honestly_Marie]

I CAN’T EVEN RIGHT NOW! This explains so much about the troubles I have with Chrome and because all of my literature has told me this was the way to go, I thought it was always me. Bless your heart and thank you for the information here!! Also, did you actually make those changes to your website? 😉

[@dmays67]

Woah! Having just switched back to Firefox from Chrome I absolutely Love what you're showing as helpful tools for this budding developer. Nice one mate!!

[@drikting]

Thanks Kevin for this helpful video! With Chrome, I have to keep saving an unchanged CSS file to reflect a change made elsewhere in Flask, and even then I am uncertain. With Firefox and browser-sync, so far it seems reliable, at most I just have to refresh the browser to display the last changes. Well done :-)

[@ricardodesirat2590]

Great Video Kevin! It would be nice to have one with you fixing your site's accessibility issues (and some new ones you put there for learning purposes) A 2 in 1 video :)

[@KevinPowell]

Good idea! Only issue is then I'd have to show everyone the terrible mess that is my sites code 😂

[@ricardodesirat2590]

​@@KevinPowell don't worry, you have an excuse, some of them would be put on purpose for learning reasons :)

[@miaangela2398]

Awesome thanks for sharing! Will get Firefox asap. I write custom CSS for WordPress and I think this will help me a lot

[@m0shtik]

Man, you've just made my life so much easier!!!

[@SYPCWAK]

Thanks for the wonderful and informative video! This is a big help to me! For my MacBook Pro, I must press Option-Command-i to get the inspector to appear. And Option-Command-m for mobile.

[@romtekch4958]

That kind of tip from FF dev tools has helped me MUCH recently. Very useful. I think it's a relatively recent addition.

[@anroburger7689]

You are my hero 😄 this was so helpful, I'll be following you from now until forever 🤘

[@rebelshadowrm]

I always loved the change log that Firefox dev tools has. Sometimes I get lost changing things in the dev tools to get something to work the way I want but I forget about all the elements I changed, so the change log is incredible

[@MiguelFernando]

I'm thinking about how many hours I could have saved knowing this and fiddling with CSS. Will definitely pass this info along !

[@mahimaandani]

Made it to last video! It was an amazing learning journey, all thanks to you!

[@lancen6805]

When I first started out I always did dev with FF. At some point though FF always took forever to load up so I hesitantly moved over to Chrome. After using Chrome I noticed that it too took awhile to load up after awhile. I kind of worked through those pains with Chrome since I was using all their apps. I have gone back to FF but not full time. I do miss it. I love the grid feature built right in. I am pleased by the saturation of colors as well. I might just go back full time with it. Thanks renewing my interest.

[@fahadus]

I keep trying out FF features every few months and love what I see. But I'm basically stuck on Chrome until FF or any competitor adds something like _Local Overrides_. I don't hear people talk about that feature enough. Very easy to set up. Then, you can freely change your stylesheets and work on Inspector stylesheet to your heart's desire without saving anything to your project, they persist! If you open DevTools on the page, your changes will automatically load. You can also reload your inspector you were working on priorly. The same with JS files. You can make changes on the fly without having to save anything on your project files if you're just testing a few things out. A LOT faster to work in the browser, compared to saving each change on the project and seeing it.

[@jonez4143]

Thank you! I literally never even thought of using Firefox's dev tools. This is all so good to know

[@patrickpacalolo]

I'm brazilian, and i dont know english as i would like.. but you say too clearly, that gets easy to understand. I changed(again) my browser to Firefox, because in chrome the adblock extension can’t block youtube ads anymore =/ This happens yesterday, and today i learn a lot great things about Firefox.. thank you so much!!

Hi kevin, just congrat 4 u great content, extremely usefoul. Many thanks

[@diegognoatto590]

"changes" = my fav tab ❤️

[@agk2011]

This is a great video. Keep it up, man.

[@ab.md.faisalrahman3310]

Thanks for this cool video. When it comes to positioning things, it always gives me headache 😅

[@jeffgubbins1033]

Enjoying your video. One thing on Mac to open the Developer Tools on Firefox it's: Option - Command - i not Shift - Command - I as stated in your video.

[@rileycroft5835]

Soo many useful tips on Your channel, wow man 😊 Here I’m downloading firefox for the first time in years!

[@robertzeurunkl8401]

This is amazing. I've always raged at the chrome debugger wondering _"Why can't it tell me WHAT is overriding this style?"_ This is fantastic help.

[@kendalk08]

ya i need to get better at using stuff other then its just super easy to style the same element repeatedly and you can do anything with divisions. the stuff i build can be a headache for people to edit and rewrite though because everything is incredibly specific. getting better at it though.

[@0MaXxXiMuS0]

Hey Kevin. First time on your channel but I am learning web dev now and CSS. I had seen in a few places that Mozilla was better for CSS but didn't really explain why. Thanks for the info! should help out a lot. Going to DL Mozilla now :).

[@richtraube2241]

Had no idea you can save changes in the inspector. Very cool.

[@mihailodukic601]

Hi Kevin . Keep up the amazing content and stay safe !

[@nurantarlan]

Thank you sir for awesome tips. They are gonna help me for improving myself in css))

[@barnetteputong2652]

Thanks for all the tips. Very helpful!

[@esagecantu]

In my progress of solidfying my HTML/CSS knowledge, I appreciate this tip.

[@insaneviruss]

Wow never knew that. Thanks a lot Kevin!

[@jimbo-dev]

On Linux there is Epiphany browser which is webkit based so you can do debugging for Apple devices without mac. And you should replace Chrome with Brave browser, because some adblockers block specific css classes which can be tested on Brave (it has some generic adblock preinstalled). Added bonus from Brave browser is also the lack of Google tracking but the same web developer tools as on Chromium.

[@yomikolawole5073]

Thank you Kevin for these videos, they have really helped my learning.

[@abdull264]

Hello Kevin, Hope you and ur family are doing well. Apart from teaching a good stuffs, you're a good hearted person. Very nice to see ur videos, I just started learning HTML5, CSS3 and JS as well. It's a good information that Firefox dev tool is better than chrome dev tool for CSS developers. I subscribed ur channel just now and looking forward to see more videos about front end development. Thank you. God bless you and ur family. Take care.

[@andrebonizi7953]

I wish I've watched that video like 3 years ago, really good man!

[@vladutcornel]

Firefox grew a lot in the last 3 years (Basically since Quantum). It's possible some of the features weren't even around back then.

[@Toughmenchannel]

thankful i watched this video before i get into deeply in CSS. Thank you Kevin.

[@akay64x2]

Thanks man, quite an eye opener :)

[@pietroaretino6390]

Oh man this is great! I'm teaching myself web dev. and I love practicing through trial & error on little projects but it's been real hard figuring out why certain CSS code wasn't doing what I wanted it to. And just like in your example, I've had moments scratching my head seeing that the elements and values and properties are all correct and accepted but it's still not behaving the way I want it too. I had no idea about this Firefox feature! This is very exciting. Question, does the inspector tool update when you update your code? Or is a browser refresh always required? A live changing inspector would be great.

[@JayJagpal]

Thank you for your presentation, it's a good representation of FF's debug tools. However You highlighted issues with Chrome (and in this FF) of which aren't accurate. For example Chrome dev supports inline editing of the styles; bound to a workspace for live editing. The case where you would refresh you page and lose your settings is fixed. Will you be producing a similar chrome comparison?

[@sunquist9258]

Allways used Chrome while developing React apps. You opened my eyes and now considering switching to FF when working with stylesheets, thanks!

[@K0nc3pt10n]

I moved from Chrome to Firefox for React development and found that I preferred Firefox.

[@kristianulvund4274]

Thank you once again, Kevin! I will definitaly be using Firefox from now on🤩

[@sskdev5116]

This was really informative. I really did not know about it

[@marian7429]

When I saw the title I didn't expect to see another browser better than chrome in working with css files. After watching the video I realised I was wrong. Thanks!

[@danteeep]

Hi Kevin! thanks so much for the course !! You have uploaded another playlist called " HTML and CSS Core Concepts". Would you say this is the next step for someone who is nearly finished with this playlist? I think many people who are watching this playlist will have the same question. My goal is to learn more about Front End Development. Thanks so much for the playlist and your answers!

[@ashleyhoward14]

This is awesome! Is there a way to link up vs code's live server plugin to open in Firefox instead of chrome?

[@knsaber]

One of my favorite tips for something similar to the sliders, is using mouse wheel in Chrome on the css values, and it will act like a scroller. CTRL and SHIFT will change the increments to 10 and 100.

[@tejasshekar]

Was searching for how to write a better CSS as I started learning CSS this week. And this video.......it just made me install firefox coz I'm literally sold when it shows what's my issue and how I can learn about it. Damn.

[@ManeelxAkosAdor]

I switched to Mpozilla for css debugging after watching your video. Btw, you are so peaceful despite you work with css, I admire that jajaja

[@darkbluebossa]

I used to use Firefox. Then I formatted my laptop and started using Chrome. Yesterday I installed Firefox again and I found it faster. Not to mention the Dev Tools are better and it´s better for me to use an alternative to monopoly browser

[@aaaron19]

I also realized that Firefox is so much faster than Chrome!

[@olizandrey2]

First - thank you for making this video. I'm going to use Firefox from now on! Secondly. I've heard mentions of a history tool for firefox inspector. Is that correct? A tool that shows you what you changed through the inspector, so you can find and copy multiple corrections?

[@philmuchbetter]

Interesting tips, thanks for sharing. Chrome still has the edge for me with local overrides, that makes coding CSS in the browser a beeeze. would love to see that in Firefox.

[@sandeepdehal711]

Wow Amazing Work man 👍🏻

[@xstrafez_c2017]

Thanks so much for the advice!

[@Fubbel42]

Great content, you're an excellent teacher 👍

[@BobDschingisKhan]

Thank you so much for your effort. 🤗

[@PHPRunnerTipsAndTricks]

Very Nice. Well done! I am working with CSS every day of my life. How am I unaware of this? Thanks, Bud.

[@norvisnorvis7592]

Thank you so much for this Kevin, currently the company that i work for can only use Google Chrome because of the proprietary program that the company uses can only be viewed on Chrome. Speaking to accessibility, im really trying to find some information on alt text and when we should use alt text and when we shouldn't use it. Thank you for making this good content.

[@KevinPowell]

always have an alt attribute. If it's a decorative element, no need to give it anything. If it's something which helps put things in context, it should be included. This might help - a11yproject.com/checklist/#section-images

[@ProgrammingWithPax]

Great video. Thank you Kevin!

[@ridwansahardid9339]

thank you so much only I watched this video in one minute when he said use the firefox I stopped and I tested it's really amazing very helpful

[@decoy6773]

just wanna cry, cause i didn't know about this features of firefox, and it's blamed me every time on Chrome. Thanks a lot Kevin!

[@lukeholland8083]

This is quite neat, never knew about this.