Thinking on ways to solve TOOLTIPS
18 799
9.9
Google Chrome Developers753 тыс
Следующее
06.10.22 – 7 42615:45Популярные
42 дня – 3 39246:30
182 дня – 14 11515:14Опубликовано 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
Свежие видео
16 дней – 16 7102:02
17 дней – 5102:43
20 дней – 20 08614:50
26 дней – 11 2851:31
27 дней – 5162:41Случайные видео
54 дня – 1 6546:43
57 дней – 28 6068:08
87 дней – 15 30316:55
212 дней – 2 1253:39
03.09.22 – 2 39211:56
28.07.18 – 393 6799:06
5 дней – 54 78415:30
10 дней – 5883:37
12 дней – 4140:41
13 дней – 4180:54
17 дней – 1 380 00520:54
20 дней – 3 4691:18
20 дней – 106 83110:44
8 дней – 5 6011:18
