На macOS пункт меню после клика не исчезает сразу. Сначала выбранный пункт коротко моргает: подсветка пропадает, возвращается — и только потом меню закрывается.
Так система успевает показать, какой именно пункт сработал. В вебе меню обычно закрывается в момент клика, поэтому этого подтверждения нет.
На CSS сам эффект делается просто:
.menu-item:target {
animation: blink 150ms linear;
}
.menu:has(.menu-item:target) {
animation: close 150ms step-end forwards;
}
То есть выбранный пункт моргает, а меню ждёт те же 150 мс перед скрытием.
Вот даже собрал кодпен с примером: https://codepen.io/editor/alinaki/pen/01a0f12b-8d69-7192-90d7-b8b7562ef482
Без JavaScript это можно собрать через
:target и :has(): выбранный пункт хранится в URL fragment. Для демки подходит отлично, для обычного компонента я бы всё-таки оставил состояние и закрытие на JS, а blink — в CSS.Apple отдельно описывает такую обратную связь в HIG:
https://developer.apple.com/design/human-interface-guidelines/feedback
Такая-то мелочь, а насколько сильно меняется восприятие!
#css #macos #hig