Практика: адаптивный список учебных показателей
Набор кратких показателей должен сохранять связь числа и подписи на любой ширине. В упражнении статистика представлена списком описаний, а раскладка не меняет порядок чтения.
Назначение
Набор кратких показателей должен сохранять связь числа и подписи на любой ширине. В упражнении статистика представлена списком описаний, а раскладка не меняет порядок чтения.
Как это работает
Каждая пара dt и dd находится в отдельной группе div внутри dl. Сетка автоматически выбирает число колонок. Tabular-nums помогает выровнять цифры при поддержке соответствующих глифов выбранным шрифтом.
Пример
<style>.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:1rem}.stats>div{padding:1rem;border:1px solid #afcbb9}.stats dt{font-size:.95rem}.stats dd{margin:.4rem 0 0;font-size:2rem;font-variant-numeric:tabular-nums}</style>
<p>Условные данные учебного примера:</p><dl class="stats"><div><dt>Уроков пройдено</dt><dd>12</dd></div><div><dt>Упражнений выполнено</dt><dd>28</dd></div><div><dt>Дней практики</dt><dd>7</dd></div></dl>Что должно получиться
Показатели располагаются в нескольких колонках или складываются в столбец. Подписи остаются рядом со значениями. Числа приведены для демонстрации и не являются статистикой посетителя или справочника.
Граница применения и частая ошибка
Не передавайте смысл показателя одной иконкой или цветом. Не добавляйте анимацию счётчика, если она мешает чтению и не несёт пользы. Для динамического обновления доступное уведомление нужно проектировать отдельно, чтобы не озвучивать каждое промежуточное число.
Самостоятельная проверка
Замените значение на четырёхзначное и подпись на длинную строку. Проверьте масштаб 200% и линейное чтение без CSS. Если единицы неоднозначны, включите их в видимую подпись.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.