Thinking on ways to solve CAROUSELS

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=CXJv6zM003M


Duration: 27:23
21,014 views
862

In today's GUI Challenge, @AdamArgyleInk shares the features and aspects of a carousel component: adaptive theming, adaptive to various user input types, adaptive to author time options, and adaptive to user preferences. All these while looking great, including animation (with reduced motion of course) and flexibility for all your use cases.

Chapters:
0:00 - Introduction
0:30 - Overview
3:50 - Not Included
6:28 - Grid Overlay
6:58 - State Machine
8:49 - Debugging Corner
9:48 - Forced Colors
11:58 - Keyboard & Accessibility
16:00 - Accessibility vs Usability
17:48 - HTML
20:13 - Layout Shift Mitigation
22:04 - ARIA Decorations
26:50 - Outro

Resources:
Try a demo → https://goo.gle/3S60V1i
Get the source → https://goo.gle/3n4Sfcg

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2022-08-25Chrome 105 - What’s New in DevTools
2022-08-25How to speed up your workflow with Console shortcuts | DevTools Tips
2022-08-24Thinking on ways to solve CAFE WALL ILLUSION
2022-08-17What are Chrome's origin trials?
2022-08-11How to inspect animations | DevTools Tips
2022-08-10Explode a node #Shorts
2022-08-03What are Chrome release channels?
2022-08-02New in Chrome 104: Region Capture, Media Queries, Shared Element Transitions, and more!
2022-07-28How to log messages in the Console | DevTools Tips
2022-07-28Chrome 104 - What’s New in DevTools
2022-07-27Thinking on ways to solve CAROUSELS
2022-07-26DOM ready events considered harmful | HTTP 203
2022-07-14How to emulate CSS user preference media features | DevTools Tips
2022-07-13Breaking words with wbr and ­ #Shorts
2022-07-12Demystifyingish SVG paths | HTTP 203
2022-06-30How to inspect CSS container queries | DevTools Tips
2022-06-29Thinking on ways to solve FABs
2022-06-28FLIP animations | HTTP 203
2022-06-22Gradient shadow #Shorts
2022-06-21New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!
2022-06-16Chrome 103 - What’s New in DevTools


Tags:
Thinking on ways to solve carousels
carousels tutorial
what are carousels
how to use carousels
intro to carousels
introduction to carousels
gui challenges
css
css tutorial
how to use css
what is css
intro to css
introduction to css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
chrome latest
chrome updates
Adam Argyle