Опубликовано: среда, 6 сентября 2023 г. в 08:46

Как избежать CSS-сдвигов макета связанных с ch

Источник: «How to avoid CSS ch layout shifts»

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

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

Чем вызваны смещения макета CSS

Смещение макета CSS может происходить под влиянием различных факторов, например:

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

Понимание единицы измерения CSS `ch`

CSS-единица ch — это относительная единица длины, представляющая собой ширину символа "0" (ноль) в выбранном шрифте. В основном он используется для создания отзывчивых дизайнов, масштабируемых в зависимости от размера шрифта.

Единица ch позволяет определить ширину элементов или расстояние между ними относительно ширины символа "0", который обычно является моноширинным, то есть занимает столько места, сколько и другие символы в шрифте.

В моноширинных шрифтах, таких как Courier, где все символы имеют одинаковую ширину, единица ch работает как точное измерение. То есть 1ch равен одному символу. В пропорциональных шрифтах, таких как Georgia, любой символ может быть шире или уже символа "0".

Рассмотрим следующий пример:

See the Pen

Если задать ширину элемента 25ch, то она будет примерно в 25 раз больше ширины символа "0" в текущем шрифте. При изменении размера шрифта ширина элемента будет изменяться пропорционально.

В приведённом примере в .box1 используется пропорциональный шрифт Georgia, в результате чего символ "m" выходит за пределы блока. В .box2 используется моноширинный шрифт Courier, который приводит к пропорциональному масштабированию блока.

Единица измерения ch определяется шириной символа "0" в выбранном шрифте. Она служит относительной единицей измерения, которая изменяется в зависимости от размера шрифта. Она не предназначена для обозначения графических или нетекстовых элементов, размеры которых часто не определяются шириной символов.

Другие CSS-единицы, такие, как пиксели (px), проценты (%) или единицы, основанные на области просмотра (vw, vh, vmin, vmax), обычно используются для определения размера и положения фотографий или других нетекстовых элементов на веб-странице.

Альтернативы использованию CSS-единицы ch

Существует несколько стратегий, позволяющих избежать CSS-сдвигов макета, связанных с единицей измерения ch. Давайте рассмотрим их.

Использование контейнеров фиксированной ширины

Использование контейнеров фиксированной ширины, в которых ширина задаётся в пикселях или процентах, позволяет обеспечить постоянство ширины контейнера.

Ограничение динамического содержимого

Реализация методов, таких как установление ограничений на количество символов или тайминга длинного контента, для минимизации или регулирования различий в динамическом контенте макета.

Использование отступов или полей

Вместо того чтобы использовать ch для непосредственного определения размеров компонентов, используйте padding или margin для обеспечения отступов и гибкости при изменении содержимого. Это позволяет изменять содержимое без ущерба для общей компоновки.

Тестирование и модификация макета

Чтобы выявить возможные сдвиги в макете, регулярно тестируйте его с различными шрифтами и длиной контента; обязательно вносите необходимые изменения для поддержания стабильности и согласованности в различных сценариях.

Изучение альтернативных единиц

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

Использование CSS Flexbox или CSS Grid

Эти системы компоновки могут использоваться для разработки гибких и отзывчивых дизайнов. CSS Flexbox и CSS Grid могут быть полезны для уменьшения смещения макета, поскольку позволяют гибко изменять размеры и выравнивать их, не полагаясь в основном на размеры блоков.

Реализация принципов отзывчивого дизайна

Стратегии отзывчивого дизайна, такие как медиа-запросы и fluid design, помогут обеспечить лёгкую адаптацию макета к различным размерам экранов и устройств за счёт применения подхода, ориентированного на мобильные устройства, и использования относительных единиц измерения.

Замена `ch` на `rem`

Другая стратегия, позволяющая избежать сдвигов в раскладке и поддерживать более последовательную раскладку, заключается в замене единицы ch на относительную корневую единицу em (rem). Приведём несколько примеров того, где использование rem может быть полезно:

