Thinking on ways to solve TOOLTIPS
20 454
10.5
Google Chrome Developers775 тыс
Следующее
06.10.22 – 7 56215:45Популярные
46 дней – 1 5080:18
67 дней – 9 2681:00Опубликовано 5 октября 2022, 17:01
In today's GUI Challenge, @AdamArgyleInk builds a tooltip with a custom element (no web component!), :has(), transforms, and logical properties. Besides a small backup script for the usage of :has(), it's all CSS powered. Don't miss the screen reader experience, it got some special attention, like usual.
Chapters:
0:00 - Introduction
0:20 - Tooltips vs Toggletips
2:22 - Feature Overview
6:25 - Screen Reader UX
9:06 - Accessibility Tree
14:12 - :has()
14:55 - HTML
15:18 - CSS
18:50 - JavaScript
20:21 - Outro
Resources:
Try a demo → goo.gle/3SDW5YT
Get the source → goo.gle/3SCNxBj
Watch more GUI Challenges → goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GUIchallenges #CSS #ChromeDeveloper
Chapters:
0:00 - Introduction
0:20 - Tooltips vs Toggletips
2:22 - Feature Overview
6:25 - Screen Reader UX
9:06 - Accessibility Tree
14:12 - :has()
14:55 - HTML
15:18 - CSS
18:50 - JavaScript
20:21 - Outro
Resources:
Try a demo → goo.gle/3SDW5YT
Get the source → goo.gle/3SCNxBj
Watch more GUI Challenges → goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GUIchallenges #CSS #ChromeDeveloper
Свежие видео
6 дней – 6410:41
Случайные видео
117 дней – 1 2640:17
132 дня – 49 23517:58
230 дней – 7 1340:15
12.10.23 – 747 1670:36
23.02.23 – 2 2500:12
16.01.21 – 9 8460:32
7 часов – 26 71911:57
7 часов – 16 4920:48
5 дней – 8190:10
7 дней – 17 95028:01
8 дней – 45511:22
11 дней – 8960:21
4 дня – 2 3796:12