ЗадачаАктуально

Задача: Адаптируйте tooltip

Адаптируйте tooltip: практическая задача по вёрстке со стартовым кодом, критериями готовности, усложнением и самопроверкой.

Условие: Адаптируйте tooltip

Цель темы «Адаптируйте tooltip» — разделить смысловую структуру, раскладку и интерактивное состояние. Для темы «Адаптируйте tooltip» предметный результат подтверждается так: проверьте компонент с длинными данными, без JavaScript и только клавиатурой. Проверьте «Адаптируйте tooltip» в печатной версии длинного справочного материала, выполнив действие: проверьте компонент с длинными данными, без JavaScript и только клавиатурой. Результат задачи «Адаптируйте tooltip» должен сохранять семантический HTML, адаптивную раскладку и понятные состояния управления.

Стартовый код

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. Примеры и объяснения подготовлены для этого сервиса.