Why isn't this CSS doing anything?
Why isn't this CSS doing anything?
Have ever set a width in CSS, and… nothing happens? It happened to me again, right after I filmed this video. There are a number of property \u0026 value combinations that can lead to CSS being inactive, and now Firefox will tell you why. Open the developer tools, and look for the greyed-out property with an info-box on hover.
#firefoxdevtools #css #miriamsuzanne
Content
2.59 -> I want to show you a neat feature in the
6.01 -> Firefox developer tools when I inspect
9.88 -> an element I can find out why some of my
12.309 -> CSS isn't working the way that I think
14.169 -> it should so let's take a look at that I
16.27 -> have this paragraph and my face here and
20.25 -> header I'm going to inspect the element
23.77 -> you can see I've got the span with a
25.72 -> class of face and I've got a paragraph
27.64 -> and main style and the h1 that's really
32.02 -> all I'm gonna worry about here I'm in
33.73 -> the rules panel and I can see the CSS
36.6 -> that's applying to that element
38.589 -> currently I'm gonna jump over to the
40.719 -> style editor to my demo document which
44.26 -> is currently empty and I'm going to take
46.449 -> that face and give it a width of 3m now
56.079 -> why didn't that do anything I can save
58.659 -> here and see if that changes anything it
60.429 -> doesn't since I'm dealing with a local
61.989 -> file that just saves the file like any
64.69 -> other text editor if I were on the web
66.64 -> looking at somebody else's site I could
68.469 -> also save one of their CSS files this
71.68 -> way or make changes to it and then save
73.509 -> it and it would just allow me to
75.899 -> download that document basically with my
78.7 -> changes I'll jump back over to the
80.56 -> inspector and see what's going on we can
83.439 -> see here it's showing me my width of 3m
86.11 -> but it's grayed out and it's got this
88.689 -> little eye next to it this I in a circle
91.539 -> which is often an indicator of more
93.789 -> information so I'm gonna hover over that
95.799 -> and we can see here it's telling me why
98.079 -> that width wasn't applied with has no
101.17 -> effect on this element since it was
102.969 -> display of inline try adding
106.21 -> display:inline-block or display a block
107.979 -> so that's helpful already if I need more
110.2 -> information I can click on the learn
111.579 -> more link and that's going to take me
113.259 -> over to the Mozilla developer Network
116.46 -> documentation for width which explains
119.469 -> with only applies to block and replaced
123.579 -> elements it won't apply to inline
126.75 -> all right so now I know why that CSS
132.01 -> isn't working and I can actually write
134.14 -> here add display of let's go with block
139.17 -> now let's do inline block actually here
142.15 -> inline block it's down there in the list
144.94 -> and now my width is applying when I
147.22 -> change the width the SVG changes size so
151.81 -> that's what I wanted it's not only for
154.3 -> width this tool it also tells us some
156.64 -> other things so I can say here I want to
159.67 -> now float this left and you can see that
162.73 -> immediately that display of inline block
164.83 -> got grayed out and now we get a tool tip
167.68 -> that says the display value has been
170.14 -> changed by the engine to block because
172.54 -> the element is floated try removing
174.61 -> float or adding display block it doesn't
177.04 -> really matter here this line because
180.1 -> floated elements are always display
182.44 -> block and again we get a link this time
185.77 -> to the display property and it explains
188.52 -> what we need to do in order for display
191.8 -> to work and that works in all sorts of
193.45 -> cases I mean if we tried to align
196.11 -> content really anything on this we would
200.38 -> get a warning that it needs to be a Flex
203.17 -> container if we try to do align self
206.489 -> we'd find out that it needs to be a flex
209.62 -> item or a grid item there's many more of
212.95 -> these vertical align isn't going to work
216.85 -> Oh so let's look at that so vertical
219.73 -> align Center that's the wrong syntax so
222.22 -> we get a slightly different looking
223.69 -> warning here if we change that to middle
227.31 -> we can find that vertical alignment
231.489 -> isn't going to work on floated elements
233.53 -> only on inline elements and just as a
236.62 -> final thing because I've gone back and
239.2 -> forth between using the inspector here
241.9 -> and the style editor let's just go back
243.64 -> and you can see that in the style editor
246.07 -> it now shows all the changes that I've
248.44 -> made so again I can just hit save and
251.68 -> all those changes are going to save to
253.42 -> my hard drive
254.17 -> so there's all sorts of reasons that CSS
257.62 -> might not work
259.06 -> the tool will always show you exactly
262.21 -> why that CSS isn't doing anything and
265.26 -> link you to more information I hope
267.97 -> that's useful for you have fun debugging
270.88 -> in the browser
272.04 -> [Music]
Source: https://www.youtube.com/watch?v=O3DAm82vIvU