Практика: памятка, которая остаётся полезной на бумаге

Назначение

Печатная версия памятки должна сохранять основные инструкции без ненужных экранных действий. Упражнение разделяет содержание и пояснение, которое нужно только при работе в браузере.

Как это работает

Правила @media print убирают экранную подсказку и упрощают оформление. Основной список остаётся настоящим текстом. Break-inside:avoid применён к небольшой памятке и является пожеланием, а не гарантией размещения.

Пример

<style>.print-note{padding:1rem;border:1px solid #9ebba8;max-width:36rem}.print-note li{margin-block:.5rem}@media print{.screen-note{display:none}.print-note{max-width:none;color:#000;background:#fff;border:1px solid #000;break-inside:avoid}}</style>
<section class="print-note"><h2>Проверка учебной страницы</h2><ol><li>Проверить заголовки.</li><li>Открыть внутренние ссылки.</li><li>Проверить узкую ширину.</li></ol><p class="screen-note">На экране можно менять ширину окна для проверки.</p></section>

Что должно получиться

В предпросмотре печати остаются заголовок и список, а экранная подсказка скрывается. Для проверки сохраните фрагмент в отдельном документе: печать всей страницы справочника имеет собственное оформление.

Граница применения и частая ошибка

Не скрывайте важные ограничения и контактные данные только потому, что они выглядят как вспомогательный блок. Длинная памятка может не поместиться целиком на лист, несмотря на avoid. Поля и масштаб печати остаются под контролем пользователя.

Самостоятельная проверка

Проверьте печать с фоном и без него, затем другой размер бумаги. Добавьте длинный пункт и посмотрите разбиение. Убедитесь, что все необходимые действия понятны без экранного окружения.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Подписи полей
• Выбор значения
• Печатные стили