В интернете часто встречаются «ромашки‑гадалки»: пользователь нажимает на
лепесток‚ а в конце получает ответ «да»‚ «нет» или какой‑нибудь совет.
В этой статье мы покажем‚ как собрать полностью работающую ромашку‚ При этом применим современные возможности браузеров:
- фрагменты URL и псевдокласс
::target; - элемент
<dialog>для модального окна; - атрибут
loading="lazy"для отложенной загрузки изображений; - Popover API (по желанию) и
data‑tooltip‑тултипы; - CSS‑свойства
scroll-margin-topиanchor‑positioning
(для более продвинутых вариантов).
Планируемая структура
Наша ромашка состоит из 8 лепестков и центрального круга. Каждый лепесток —
ссылка‚ у которой в href указана директива :~:text= для
подсветки текста‚ а также атрибут data-tooltip с подсказкой.
<div class="daisy">
<a href="#petal1:~:text=Петля 1"
class="petal"
id="petal1"
data-tooltip="Вариант 1">1</a>
... (другие лепестки) ...
<div class="center">🌼</div>
</div>
1
2
3
4
5
6
7
8
🌼
Ваш результат
Вы выбрали …. Ответ: …
CSS‑стилизация (см. <style> выше)
Стили задают:
- сетку 3×3‚ где центр – «сердцевина»;
- плавный рост при наведении;
- выделение выбранного лепестка через
:target; - тултипы‚ использующие
attr(data-tooltip); - модальное окно
<dialog>с анимацией.
Как работает «гадание» без JavaScript
- Клик по лепестку. Ссылка содержит фрагмент
#petalN:~:text=Ответ+N.
Браузер автоматически выделит указанный текст (если он присутствует в
документе) и перейдёт к элементу сid="petalN".
Псевдокласс:targetподсвечивает выбранный лепесток. - Сохранение выбора. При переходе в URL‑строке появляется
#petalN.
Мы можем прочитать его в CSS‑контенте‚ но для простоты пользователь
самостоятельно запоминает номер лепестка. - Открытие результата. Центральный элемент имеет атрибут
popover="auto"
иpopovertarget="result-dialog". При клике открывается
<dialog>‑окно. Внутри диалога находятся два<span>
сid="chosen-petal"иid="answer". Чтобы заполнить их target=»_blank»>HTML‑форму с методомdialog:
Ниже – упрощённый вариант‚ где диалог открывается сразу после выбора
последнего лепестка (в примере – 8‑й). Мы используем атрибут
popovertargetaction="show" в последней ссылке.
8
Оптимизация загрузки изображений (по желанию)
Если вы хотите заменить цифры на картинки лепестков‚ добавьте к каждому
<img> атрибут loading="lazy". Браузер загрузит
изображение только тогда‚ когда оно попадает в видимую часть окна.
Доступность (Accessibility)
- Все интерактивные элементы – это ссылки (
<a>) или кнопки‚
поэтому они находятся в таб‑порядке и доступны клавиатуре; - Для экранных читалок добавьте
aria-labelк каждому лепестку‚
напримерaria-label="Ответ: Да"; - Элемент
<dialog>автоматически получает
role="dialog"и фокусируется при открытии.
Расширенные возможности (по желанию)
7.1 Popover API вместо
Если вам нужен всплывающий «поповер» вместо модального окна‚ замените
<dialog> на любой блок с атрибутом popover и
укажите popovertarget в ссылке‑триггере; Поповер поддерживает
стилизацию через ::backdrop и псевдокласс :popover-open;
7.2 Anchor Positioning для точного позиционирования тултипа
Если требуется разместить подсказку строго рядом с выбранным лепестком‚
задайте элементу anchor-name: --petal-1;‚ а тултипу
position-anchor: --petal-1; и используйте функцию anchor
для расчётов. Поддержка пока ограничена‚ но в новых версиях браузеров будет
расти.
index.html и открыть в любом современном браузере.
2
3
4
5
6
7
8
Ваш ответ
Вы выбрали …. Ответ: …
Что дальше?
- Добавьте анимацию «распускания» лепестков с помощью
@keyframes; - Расширьте набор ответов‚ используя атрибут
data-answerи
простой JS‑скрипт для случайного выбора; - Интегрируйте сервисы аналитики‚ чтобы отслеживать‚ какие ответы выбирают
пользователи; - Экспериментируйте с
anchor‑positioningиposition‑area‚
чтобы разместить всплывающие подсказки в любой точке экрана.
Теперь у вас есть полностью работающая интерактивная ромашка для онлайн‑гадания‚ на своём сайте‚ в блоге или в личном проекте – пользователи оценят простоту
и лёгкость взаимодействия без громоздкого JavaScript‑кода.