CSS'ing in DevTools (By: Arsalan Khattak) - DevFest 2022

Talk by Arsalan Khattak (https://www.linkedin.com/in/khattakdev/) at DevFest Lahore 2022 by GDG Lahore.

Transcript

1. Lahore Arsalan Khattak Community Associate, MLH CSS’ing in DevTools
2. CSS Developers in the Room?
4. Sometimes, your CSS doesn’t work.
5. Hunt Inactive CSS
6. Fix it or Delete it
7. There is always room for improvements.
8. DevTools can help better understand your CSS and identify improvements.
9. CSS Overview Tab
10. Capture an Overview
11. • High Level Summary • Colors • Font info • Unused Declarations • Media Queries
12. What if Animations are broken?
13. Animations can be sometimes tricky.
14. CSS Animation Preview
15. Play with Animations
16. Your website should be accessible to everyone.
17. Color Contrast Checker
18. Check Contrast
19. Check Contrast
20. But what if someone has vision deficiency?
21. Emulate Vision Deficiencies
22. Test for Deficiency
23. Follow @khattakdev