CSS однострочники для улучшения (почти) любого проекта

Источник: «CSS One-Liners to Improve (Almost) Every Project»
Коллекция простых однострочных CSS решений для добавления небольших улучшений на любую веб-страницу.

Большинство из этих однострочников будут состоять из одного объявления внутри CSS правила. В некоторых случаях селектор будет больше, чем просто элемент; в других случаях будут добавлять дополнительные объявления в качестве рекомендаций для лучшего опыта, таким образом делая их больше, чем однострочник — заранее прошу прощения за такие случаи.

Некоторые из этих однострочников скорее личный выбор и применимы не ко всем сайтам (не все используют таблицы или формы). Ниже будет кратко описан каждый из них, что они делают (с примерами изображений) и почему мне нравится их использовать. Обратите внимание, что примеры изображений могут быть построены на основе предыдущих примеров.

Ограничение ширины контента в области просмотра

body {
max-width: clamp(320px, 90%, 1000px);
/* дополнительная рекомендация */
margin: auto;
}

Добавив эту строку, вы уменьшите размер контента, чтобы он занимал 90% области просмотра, ограничив его ширину между 320px и 1000px (не стесняйтесь изменять минимальные и максимальные значения).

Это изменение автоматически заставит контент выглядеть намного красивее. Он больше не будет выглядеть огромным текстовым блоком, а будет смотреться более структурированным и организованным. А если ещё добавить margin: auto; к body, то контент будет выровнен по центру страницы. Две строчки кода позволяют контенту выглядеть намного лучше.

Выровненный и компактный текст выглядит лучше, чем огромная стена текста
Выровненный и компактный текст выглядит лучше, чем огромная стена текста

Увеличение размера текста

body {
font-size: 1.25rem;
}

Давайте посмотрим правде в глаза: стандартный размер шрифта в браузерах — 16px — это мало. Хотя это может быть личным мнением, основанным на том, что я старею 😅.

Одно из быстрых решений — увеличение размера шрифта в body. Благодаря каскаду и блокам em, используемым браузерами, весь текст на веб-странице автоматически увеличится.

Более крупный размер текста легче читается
Более крупный размер текста легче читается

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

body {
line-height: 1.5;
}

Ещё один способ улучшить читабельность и избавиться от страшной стены текста — увеличить расстояние между строками в абзацах и контенте. Это легко сделать с помощью свойства line-height.

Интервалы между строками разбивают стену текста и реки белого цвета.
Интервалы между строками разбивают стену текста и реки белого цвета.

Этот вариант (как и два предыдущих) значительно увеличит вертикальный размер страницы, но, уверяю вас, текст станет более читабельным и дружелюбным для всех пользователей.

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

img {
max-width: 100%;
}

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

Один из способов избежать этого — установить максимальную ширину в 100%. Хотя это не совсем верное решение ('margin' и 'padding' могут влиять на ширину), в большинстве случаев оно работает.

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

Ограничение ширины текста в контенте

p {
max-width: 65ch;
}

Ещё одна тактика, позволяющая избежать страшной стены текста и рек пространства, — применять этот стиль даже в сочетании с максимальной шириной в body. Это может выглядеть ненужным и иногда странным, поскольку абзацы будут более узкими, чем другие элементы. Но мне нравится контраст и более короткие строки.

Ранее мне помогало значение 60ch или 65ch, но вы можете использовать другое значение и настроить максимальную ширину в соответствии с вашими потребностями. Поиграйте и посмотрите, как это выглядит на вашей веб-странице.

Разбейте большие куски текста на более мелкие блоки для удобства чтения
Разбейте большие куски текста на более мелкие блоки для удобства чтения

Переносите заголовки более сбалансированным способом

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

Заголовки — неотъемлемая часть веб-структуры, но из-за их большого размера и короткого содержимого они могут выглядеть странно. Особенно если занимают более одной строки. Решение, которое поможет в этом случае, — сбалансировать заголовки с помощью text-wrap.

Хотя balance кажется самым популярным значением для text-wrap, оно не единственное. Также можно использовать pretty, при необходимости перемещающее последнее слово в последнюю строку вместо балансировки всего содержимого. К сожалению, pretty ещё не получил полной поддержки.

Сбалансированный перенос может улучшить визуализацию и читаемость
Сбалансированный перенос может улучшить визуализацию и читаемость

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

body {
accent-color: #080; /* используйте любимый цвет */
}

Ещё одно небольшое изменение, не оказывающее существенного влияния, но улучшающее внешний вид. До недавнего времени мы не могли стилизовать элементы управления формы с помощью CSS и были вынуждены ориентироваться на отображение в браузере. Но теперь всё изменилось.

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

Именно мелкие детали (и цвета) объединяют страницу.
Именно мелкие детали (и цвета) объединяют страницу.

Простые для восприятия строки таблицы

:is(tbody, table) > tr:nth-child(odd) {
background: #0001; /* или #fff1 для тёмной темы */
}

Таблицы нужны для отображения данных, а не для вёрстки. Но таблицы по умолчанию некрасивы, а мы не хотим, чтобы данные выглядели некрасиво. В частности, одна вещь, которая помогает организовать данные и сделать их более читаемыми, — это таблица-зебра с чередованием тёмных и светлых строк.

Вышеприведённый однострочник позволяет легко добиться такого стиля. Его можно упростить и использовать только tr, не обращая внимания на tbody или родительский table, но тогда он будет применяться и к заголовку таблицы, чего мы, возможно, не хотим. Это дело вкуса.

Удобнее отслеживать данные по горизонтали (по строкам)
Удобнее отслеживать данные по горизонтали (по строкам)

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

td, th {
padding: 0.5em; /* or 0.5em 1em... или любое значение отличное от 0 */
}

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

Можно изменить значение padding, чтобы подогнать его под нужный размер. Однако не переусердствуйте, чтобы избежать ненужного скроллинга или слишком большого пустого пространства.

Легче отслеживать данные по горизонтали и вертикали
Легче отслеживать данные по горизонтали и вертикали

Уменьшение анимации и движения

@media (prefers-reduced-motion) {
*, *::before, *::after {
animation-duration: 0s !important;
/* дополнительная рекомендация */
transition: none !important;
scroll-behavior: auto !important;
}
}

Хорошо, хорошо. Этот код — нечто большее, чем просто однострочник. У него есть однострочная версия (удаление анимации путём установки её длительности в ноль секунд), но другие вещи на веб-странице заставляют элементы двигаться.

Установив эти объявления в медиа-запрос prefers-reduced-motion, мы удовлетворим выбор пользователя в пользу меньшего количества движений. Этот подход несколько радикален, потому что он удаляет всё движение, что не всегда соответствует намерениям пользователя — это уменьшенное движение, а не отсутствие движения. При необходимости можно сохранять движение в каждом конкретном случае.

Нет анимации? Нет проблем!
Нет анимации? Нет проблем!

Дополнительные материалы

Предыдущая Статья

Наследование в CSS

Следующая Статья

Освоение области запросов в Laravel