Stop using Chrome if you're writing CSS

if you're trying to learn CSS and you're using Chrome you are doing yourself a disservice we're gonna be seeing why in this video hi there my name is Kevin and if you're new here this channel is all about learning how to make the web and how to make it look good with weekly tips tricks and tutorials in this video we are going to be exploring Firefox's dev tools because recently I put a tweet up they got a lot more attention that I was expecting it to and a lot of people seem to take it as a personal attack on them not a lot a lot of people were like oh really but hey that was surprised with how many people weren't aware that Firefox is CSS inspectors were so good and I think some JavaScript people were sort of offended that I might have tapped chrome because really chrome is great when it comes to that side of things but for CSS Firefox is literally leaps and bounds above where chrome and other browsers are let's check out why in this video so here we are inside vs code and of course I do have a Firefox know but here because we're taking a look at before we get into why you should be using them it is very similar to Chrome you can right-click and you can do a nice little inspect element or if you're the type of person who likes shortcuts you can do a shift command I if you're on a Mac or if you're like me on your on Windows you can do a shift control I and it will pop open something looks a little bit like this now we're by default in the inspector mode here and what's really cool with this I'm actually going to zoom in I'm gonna move stuff around here a little bit we're gonna play around with different stuff in here but just for the video I'm gonna do a command plus and I think what I'm actually gonna do just to make this bigger is separate window it and bring it up over everything like that so we didn't really see what we're doing alright so I've never had my dev tools to him this much of my screen before but it's gonna make it a little bit easier for all of you to see what's actually going on so if we take a look in here and of what's going on the very first thing I want to look at is tooltips that show you when things are not working so I did something really silly and on my button here I tried to put a width and a height and if we come and scroll down we're seeing that width and height aren't working and what I really love with Firefox is when something is a valid property but it doesn't work most of the time it tells you why so I'm gonna click on this little guy here and then I'm just gonna click on my by now and it highlights it and if we come and look and I find I put it within a height and they're not working and I go why well look we had a little tooltip here we get this little eye so it's not just saying like if you you know if you misspelled something like here you're getting a little warning saying that invalid property name so that's saying that this just doesn't work because it doesn't know what it is but when I hover on top of the eye you can see height has no effect on this element since it has a display of inline try adding display:inline-block and really cool they give you a learn more that you can click on and if you do click on more to bring you to the MDN article that talks about height itself so it might not always bring you somewhere that gives you an answer but it's pretty cool that they try and help you like that so with we can see the same thing right there so I love that but not me he might be going Kevin I know not to give whit's and heights to buttons you should just review some padding let's fix that padding I don't know we'll do 1m 2m make a really big button and there's my very big button but let's say it's another situation where I wanted these to be two columns and if we come and we take a look up here you can see I did up my min with 600 pixels and I'm pretty sure I'm bigger than that and I did man I'm doing my Flex Direction row why is it not working and this is infuriating me and I can't figure it out I grab this little guy click there make sure I grab my calls and then if I find that here we go Flex Direction row flex Direction has no effect on this element since it's not a Flex container try adding display flex you go what I forgot to add display flex that's weird there's two times this might come up so this was in a media query and I sort of did that on purpose to say maybe you forgot to put it over here to start with or it could be even if you had to display flex but maybe you did display flex or something like that and you made a silly typo and it's still not working this can really help you out in actually finding it because obviously we're getting this here but right there you're going I'm sure I did but you look up and then you're certain - oh I made a little silly typo so you can come there and fix it and then you get the two columns that you're hoping for something like that so these little tooltips and again this is if you're trying to learn CSS these types of things are lifesavers and explaining you know I know I'm using a valid property and now you're telling me that it is valid but is why it's not working how amazing is that if you're trying to learn something and you get these little hints along the way it is absolutely amazing there's something that wasn't part of my original tips that I was in my script but you'll also notice here now I get this little flex that shows up so it's really cool here in the Dom it actually shows you when something is a flex container if you had grid it would show you that it's a grid container and also let's go in section to just really fast you can see it's this event and if I click on that it tells me that it's a click event and I can actually get more and I can see the function that happens when I click on it I can see that it's bubbling in a bit more so that can also be really really cool and really really handy that you have your events and your flex and grid all showing up in here in your Dom so that is a nice little alright so next step after that is something it's really this is as someone who likes typography this is really handy if you'll notice here so this is my Dom here's where I have all my style stuff and then here we have like all these different things we can look at and one of the coolest ones here that Firefox has is the fonts I'm not even going to get to the top you can see it is actually listing the different fonts that are used and I'm going to skip this part here and scroll down because you can actually see all the fonts that are on the page and you get the information on those fonts now I only have two in this specific page but actually let's just go and check out my actual website so here on my site if I go over to the fonts tab let's just move some comparison if I go to my fonts here and I scroll down a little bit all fonts on page you can see here it actually lists everything that I'm using so basic sounds once again you can see that I also have the Mary Dale even though when you're looking here you're not seeing it right away and it's because it eventually pops up there and I have the emoji you I did not know I was using that I wonder where I'm using that hmm interesting I'll have to check out check that out so it just learned something new about my own site I'm gonna leave this open actually for a little bit later but one of the other things that's cool you can just easily identify any font that's being used and super nicely and as we saw here we can even highlight where different fonts are just by hovering on top of those so if I come down so I can see I'm I and the black here at the top so you can highlight the different fonts and find where they're really being used on the page but I think my favorite thing here is this cool thing so we have the size so let's go and actually we're gonna select this guy right here so we're selecting that heading and here even actually let's go to the paragraph you're gonna see it's telling me the font size use the line height all the information for that paragraph and if I go over to my title here cool title it's all the information about that is popping up right there don't know so I find that's really really interesting and you can just use this slider and actually see how it would affect your page now one thing with this is it is doing it as an inline style so it wouldn't affect like all your 82's or all the class like that it's only going to be the one element that you've selected but I still think that's pretty cool and play with your line height and see how that's going to affect things directly in the browser of course the letter spacing you can and just you know go crazy with it and get a real idea of how things work and the weight and you'll notice here on the weight I've loaded and pretty much everything because this is just a demo site that I put together but some sites where they're only have like a 900 and 400 available as you're sliding it around this isn't going to work it's just gonna jump when it gets to the next available one but it's pretty cool that you can sort of experiment like that and even I have the italics in there too which don't look so good they're in all caps but it's so cool I find that you can experiment and play around with the fonts like that that's really really neat now if you are playing around with this obviously you know this is sort of similar that maybe you've come into things and toggled stuff and play it around with different things here and you know one of the most frustrating things with that is when you're playing with all these and then you accidentally refresh the page because you want something you lose all those changes you made and you go oh oh no I wanted to copy-paste that I completely forgot so one really cool thing that I could recommend is this style editor right here and if you come in there it pretty much just brings you right into the you know the code your it brings you into the CSS sheet pretty much or that's all my font face stuff here we go styles so we can see there's a media query and I can see the CSS that's written but what's really nice here is I could come in and so let's find my a cool title and let's just say I changed color to red here you can see it's changed live I didn't have to do anything else but as soon as you make it change you'll notice here it says save and I can just click on that and it's gonna ask me if I want to save that as an external save that as my stylesheet so if I came through here and I was making a whole bunch of changes for something for whatever reason I just decided not to go back into my actual editor because I was playing around with a whole bunch of stuff and then I actually liked what I had you can hit save now one thing with this style editor is it's not perfect if you hit refresh everything is gone so you still do have to remember to hit save and play around with that but again you owe nice thing that the media queries if you click on it it enables that media query so you can actually see what's happening there but the ya-ya if i refresh now i will lose those changes so just you know do make sure if you are doing stuff here to hit that little Save button but it's a little bit safer than you know if you're toggling or playing around with stuff here now one of the other things I really like in here is the accessibility tab so I'm actually over my site we're gonna check this out we'll see if I have any accessibility issues I probably have a couple but I'm trying to get better at this so if I go turn on accessibility features it's gonna enable it and it makes it this you know it's gonna look through it gives me my document so you can actually see like I have my document oh we want it for this guy here so actually so shift-command i accessibility there we go Kevin Powell and if I come and look in here I can see the landmark which is my nav so it says it's not telling me what it is but it's saying it's a landmark and then actually I see there's an issue right away cuz all these are sections and I have a landmark at the end I didn't wrap this in a main tag so that means that here I don't have like a landmark for my main part of my body which could be a bit of an issue for screen readers along the way so I've probably want to wrap that up now I think sections that have headings in them sort of become landmark dish or something like that but it would probably be safer if I actually put a mane around all of that just to create another landmark along the way and you can sort of see how things are broken up and there's text containers and you know you get an idea of how a screen reader might go through and what they're seeing and all the different things that are coming through that this isn't really the best part of all of this if you come here and you click on this so that might be if you're on the inspector you know you can grab stuff like that if you're in the accessibility one and you click this guy and you go on something this is where you can get similar to Chrome where it gives you the contrast ratio so you can see that I'm getting a good contrast on those if I come onto this text my contrast is good it's black text I should hope so but these ones that's actually not bad hmm that's probably because the font is big enough but on some of these texts I think my navigation is actually need to give me some warnings so you can see there I'm getting warnings on a couple of the colors that I have set up here in my navigation for example so that could be interesting to note so it's just a little like accessibility searcher which is really really neat and highlight stuff for you and so that is nice now I'm not an accessibility expert by any means but I am trying my best here to be good at it so you can actually check for issues this does say it's in beta but you could just go I want all issues or just contrast keyboard or text labels so if I go to all issues I will get some for sure and they're all pretty much relating to contrast so I should probably watch out on my site and just make sure that my contrast is meeting these standards across the board and I think if I go to my courses I have some issues here which I already knew about and I haven't yet fixed which is shame on me so let's go to all issues and I should get some things about here we go keyboard and text labels so here I have a form that ever it is it doesn't have any label on it I just have placeholders in there so that is a big no-no so it is saying here that oh I have two things and there's a keyboard warning and a text label warning so it's saying that focusable element may be missing focus styling and form elements should have a visible text label hmm so there's two things I could do to improve my site that are really really easy to do so I should probably get on that really really soon and I think here to one of my buttons it's probably that one doesn't have there we go keyboard and you know it's silly of me but I threw this together really fast and you can see that when I tab onto that nothing actually changes but if I hover it is actually changing the state so I'm gonna want to fix a couple of these things up in you know ASAP pretty much so it's just a really nice way that you can run an accessibility audit on your site it's not going to be perfect at all it's but it will flag some contract it will flag some issues for you so it could be a nice quick win for at least the you know the low-hanging fruit which i think is the one thing that we can take responsibility for even if you're not accessibility expert anything that makes it easier is always awesome one thing you could do also is once you're finished testing is you can just turn off the accessibility features I sort of recommend it just because it does affect the performance of other developer tools and should be turned off when not in use there you go and that's really just scratching the surface I've also looked at the grid inspector in another video if you're going to be learning grid you have to be using Firefox as grid inspector there's literally no other way you're just gonna be beating yourself on the head if not so you can always check out at that video if you want on how the grid inspector works because it's amazing but that that first thing that I looked at honestly if I was brand new to CSS that would have saved me so much time it's just the fact that you just go oh I I'm not crazy that should have worked but it's not working because of this good reason why it doesn't that's an even suggestions what you know how to fix it that's wild that's really really cool so if you are learning CSS if you're getting into CSS or you're just writing a lot of CSS and you know occasionally we make silly mistakes Firefox is dev tools are the place to be if you have any other cool tips or tricks please leave them down in the comments below on other things people can learn from and get other ideas and cool things that you can do with the dev tools and if you'd like a deeper dive in any of the functions that I looked at in this video or other ones please let me know in the comments below as well and we can always dive into one of those thank you very much for watching if you watched all of this and you liked what you saw and you haven't yet subscribed please do consider subscribing as usual a massive thank you to all my patrons for all their support it is greatly appreciated thank you guys so very much we are going through some really interesting times now I didn't want to talk about it earlier in their video I'm not here to give you advice I'm not a professional the only thing I can say is listen to the professionals that are out there please try and stay safe wash your hands and until next time don't forget to make your corner of the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 284,198

Rating: 4.8895426 out of 5

Keywords: Kevin Powell, tutorial, html, css, css debugging, css problem solving, firefox, firefox devtools, firefox dev tools, firefox css, firefox inspector, firefox inspect element, firefox inspector tutorial, how to debug css, using, inspect element, dev tools, css devtools, css dev tools, css trouble shooting, css trouble shooting made easy

Id: a-V8GFtwjos

Length: 15min 29sec (929 seconds)

Published: Wed Mar 18 2020

Reddit Comments

[u/elsjpq]

Yea those tooltips a pretty baller.

One big advantage for Chrome right now though is the color picker. It lets you quickly switch between Hex, RGB, and HSLA, while also giving you a quick contrast estimate. If FF ever decides to add something like this, I'd also love to have LAB color space.

[u/bubblesfix]

When Firefox can animate css properly and smoothly I ditch Chromium.