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