Discover CSS issues with DevTools | DevTools Tips

Aug 15, 2023

Discover CSS issues with DevTools | DevTools Tips

Have you ever applied CSS to an element but it just doesn’t work? In this episode, Jecelyn and Sofia show us how to discover various CSS issues at a glance.

Chapters:
0:00 Intro
0:54 Invalid CSS
1:39 Overridden properties
2:22 Inactive CSS
3:32 Inherited CSS properties
4:12 Inspect shorthand properties
4:49 Uneditable CSS - user agent stylesheet / HTML attributes
5:28 Two tips to stay focused
5:40 Use the filter in Styles pane
5:55 Find cascade winners in Computed pane
6:19 Bonus tip: CSS Grid
6:47 Bonus tip: Unmatched CSS Selectors
7:11 Learn more

Resources:
https://goo.gle/devtools-css-issues
https://goo.gle/css-cacading-order
Inspect https://goo.gle/devtools-grid
Play with the demo → https://goo.gle/41gY7CR

Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Chrome DevTools → https://goo.gle/chromedevtools

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer

Content

0.05 -> [Music]

2.959 -> oh no CSS is hard our us designer passed

8.46 -> me this card design but what I've got so

10.92 -> far is this it doesn't look pretty at

13.38 -> all

15 -> this is me fixing the CSS all day I

18.539 -> really need some help to debug and fix

20.76 -> this

25.32 -> hello everybody I will be your CSS hero

29.22 -> today let's fix this together can you

32.279 -> show me your code so far yes

35.1 -> here I have a section container and a

37.92 -> gift card inside the card I have an

40.68 -> image and a hyperlink

42.42 -> these are my CSS so far let's start with

45.6 -> the hyperlink our designer asked me to

48.539 -> use unicorn paint for the text and I did

51.379 -> why isn't that reflected on my page

54.78 -> unicorn pink

56.579 -> I'm not sure if CSS supports that color

58.92 -> let's find out with devtools

62.039 -> right click inspect the element and take

64.979 -> a look at the Styles pane it shows you

67.619 -> all the Styles applied or not to the

70.56 -> elements

71.58 -> CSS with invalid syntax are crossed out

74.939 -> and have a warning icon next to them

77.46 -> hover over the icon to get it tip on

80.1 -> where the typo is and the property name

82.92 -> or in its value

84.72 -> in our case it's the value unfortunately

87.84 -> there's no unicorn pink in CSS perhaps

91.38 -> we can propose one but let's change it

94.259 -> to deep pink for now look now the

97.02 -> warning sign is gone

99.119 -> nice wait why is my Rebecca purple cross

103.68 -> out in the Styles pin does that mean

106.259 -> this color doesn't exist no no no no as

109.68 -> you know some properties May override

111.78 -> others according to the cascading order

115.259 -> overwritten properties are crossed out

117.6 -> too but they don't have warning icons

120.18 -> next to them because that's just how the

122.34 -> Cascade works

123.72 -> in your case Rebecca purple is totally

126.899 -> valid but the Deep pink wins because its

130.319 -> selector has higher specificity than

132.54 -> that on the headline element if you

135.36 -> change your mind you can uncheck the

137.4 -> color to test it I would suggest that

139.8 -> you move the color definition to the

141.42 -> headline

142.94 -> I see all right now how can I move the

147.48 -> text to the bottom and Center it

150.239 -> look I have set the width to 100 and

154.02 -> align the text to the center but it just

156.72 -> doesn't work

158.459 -> hold on

159.84 -> some CSS rules may be totally valid but

162.66 -> they are inactive because of how CSS

165.06 -> works

166.319 -> your code here is a perfect example in

169.379 -> our case hyperlink has a display inline

172.44 -> value by default so setting width has no

176.099 -> effect on this element

177.8 -> devtools graze out inactive CSS and

181.019 -> shows information icons next to them

183.12 -> hover over the icon to get a tip on why

185.819 -> it is inactive

187.26 -> you can open the computed Pane and see

190.019 -> the final CSS values that Chrome uses to

193.08 -> render an element if you've filtered by