Масштабируемость: CSS-единица rem идеально подходит для разработки гибких и отзывчивых дизайнов. Вы можете просто масштабировать весь макет соответствующим образом, изменяя размер корневого шрифта с помощью медиа-запросов или препроцессоров CSS, сохраняя постоянство интервалов и масштабирования для различных устройств и размеров экрана.
Последовательное изменение размеров: В отличие от единицы ch, которая определяется шириной данного символа, единица rem определяется размером шрифта корневого элемента. Задание базового размера шрифта на корневом уровне CSS (часто в элементе <html>) делает все дополнительные размеры элементов, определяемые с помощью rem, относительными к этому базовому размеру. Таким образом, поддерживается постоянный размер всех элементов, независимо от выбранного шрифта.
Доступность: Использование элемента rem может улучшить доступность, позволяя пользователям изменять размер шрифта в настройках браузера, не нарушая вёрстку. Поскольку относительный размер подстраивается под желаемый пользователем размер шрифта, макет остаётся неизменным
Предсказуемость: Поскольку на размер отдельных символов в разных шрифтах не влияют различия, единица rem более предсказуема, чем единица ch. Элементы, масштабированные с помощью единицы rem, будут сохранять свои относительные пропорции до тех пор, пока размер корневого шрифта остаётся неизменным, что позволяет создавать более надёжные макеты.

Чтобы заменить единицу ch на rem, выполните следующие действия:

Во-первых, задайте базовый размер шрифта в корневом элементе CSS:

html {
  font-size: 20px; /* Базовый размер шрифта */
}

Затем определите размеры элементов, используя единицы измерения rem:

.container {
  width: 24rem;
  padding: 1rem;
}

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

Лучшие практики работы с единицами CSS

Для улучшения качества работы пользователей следуйте следующим рекомендациям при использовании CSS единиц:

Использование относительных единиц для обеспечения отзывчивости: Относительные единицы, такие как проценты, единицы, основанные на области просмотра, и относительные единицы em или rem, идеально подходят для создания отзывчивых дизайнов; они масштабируются в соответствии с размером родительской области или области просмотра, позволяя адаптировать макет к различным устройствам и размерам экрана.
Для фиксированных размеров используйте пиксели: Пиксели — это абсолютные единицы измерения, позволяющие точно контролировать размеры элементов. Они подходят для создания компонентов фиксированной ширины или в тех случаях, когда необходимо создать макет с идеальными пиксельными размерами. Однако следует быть осторожным при использовании пикселей для размеров шрифтов, так как это может ограничить доступность при масштабировании контента.
Используйте проценты для создания плавных макетов: Проценты отлично подходят для создания плавных макетов, изменяющихся в зависимости от родительских контейнеров; они обычно используются для таких значений, как width, height, padding, margin и position. С помощью процентных соотношений можно разработать гибкий дизайн, адаптирующийся к изменениям размеров экрана или родительского элемента.
Для отзывчивых макетов используйте единицы измерения на основе области просмотра: Единицы измерения, основанные на области просмотра, пропорциональны размерам области просмотра. Они могут использоваться для создания отзывчивой типографики, изменения размеров элементов в зависимости от ширины или высоты области просмотра или для создания полноэкранных макетов. Для достижения наилучшего пользовательского опыта избегайте высоких соотношений сторон и неравномерного масштабирования на нескольких устройствах.
Для масштабируемой типографики используйте em и rem: единицы em позиционируются относительно родительского элемента, а единицы rem — относительно корневого элемента. Они обеспечивают адаптивную и доступную типографику, которая изменяется пропорционально предпочтениям пользователя в отношении размера шрифта.
Используйте CSS Flexbox и CSS Grid для обеспечения гибкости: CSS Flexbox и Grid-макеты чрезвычайно полезны для разработки гибких и отзывчивых дизайнов. Они обеспечивают большую гибкость в выборе размера, выравнивания и положения элементов, уменьшая зависимость от конкретных блоков. С помощью этих методов компоновки можно создавать динамичные и адаптивные дизайны для экранов различных размеров.
Тестирование и оптимизация для различных сценариев: Чтобы гарантировать сохранение визуальной привлекательности и функциональности макета, протестируйте его на различных устройствах, в разных браузерах и при разных размерах экрана. Обратите внимание на настройки шрифта, поскольку они могут влиять на такие единицы масштабирования, как ch или rem. Доработка дизайна для обеспечения единообразия и удобства использования в различных сценариях.

Заключение

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