При создании своего веб-сайта я хотел найти простой и разумный способ сделать его красивым на большинстве дисплеев. Для моих задач подошли следующие 58 байтов:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}Давайте их разберём.
max-width:
38remПохоже, в большинстве браузеров по умолчанию используется размер шрифтов 16px, то есть 38rem — это 608px. Поддержка дисплеев разрешением минимум 600px кажется разумным выбором.
padding:
2remЕсли ширина дисплея становится меньше 38rem, тогда благодаря этому отступу всё остаётся достаточно красивым до ширины примерно в 256px. Хотя это может казаться необязательным, на самом деле мы одним выстрелом убиваем двух зайцев: отступ также создаёт необходимое пространство сверху и снизу.
margin:
autoЭто всё, что нужно для центрирования страницы, потому что main — это блочный элемент под семантическим html5.
Важное замечание: чтобы добиться этого результата, мне понадобилось на удивление много попыток. Возможно, это связано с тем, что я ничего не знаю о «современной» веб-разработке или (к чему я склоняюсь больше) говорит о том, насколько тяжело сохранять простоту в этом сложном мире.
Дополнение 1: после обсуждений я изменил значение
padding на 1.5rem, чтобы улучшить компромисс между мобильными и десктопными дисплеями.Дополнение 2: мне напомнили о ch unit, и он мне понравился! После этого я поменял значение на
70ch/2ch, что выглядит примерно так же, но на 2 байта меньше; только padding стал чуть меньше (это хорошо для мобильных).100 байтов CSS, которые выглядят красиво где угодно (расширенная версия)
Это простой CSS, который будет хорошо выглядеть на большинстве дисплеев:
html {
max-width: 70ch;
padding: 3em 1em;
margin: auto;
line-height: 1.75;
font-size: 1.25em;
}Давайте его разберём.
max-width:
70ch«удобный для чтения диапазон» обычно составляет в ширину 60-80 символов, и в CSS можно выразить это напрямую при помощи единицы измерения ch.
padding:
3em 1emЕсли ширина дисплея оказывается меньше указанного вышеmax-width, то этотpaddingпредотвращает растягивание текста на мобильных от края до края. Чтобы оставить пробелы сверху и снизу, мы используем3em.
margin:
autoЭто всё, что необходимо для центрирования страницы; применяется к html, потому что у сайта Дэна нет семантического тега </p>, который, скорее всего, существует на большинстве сайтов. То, что верхний тег центрирует себя относительно ничего, не совсем логично, но так делает большинство браузеров.
line-height:
1.75Интервал между строками, позволяющий улучшить визуальную чёткость. Всегда оставляйте высоту строки без указания единиц измерения, на то есть причины.
font-size:
1.5emЯ заметил, что в последнее время тенденции дизайна и размеры экранов склоняются к увеличению размера шрифтов. Или, возможно, я старею. Если вы хотите, чтобы пользователи могли его масштабировать, выбирайтеemилиremвместоpx.
Можно использовать
:root вместо <html>, чтобы гарантировать наличие какого-нибудь селектора, но эта тонкость слишком сложна для меня и добавляет ещё один символ.Ещё 100 необязательных байтов
h1,h2,h3,h4,h5,h6 {
margin: 3em 0 1em;
}
p,ul,ol {
margin-bottom: 2em;
color: #1d1d1d;
font-family: sans-serif;
}Ссылки
Комментарии (10)
FunnyBlort
29.09.2022 11:13+29Скриншоты в студию с 4 разных экранов - 1080 desktop, 4k desktop, 1080 portrait mobile, 720 portrait mobile
Ionenice
29.09.2022 16:37+1Да там с мобильного устройства зайти на codepen достаточно, чтобы понять, что в этих байтах нету смысла.
Hidden text
На десктопе возможно есть какая-то «эстетичность», но она не применима к большинству сайтов
ebt
29.09.2022 14:11+3Всегда оставляйте высоту строки без указания единиц измерения, на то есть причины.
?
anayks
29.09.2022 14:53По опыту могу сказать, что кастомные шрифты могут иметь сломанное поведение при line-height в явно указанных единицах и ломать из-за этого высоту своего блока и родительского.
Так что подтверждаю, проблема не из воздуха.
OptimumOption
30.09.2022 09:26+1Интересно, почему слово "бит" во множественном числе родительного падежа имеет два варианта - "бит" и "битов", а слова на основе "байт" - только с окончанием на "-ов"? Как то этот "-ов" режет слух...
iserdmi
01.10.2022 15:50Я уже многие годы не комментировал ни одного поста на хабре. Но этот пост меня вдохновил задать вопрос автору и тем, кто поддерживает его пост: «Вы что, наркоманы?»
raspberry_pi_soft
Интересно попробовать. Сайты нечасто приходится разрабатывать, но обычно таблицы стилей разные для мобильной и десктопной версии страницы сайта. Как в этой статье.
tkovacs
Разные они были лет 10 назад, сейчас при наличии flex и медиа запросов и прочих плюшек, таблицы стилей не делятся.