195.78 -> display you can see that the rendered

198 -> value is in line this is just how CSS

201.12 -> works now go back to the hint it

204.959 -> suggests we change the display value

206.879 -> let's change that to block see it works

210.48 -> now

211.86 -> cool I saw there are other properties

214.98 -> gray out but without an icon why is that

218.159 -> so right here's another fact about CSS

221.7 -> some properties are inherited some are

225.06 -> not

226.379 -> the Styles pane shows all inherited or

230.04 -> not properties in the corresponding

232.319 -> sections grayed out properties here are

235.62 -> still active just on the parent what the

238.98 -> Styles pane shows on this element is

241.379 -> default inheritance properties in

244.08 -> regular text are inherited and the

246.72 -> grayed out ones not inherited by default

249.42 -> but present on the parent

251.879 -> right by the way I use shorthand

255.239 -> properties quite often how can I debug

258.12 -> them good question indeed I always

261.6 -> forget the order of padding side values

263.82 -> when I set two values in one declaration

267 -> you can expand shorthand properties the

270.12 -> Styles pane will show you a list of all

272.46 -> the properties that are implied the

274.979 -> expanded properties will follow the same

277.5 -> display rules of the Styles pane so you

280.139 -> can spot over written rules at once in

283.02 -> our case the padding top property is

285.78 -> overridden by the rule on the headline

287.699 -> element

289.4 -> ah I see oh I also noticed that I can't

294.18 -> edit some properties in the Styles pane

296.52 -> why is that so well you shouldn't be

300.24 -> able to edit that

302.04 -> you can't edit the user agent style

304.38 -> sheet Chrome's default style sheet the

307.62 -> Styles pane shows these non-editable

310.32 -> properties in italics

312.3 -> also you can't edit certain HTML

315.36 -> attributes like width and height that's

318.24 -> because these attributes aren't in a CSS

320.94 -> style sheet they're part of the HTML

323.4 -> itself

324.3 -> but you can still change such attributes

327 -> in the Dom tree

328.44 -> wow there is so much to keep track of

331.68 -> when using the Styles pane

333.9 -> yeah it can be overwhelming but fear not

337.38 -> here are two tips to help you stay

339.84 -> focused

341.28 -> first you can use the filter in the

343.56 -> Styles pane to focus only on the one

346.139 -> property that you're interested in for

348.66 -> example if you filter for border on this

351.72 -> element you'll see all the long hand

354.06 -> properties at a glance

356.16 -> second if you're still not sure why your

359.699 -> CSS doesn't work the way you think it

361.56 -> should use the computed pane to see all

364.32 -> the Cascade winners and their computed

366.479 -> values for example the exact value of

369.539 -> width in pixels and not in viewport

372.12 -> units

373.38 -> you can expand properties to see their

376.02 -> actual values and find their source

379.38 -> all right we are almost there how can I

382.44 -> make the image align in the center as

384.84 -> well there are many ways to do it let's

387.72 -> try the CSS grid for this one

390.78 -> on the card add the display grid Rule

393.78 -> and open the editor you can play with

396.539 -> the option here and justify the items to

399 -> Center watch the grid debugging devtools

401.88 -> tips to find out more

404.16 -> yay I can finally submit a PR for this

407.46 -> one last question Sophia I noticed some

410.699 -> CSS selectors are grayed out what does

413.52 -> that mean

414.479 -> Ah that's a nice little indicator for

417.12 -> unmatched selectors

419.58 -> for example we have multiple selectors

422.28 -> for this CSS declaration the one that

425.34 -> actually matches is the card selector

427.46 -> therefore devtools grayed out the

430.02 -> thumbnail

431.419 -> nice thanks Sofia where can we learn

435.24 -> more about debugging CSS issues you can

437.94 -> go to good.go slash devtools-css Dash

441.84 -> issues to learn more that's all good

445.259 -> luck learning CSS everyone see you for

447.78 -> the net dev2 tips

452.22 -> foreign

454.11 -> [Music]

Source: https://www.youtube.com/watch?v=iuZx0kHS0Xs