Discover CSS issues with DevTools #DevToolsTips

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:

Questions? Tweet to us:

#DevToolsTips #Chrome #Developer

[xtek]

These videos make me smile. Love the acting.

[PaulMcCannWebBuilder]

I think I speak for the entire dev community when I say I expect unicornpink to be available in the next release.

[StridBR]

Really good. Please make an episode with tips for the Profiler/Performance tab :)

[drkeithnewton]

you two are not only informative, but hilarious :)

[genyklemberg]

When Google will make AI so I could paste html and it will prepare me markup with CSS with design proposed?))

[ChristopherClaudioSkierka]

Hi there hope you are well. I have started to use devtools but I have an issue, wonder if you could help me please? Those arrows to the right side (style section) which you can toggle on/off, well on my system those tick boxes are just not there at all. Is there a setting to make them appear? Ps I use chrome .\thanks in advance

[proteus]

Flaws with css, surly all these issues should be easily overcome if the actual language wasn't so problematic for humans to fully understand. Google needs a total revamp of an obsolete difficult ccs that's problem to understand.

[winterheat]

0:07 fixing it all day? Google interviewers expect you to fix it in 20 to 30 seconds...

[tourstravelsoftheworld]

How to apply border radius in Outline CSS property

[BlackStar]

you don't need add 'px' for <img> attribute styles... it's wrong. Shame on you 🤣