Java, UX, HTML, CSS, WEB-design

Проблемы переполнения в CSS


  • Ахмад Шадид

  • 0 Комментарии

Проблемы переполнения в CSS

  • 9 минут чтения

  • CSS, CSS-сетка, макеты, отладка

Краткое резюме ↬

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

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

Что такое проблема переполнения?

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

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

Переполнение с элементом фиксированной ширины, который шире окна просмотра. (Большой превью)

Это может произойти из-за неожиданно широкого содержимого или элемента с фиксированной шириной, который шире окна просмотра. В этой статье мы рассмотрим все причины.

Еще после прыжка! Продолжить чтение ниже ↓

Как обнаружить переполнение

Важной частью решения этой проблемы является ее замечание. Если мы знаем, когда и где это происходит, мы можем сосредоточиться на этой части веб-страницы. Существуют разные способы обнаружения переполнения: от ручной прокрутки влево или вправо до использования JavaScript.

Давайте рассмотрим способы обнаружения переполнения.

Прокрутка влево или вправо

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

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

Всякий раз, когда вы можете прокручивать, в игре происходит переполнение. (Большой превью)

Использование JavaScript для поиска элементов шире тела

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

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

CSS Outline в помощь

Применение CSS’ outline ко всем элементам на странице дает нам подсказку об элементах, которые выходят за пределы страницы body.

* {
    outline: solid 1px red;
}

Тот же пример с элементом, отображаемым за пределами области просмотра.

Полоса прокрутки появляется, когда элемент находится за пределами области просмотра. (Большой превью)

Более того, у Эдди Османи есть скрипт, который добавляет контур к каждому элементу на странице со случайным цветом.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

Ярлык переполнения в Firefox

В Firefox есть полезная функция, которая сообщает вам, какие элементы вызывают переполнение. Надеюсь, другие браузеры добавят это!

Тот же пример каркаса, объясненный с помощью полезной функции в Firefox

Значок переполнения, отображаемый в Firefox DevTools. (Большой превью)

Удаление элементов страницы

Другой распространенный способ — открыть DevTools браузера и начать удалять элементы один за другим. Как только проблема исчезнет, ​​вероятно, причиной является раздел, который вы только что удалили. Я нашел этот метод полезным в тех случаях, когда вы определили проблему, но не знаете, почему это происходит.

Как только вы обнаружите, где происходит переполнение, будет проще сделать сокращенный тестовый пример для дальнейшей отладки.

Распространенные проблемы с переполнением

Элементы фиксированной ширины

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

.element {
    /* Don’t do this */
    width: 400px;
}

Пример мобильного каркаса, показывающий элементы фиксированной ширины за пределами окна просмотра

Пример мобильного каркаса, показывающий элементы фиксированной ширины за пределами окна просмотра. (Большой превью)

Использование Flexbox без упаковки

Каким бы полезным ни был Flexbox, не позволять элементам переноситься на новую строку, когда нет свободного места, — это рискованно.

.parent {
    display: flex;
}

Здесь гибкие элементы могут вызвать горизонтальное переполнение, если места недостаточно, чтобы разместить их все в одной строке:

Элементы Flex, вызывающие горизонтальное переполнение, появляются за пределами области просмотра

Элементы Flex, вызывающие горизонтальное переполнение, появляются за пределами области просмотра. (Большой превью)

Обязательно используйте flex-wrap: wrap когда родитель flex должен работать с разными размерами области просмотра.

.parent {
    display: flex;
    /* Do this */
    flex-wrap: wrap;
}

CSS-сетка

Когда вы используете сетку CSS, важен адаптивный дизайн. Возьмите следующую сетку:

.wrapper {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    grid-gap: 1rem;
}

Приведенный выше пример будет отлично работать, если область просмотра не меньше 300 пикселей. Если это так, то произойдет переполнение.

Отображение переполнения, когда элемент сетки имеет ширину 300 пикселей

Отображение переполнения, когда элемент сетки имеет ширину 300 пикселей. (Большой превью)

