Thinking on ways to solve TOOLTIPS
19 977
10.3
Google Chrome Developers770 тыс
Следующее
06.10.22 – 7 52315:45Популярные
69 дней – 966 0590:58
127 дней – 6 52610:19Опубликовано 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
Свежие видео
7 дней – 9083:59
9 дней – 1 5444:14
10 дней – 123 39122:41
11 дней – 6 237 5940:47
11 дней – 1 0730:20
13 дней – 6771:35Случайные видео
218 дней – 19 20228:52
30.03.23 – 54 0380:59
06.01.23 – 1 7660:52
05.09.22 – 109 1394:33
17.06.22 – 7 1652:36:56
26.06.14 – 20 9982:16:45
5 дней – 31 78412:55
7 дней – 1 7880:36
8 дней – 48 58421:06
8 дней – 1695:20
11 дней – 8 8060:11
12 дней – 3 6864:02
12 дней – 994:52
6 дней – 6 2180:16
6 дней – 6017:22