Uploaded May 2023 | Updated September 2026, 1 week ago
A quick overview of fantastic Google Chrome Developer Tools experiments that will help you level up your DevTools productivity.
Find out how can those features help you be more efficient when working with length values, font properties, and DevTools color picker. Youโll understand why some properties donโt work in a specific context better, and youโll have a better accessibility overview.
๐๏ธ Links
CSS Staircase Hover Effect Using :has() โ codepen.io/ZoranJambor/pen/vYpzGwV
In-Depth Guide to CSS Logical Properties โ youtu.be/cV9JhEV4Ll0
In-Depth Guide to CSS Parent Selector :has() โ youtu.be/OqLquBs-bEg
๐ Chapters
00:00 How to enable Google Chrome DevTools experiments
01:08 CSS length authoring
02:31 CSS authoring hints for inactive rules
03:41 New Font Editor in Styles Pane
04:22 Color picking outside the browser window
05:31 New advanced Perceptual Contrast Algorithm (APCA)
06:45 Source order viewer in the Accessibility Pane
08:19 Conclusion
Subscribe to CSS Weekly Newsletter:
๐ css-weekly.com
Become PRO with the best linting tools in the industry:
๐ฅ Mastering Prettier & Stylelint: masteringlinting.com
Keep up-to-date with CSS Weekly:
๐ Twitter: twitter.com/CSSWeekly
๐ Instagram: instagram.com/cssweekly
๐ Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
๐ Blog: zoranjambor.com
๐ Twitter: twitter.com/zoranjambor
๐ LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #devtools
A quick overview of fantastic Google Chrome Developer Tools experiments that will help you level up your DevTools productivity.
Find out how can those features help you be more efficient when working with length values, font properties, and DevTools color picker. Youโll understand why some properties donโt work in a specific context better, and youโll have a better accessibility overview.
๐๏ธ Links
CSS Staircase Hover Effect Using :has() โ codepen.io/ZoranJambor/pen/vYpzGwV
In-Depth Guide to CSS Logical Properties โ youtu.be/cV9JhEV4Ll0
In-Depth Guide to CSS Parent Selector :has() โ youtu.be/OqLquBs-bEg
๐ Chapters
00:00 How to enable Google Chrome DevTools experiments
01:08 CSS length authoring
02:31 CSS authoring hints for inactive rules
03:41 New Font Editor in Styles Pane
04:22 Color picking outside the browser window
05:31 New advanced Perceptual Contrast Algorithm (APCA)
06:45 Source order viewer in the Accessibility Pane
08:19 Conclusion
Subscribe to CSS Weekly Newsletter:
๐ css-weekly.com
Become PRO with the best linting tools in the industry:
๐ฅ Mastering Prettier & Stylelint: masteringlinting.com
Keep up-to-date with CSS Weekly:
๐ Twitter: twitter.com/CSSWeekly
๐ Instagram: instagram.com/cssweekly
๐ Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
๐ Blog: zoranjambor.com
๐ Twitter: twitter.com/zoranjambor
๐ LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #devtools
