Thinking on ways to solve SWITCH GROUPS

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


Duration: 13:45
9,144 views
347

In today's GUI Challenge, @AdamArgyleInk turns a radio group into a text alignment changing switch group. Learn how to test the accessibility, change the layout, and add a few affordances that round out the component.

Chapters:
0:00 - Introduction
0:46 - Debugging Corner
1:25 - HTML
3:17 - Screen Reader UX
5:22 - Switch Group
8:15 - Switch Group Button
13:03 - Closing

Resources:
Try a demo → https://goo.gle/3YPSqtr
Get the source → https://goo.gle/3l3cGd4
Nested border-radius →https://goo.gle/3JsaZiE

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


2023-05-10What’s new in ChromeOS | Google I/O 2023
2023-05-03New in Chrome 113: WebGPU is here, First-Party Sets are rolling out, and more!
2023-04-27Using source maps in DevTools
2023-04-20View Transitions API rocks
2023-04-13Whats New In DevTools: Debugging, testing and CSS (Chrome 110 - 112)
2023-04-12Thinking on ways to solve 3D sci-fi text
2023-04-04New in Chrome 112: CSS nesting rules, no-op fetch handlers skipped, and more!
2023-03-30What are source maps?
2023-03-29Switch groups #Shorts
2023-03-17Privacy Sandbox: A view into industry's feedback
2023-03-09Thinking on ways to solve SWITCH GROUPS
2023-03-08New in Chrome 111: View transitions API, CSS color level 4 and more!
2023-03-03Privacy Sandbox: Preserving trust & usability with new APIs for a private web
2023-02-27Privacy Sandbox: Current stages of ads, measurement and content APIs
2023-02-24Prepare for Chrome's user-agent reduction
2023-02-23Discover CSS issues with DevTools | DevTools Tips
2023-02-17Privacy Sandbox: Journey and outlook
2023-02-15Improving your web app’s install experience
2023-02-15Icon button overview #Shorts
2023-02-07New in Chrome 110: picture-in-picture class, launch_handler and more!
2023-02-01Thinking on ways to solve GLITCH effects


Tags:
Chrome
Developers
Google
Web
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