Discover CSS issues with DevTools #DevToolsTips
Channel: Chrome for Developers
Date: 2023-02-23

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