Браузер не распознает часть CSS кода

Question

В общем проблема такая. Написал небольшой скрипт, и в нем динамически на страницу добавляю через чистый js элементы (чекбокс текст и два дива). Дал этим классам стили, но браузер не видит этот код. Хотя остальную часть видит прекрасно. В обычном режиме стили применяются, но как только я захожу в режим инспектора F12 они сбрасываются до перезагрузки страницы. С чем это может быть связано?

.taskBlock{
  width: 100%;
  display: flex;
  border-bottom: 1px solid black;
}

.check{
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: 10%;
  top: 50%;
  border: 1px solid black;
  padding: 10px;
}

.close{
  width: 10%;
  display: inline-block;
  background-color: red;
  color: white;
  cursor: pointer;
}

.span{
  display: inline-block;
  vertical-align: middle;
}

Этот код в инспекторе просто исчез.

Answer 1

Для вывода веб-страницы браузер должен создать объектная модель документа или DOM (англ. Document Object Model). Проверьте работу браузера перед выводом веб-страницы:

Перед тем как вывести страницу на экран, браузер создает модели DOM и CSSOM... Браузер преобразует HTML-разметку в объектную модель документа (DOM), а CSS-разметку - в объектную модель таблицы стилей (CSSOM).

Далее проверьте влияние javascript на парсинг браузера:

Выполнение JavaScript невозможно без модели CSSOM.

JavaScript препятствует созданию DOM, если не использовать асинхронизацию.

Таким образом, браузер при создании модель CSSOM использует ваши стили для чебокс и див, исполнение которых скрыто в блокированном скрипте. После разблокирования скрипта, ваши стили уже могут не иметь смысла, потому что DOM и CSSOM уже созданы. Если ваш скрипт имеет асинхронность, то ваши стили могут стартовать только после активации и это также происходит после создания DOM и CSSOM.

Проверьте что говорит Википедия о JavaScript:

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

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

БЛОГ НА HUSL

Браузер не распознает часть CSS кода

Ответы (1 шт):