Thinking on ways to solve TOOLTIPS
19 798
10.3
Google Chrome Developers764 тыс
Следующее
06.10.22 – 7 50715:45Популярные
35 дней – 1 80542:38
72 дня – 1 8860:51Опубликовано 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
Свежие видео
23 дня – 1372:34
28 дней – 1690:49
29 дней – 1 4840:17
Случайные видео
89 дней – 11 3230:36
161 день – 61 50810:08
225 дней – 148 7741:00
29.09.23 – 9473:55:53
30.05.21 – 379 64510:13
24.03.12 – 9144:35
19 часов – 841:02
14 часов – 210:31
4 дня – 17 5001:00
10 дней – 3 1834:06
10 дней – 7 4391:22
14 дней – 4 9350:58
15 дней – 1 6321:35
3 дня – 1 761 45325:35
7 дней – 1 4834:55