CSS: Поиск/исправление непреднамеренного переполнения

RedDeveloper
02.01.2023 01:58
CSS: Поиск/исправление непреднамеренного переполнения

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

К счастью, существует быстрый и простой способ проверки переполнения. Просто добавьте следующий код CSS в свой проект или в инструменты разработчика:

* {
  outline: 1px solid #f00 !important;
}

Приведенный выше код добавит красный контур к каждому элементу, что позволит вам лучше увидеть их, чтобы определить виновника переполнения. Вы можете прокрутить страницу по горизонтали вправо, одновременно прокручивая ее по вертикали вниз, и заметить элементы, ширина которых превышает ширину body/viewport.

Приведенный выше код добавит красный контур к каждому элементу что позволит вам лучше

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

var docWidth = document.documentElement.offsetWidth; 

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

Приведенный выше код выведет в консоль фактический элемент(ы), ширина которого(ых) больше ширины документа (body/viewport).

Надеюсь, это поможет и спасибо, что прочитали!

[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный

06.02.2023 13:41

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

Топ-10 компаний-разработчиков PHP
Топ-10 компаний-разработчиков PHP

06.02.2023 12:02

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

Скраппинг поиска Apple App Store с помощью Python
Скраппинг поиска Apple App Store с помощью Python

05.02.2023 12:54

📌Примечание: В этой статье я покажу вам, как скрапировать поиск Apple App Store и получить точно такой же результат, как на Apple iMac, потому что результаты поиска на Mac полностью отличаются от результатов на PC. На скриншотах ниже показана разница:

Редкие достижения на Github ✨
Редкие достижения на Github ✨

05.02.2023 12:13

Редкая коллекция доступна в профиле на GitHub ✨

Подъем в javascript
Подъем в javascript

04.02.2023 13:59

Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих областей. Это означает, что независимо от того, где они объявлены в вашем коде, они будут обрабатываться так, как если бы они были объявлены в верхней части...

Улучшение генерации файлов Angular
Улучшение генерации файлов Angular

04.02.2023 12:52

Angular - это фреймворк. Вы можете создать практически любое приложение без использования сторонних библиотек.