Однострочные решения для CSS есть в наборе каждого уважающего себя веб-разработчика. Конечно, “однострочники” могут быть очень специфичными, а их применение в различных проектах может быть продиктовано сугубо субъективными критериями. Тем не менее, в этой статье сделана попытка объединить наиболее популярные однострочные решения для CSS, вызывающие не только отклик в сердцах и умах программистов, но и повышающие лояльность пользователей.

Для чего нужны однострочные решения?

Однострочники на CSS помогут:

1. Ограничить ширину содержимого в области просмотра.
2. Увеличить основной текст.
3. Увеличить расстояние между строками.
4. Ограничить ширину изображений.
5. Ограничить ширину текста.
6. Сбалансированно оформить заголовки.
7. Привести цвета элементов управления форм в соответствие со стилями страницы.
8. Повысить читабельность таблиц.
9. Оптимизировать интервалы в ячейках и заголовках таблиц.
10. Убрать избыточную анимацию.

А теперь подробно и с примерами.

Ограничиваем ширину содержимого в области просмотра

body {
  max-width: clamp(320px, 90%, 1000px);
  /* additional recommendation */
  margin: auto;
}

Такая конструкция уменьшает ширину контента, предоставляя ему 90% области просмотра и ограничивая его ширину диапазоном от 320 до 1000 пикселей (минимальные и максимальные значения подбираются индивидуально для каждого проекта). Такое решение автоматически делает контент более приятным для глаз. Это больше не огромный текстовый блок, а структурированная и организованная информация. Добавление margin: auto; для body центрирует контент на странице.

Увеличиваем основной текст

body {
  font-size: 1.25rem;
}

Размер шрифта браузеров, установленный по умолчанию - 16px. Это мелкие буквы, особенно для возрастных пользователей. Очевидное решение: увеличение шрифта в body с помощью em. Весь текст на странице увеличится автоматически.

Увеличиваем расстояние между строками

body {
  line-height: 1.5;
}

Увеличение значения для line-height позволит превратить нечитаемую стену из букв в приятный для восприятия текст. Конечно, такое решение увеличит вертикальный размер блока с текстом, но это не идет в сравнение с той благодарностью, которую будут испытывать к вам пользователи.

Ограничиваем ширину изображений

img {
  max-width: 100%;
}

Параметры картинки должны соответствовать размерам блока, выделенного для её размещения.

Иногда получаются очень большие изображения, из-за которых содержимое смещается и появляется горизонтальная прокрутка. Установив максимальную ширину равную 100%, такой проблемы можно избежать. Решение не является безупречным, но оно работает в подавляющем большинстве случаев.

Ограничиваем ширину текста

p {
  max-width: 65ch;
}

Это еще одно решение, позволяющее избегать бесконечного нечитаемого потока букв. Значения 60ch или 65ch скорее всего будут достаточными.

Сбалансированно оформляем заголовки

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

Заголовки есть везде. Иногда они выглядят странно, особенно, когда занимают несколько строк. text-wrap: balance; позволит улучшить видимость и читаемость заголовков. Также для text-wrap можно использовать значение pretty, которое при необходимости перемещает дополнительное слово в последнюю строку.

Приводим цвета элементов управления форм в соответствие со стилями страницы

body {
  accent-color: #080; /* use your favorite color */
}

Это решение позволит в какой-то степени привести цвет элементов управления форм к требованиям дизайна сайта.

Повышаем читабельность таблиц

:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* or #fff1 for dark themes */
}

Таблица “зебра” с чередующимися тёмными и светлыми строками улучшает восприятие информации.

Оптимизируем интервалы в ячейках и заголовках таблиц

td, th {
  padding: 0.5em; /* or 0.5em 1em... or any value different from 0 */
}

Еще один метод, улучшающий качество таблиц — добавление отступов к ячейкам и заголовкам таблиц. По умолчанию большинство браузеров не имеют отступов, в результате чего текст разных ячеек визуально сливается. padding для td и th позволяет решить эту проблему.

Убираем избыточную анимацию

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    /* additional recommendation */
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

Конечно, этот код занимает больше одной строки. Но он позволяет эффективно избавляться от избыточной анимации. Нет анимации - нет проблем.

Спасибо за внимание.