Thinking on ways to solve TOOLTIPS
20 454
10.5
Google Chrome Developers775 тыс
Следующее
06.10.22 – 7 56215:45Популярные
24 дня – 6530:14
66 дней – 2 1740:58Опубликовано 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
Свежие видео
5 дней – 76 2900:31
6 дней – 22 3440:53
7 дней – 26 6881:13
8 дней – 87 04010:50
11 дней – 2684:06
15 дней – 1 1861:03Случайные видео
90 дней – 1 4863:57
318 дней – 510 6966:57
354 дня – 202 1599:46
03.04.23 – 3 2315:01
10.09.22 – 1 144 9772:51:05
20.03.14 – 155 6072:42
16 часов – 9 29011:03
1 день – 20 5450:19
2 дня – 31 0300:11
2 дня – 10 33718:58
4 дня – 1160:50
9 дней – 4 1229:17
10 дней – 1 2540:35
2 дня – 16 86838:26