Чтобы избежать такой проблемы, используйте сетку только тогда, когда доступно достаточно места. Мы можем использовать медиа-запрос CSS следующим образом:

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    .wrapper {
        grid-template-columns: 1fr 300px 1fr;
    }
}

Длинные слова

Еще одна распространенная причина переполнения — длинное слово, которое не помещается в окне просмотра. Это больше происходит на мобильных устройствах из-за ширины области просмотра.

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

Пример использования длинных слов, которые не помещаются и не могут поместиться в ширину области просмотра. (Большой превью)

Чтобы исправить это, нам нужно использовать overflow-wrap имущество.

.article-content p {
  overflow-wrap: break-word;
}

Я написал подробную статью об обработке как короткого, так и длинного контента с помощью CSS.

Это исправление особенно полезно для контента, созданного пользователями. Прекрасным примером этого является ветка комментариев. Пользователь может вставить длинный URL-адрес в свой комментарий, и это должно быть обработано с помощью overflow-wrap имущество.

Минимальный размер содержимого в CSS Flexbox

Еще одна интересная причина переполнения — минимальный размер контента во Flexbox. Что это значит?

Еще один пример использования слишком длинных слов

Еще один пример использования слишком длинных слов. (Большой предварительный просмотр)

Согласно спецификации:

«По умолчанию гибкие элементы не уменьшаются ниже минимального размера содержимого (длины самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите min-width или min-height имущество.»

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

Чтобы исправить это, мы можем либо использовать overflow значение, отличное от visible, или мы можем установить min-width: 0 на гибком элементе.

.card__name {
    min-width: 0;
    overflow-wrap: break-word;
}

Сравнение до и после или разбиение длинных слов, чтобы они поместились на следующей строке и оставались в пределах области просмотра.

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

Минимальный размер содержимого в сетке CSS

Как и в случае с Flexbox, у нас та же концепция минимального размера контента с CSS Grid. Однако решение немного отличается. CSS-Tricks называет это «выбросом сетки».

Пример выноса сетки, содержимое которой не соответствует заданному размеру или ширине.

Пример раздутой сетки, содержимое которой не соответствует заданному размеру или ширине. (Большой превью)

Давайте изучим вопрос. Предположим, у нас есть обертка с боковой и основной секциями, выложенными сеткой CSS.

.wrapper {
    display: grid;
    grid-template-columns: 248px 1fr;
    grid-gap: 40px;
}

Кроме того, у нас есть секция прокрутки в основной секции, для которой я использовал flexbox.

.section {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
}

Заметьте, я не добавил flex-wrap, потому что я хочу, чтобы гибкие элементы находились в одной строке. Однако это не сработало и вызвало горизонтальное переполнение.

Чтобы исправить это, нам нужно использовать minmax() вместо 1fr. Таким образом, минимальный размер содержимого основного элемента не будет auto.

.wrapper {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  grid-gap: 40px;
}

Отрицательные поля

Элемент, расположенный за пределами экрана, может вызвать переполнение. Обычно это происходит потому, что элемент имеет отрицательный запас.

В следующем примере у нас есть элемент с отрицательным полем, а язык документа — английский (т. е. слева направо).

.element {
    position: absolute;
    right: -100px;
}

Элемент, расположенный за пределами экрана, показан справа

Элемент, расположенный за пределами экрана, показан справа. (Большой превью)

Интересно, что когда элемент расположен на противоположной стороне, переполнения не происходит. Это почему?

Элемент, расположенный за пределами экрана, показан слева.

Элемент, расположенный за пределами экрана, показан слева. (Большой превью)

Я недавно столкнулся с этой проблемой и написал об этом. Оказывается, такое поведение является преднамеренным. Согласно спецификации CSS:

«UA должны обрезать прокручиваемую область переполнения контейнеров прокрутки на сторонах начала блока и встроенного начала поля (тем самым ведя себя так, как если бы у них не было прокручиваемого переполнения на этой стороне)».

Для англоязычного документа сторона inline-start — это левый сторона, поэтому любой элемент, расположенный за пределами экрана слева, будет обрезан, и, таким образом, не будет переполнения.

Если позиционирование элемента вне экрана действительно необходимо, обязательно примените overflow: hidden к родителю, чтобы избежать переполнения.

Изображения без max-width

Если вы не позаботитесь о больших изображениях заранее, вы увидите переполнение. Обязательно установите max-width: 100% на всех изображениях.

img {
    max-width: 100%;
}

Единицы области просмотра

С использованием 100vw имеет недостаток, заключающийся в том, что он может вызвать переполнение, когда полоса прокрутки видна. В macOS 100vw это нормально и не вызывает горизонтальной прокрутки.

В Mac OS со скрытыми полосами прокрутки работает нормально

В Mac OS полосы прокрутки скрыты. (Большой превью)

В Windows полосы прокрутки всегда видны по умолчанию, поэтому может произойти переполнение.

В Windows есть горизонтальное переполнение при прокрутке

В Windows при прокрутке происходит горизонтальное переполнение. (Большой превью)

Причина этого в том, что при значении 100vw, отсутствует осознание ширина вертикальной полосы прокрутки браузера. В результате width будет равно 100vw плюс ширина полосы прокрутки. К сожалению, для этого нет исправления CSS.

Пример страницы с областью просмотра 100vw и 14px справа, используемой для полосы прокрутки.

Пример страницы с областью просмотра 100vw и 14px справа, используемой для полосы прокрутки. (Большой превью)

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

function handleFullWidthSizing() {
  const scrollbarWidth = window.innerWidth - document.body.clientWidth

  document.querySelector('myElement').style.width = `calc(100vw - ${scrollbarWidth}px)`
}

Внедренные объявления

Объявления, внедряемые при загрузке страницы, могут вызвать переполнение, если они шире своего родителя. Добавлять overflow-x: hidden к родительскому элементу, чтобы предотвратить это.

Мобильная область просмотра с переполнением, вызванным рекламой, которая шире, чем область просмотра

Мобильная область просмотра с переполнением, вызванным рекламой, которая шире области просмотра. (Большой превью)

Дважды проверьте каждое объявление на веб-сайте, чтобы убедиться, что оно не вызывает переполнения.

Применяется overflow-x: hidden к body хорошая идея?

Выбор для overflow-x: hidden это как наложить повязку, не решая проблему. Если у вас переполнение, то лучше решить корневую проблему.

Более того, применяя overflow-x: hidden к body элемент не является хорошей идеей, потому что position: sticky не будет работать, если у родителя есть overflow-x: hidden.

Как избежать переполнения в CSS

Ниже приведены вещи, которые нужно проверить, чтобы уменьшить количество проблем с переполнением в CSS. Я надеюсь, что вы найдете это полезным!

Протестируйте с реальным содержанием

Ничто не сравнится с тестированием реального контента на веб-сайте. При этом вы гарантируете, что макет может обрабатывать различные типы контента.

Учетная запись для пользовательского контента

Для такого компонента, как цепочка комментариев, учитывайте случаи, когда пользователь будет вставлять длинный URL-адрес или вводить длинное слово, как описано выше.

Используйте CSS Grid и Flexbox осторожно

Какими бы полезными ни были сетки CSS и flexbox, при неправильном использовании они могут легко вызвать переполнение. Как мы обсуждали, не используя flex-wrap: wrap может вызвать переполнение, как может grid-template-columns: 1fr 350px когда экран уже, чем 350 пикселей.

Дальнейшее чтение на SmashingMag:

  • Вещи, которые вы можете сделать с CSS уже сегодня
  • Доступные интерфейсные компоненты
  • Инструменты аудита CSS
  • Генераторы CSS
  • …и многое другое в нашем Руководстве по компоновке CSS.
Сокрушительная редакция
(вф, иль, ал)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Проблемы переполнения в CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Проблемы переполнения в CSS

Название: Проблемы переполнения в CSS . Краткое описание: ⭐ Ахмад Шади . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»