#фишка дня

На 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