Задача: Адаптируйте tooltip
Адаптируйте tooltip: практическая задача по вёрстке со стартовым кодом, критериями готовности, усложнением и самопроверкой.
Условие: Адаптируйте tooltip
Цель темы «Адаптируйте tooltip» — разделить смысловую структуру, раскладку и интерактивное состояние. Для темы «Адаптируйте tooltip» предметный результат подтверждается так: проверьте компонент с длинными данными, без JavaScript и только клавиатурой. Проверьте «Адаптируйте tooltip» в печатной версии длинного справочного материала, выполнив действие: проверьте компонент с длинными данными, без JavaScript и только клавиатурой. Результат задачи «Адаптируйте tooltip» должен сохранять семантический HTML, адаптивную раскладку и понятные состояния управления.
Стартовый код
<article class="card">
<h2>Адаптируйте tooltip</h2>
<p>Содержимое компонента</p>
</article>Критерии готовности
- Проверьте компонент с длинными данными, без JavaScript и только клавиатурой применительно к теме «Адаптируйте tooltip»
- Сопоставьте результат «Адаптируйте tooltip» с целью «разделить смысловую структуру, раскладку и интерактивное состояние» и объясните каждое использованное условие
- Повторите проверку «Адаптируйте tooltip» с другими данными и убедитесь, что исключён риск: копирование демонстрационного компонента целиком переносит лишние зависимости и состояния
- Назначение «Адаптируйте tooltip» понятно без декоративного оформления
Усложнение задачи
Подготовьте минимальный пример «Адаптируйте tooltip» в тестовом шаблоне. Для «Адаптируйте tooltip» подтвердите цель «разделить смысловую структуру, раскладку и интерактивное состояние» и исключите риск «копирование демонстрационного компонента целиком переносит лишние зависимости и состояния».
Самопроверка решения
Перед применением «Адаптируйте tooltip» сформулируйте ожидаемое поведение, затем проверьте компонент с длинными данными, без JavaScript и только клавиатурой. Для «Адаптируйте tooltip» такое сравнение показывает реальную причину изменения. Затем исключите следующие риски: Копирование демонстрационного компонента целиком переносит лишние зависимости и состояния — это предметный риск для «Адаптируйте tooltip»; Скрытие фокуса без равноценной заметной замены при использовании «Адаптируйте tooltip»; Непредсказуемое наследование значения из внешнего компонента; для «Адаптируйте tooltip» проверьте это отдельно.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.