Браузер не распознает часть CSS кода
В общем проблема такая. Написал небольшой скрипт, и в нем динамически на страницу добавляю через чистый 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
Этот код в инспекторе просто исчез.
Отслеживать
задан 7 фев 2021 в 13:50
3 1 1 бронзовый знак
Скорее всего проблема не в стилях а в медиа-запросах. Когда вы открываете инспектор, разрешение окна браузера довольно существенно изменяется и могут примениться другие стили. Вам необходимо отсоединить инспектор в отдельное окно, чтобы оно не меняло размер окна браузера.
7 фев 2021 в 14:06
@DiD Сейчас попробовал и отсоеденить, и просто выставить в настройках разрешения мой монитор, но к сожалению не помогло. Но я попробовал выгрузить на гитхаб пэйджес и там на удивление все нормально работает даже при инспекторе
7 фев 2021 в 14:22
Какие ошибки выдаёт консоль? Обратите внимание, там нет скрытых фильтрами строчек?
7 фев 2021 в 14:37
Вообще никаких. Скрытых строчек нет. Просто они исчезли
7 фев 2021 в 14:42
А как вы их подключаете? Есть атрибут rel=»stylesheet» ? есть ли в заголовках или что-то подобное?
7 фев 2021 в 16:42
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Для вывода веб-страницы браузер должен создать объектная модель документа или DOM (англ. Document Object Model). Проверьте работу браузера перед выводом веб-страницы:
Перед тем как вывести страницу на экран, браузер создает модели DOM и CSSOM. Браузер преобразует HTML-разметку в объектную модель документа (DOM), а CSS-разметку — в объектную модель таблицы стилей (CSSOM).
- Выполнение JavaScript невозможно без модели CSSOM.
- JavaScript препятствует созданию DOM, если не использовать асинхронизацию.
Таким образом, браузер при создании модель CSSOM использует ваши стили для чебокс и див, исполнение которых скрыто в блокированном скрипте. После разблокирования скрипта, ваши стили уже могут не иметь смысла, потому что DOM и CSSOM уже созданы. Если ваш скрипт имеет асинхронность, то ваши стили могут стартовать только после активации и это также происходит после создания DOM и CSSOM.
Проверьте что говорит Википедия о JavaScript:
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
В свою очередь стили используются как встроенные в исходный код документа, так и как внешний файл. Не создавайте зависимость стилей от исполнения скрипта.
Вещи в CSS, о которых мне никто никогда не говорил.
Этот пост ни в коем случае не является критикой кого-либо, с кем я когда-либо работал, это лишь краткий список важных вещей, которые я узнал о CSS недавно, проводя собственные исследования.
Тот факт, что многим разработчикам кажется, что разработчики не особо заботятся о CSS, не является чем-то новым. Тем не менее, в сообществе многое из того, что мы узнаем, приходят из обмена знаниями со сверстниками, и в результате я иногда осознаю, что в CSS есть важные вещи, о которых мне никогда не рассказывали, потому что другие люди никогда не тратили больше времени на изучение.
Чтобы попытаться это исправить, я решил провести собственное исследование и составить небольшой список концепций, которые, на мой взгляд, интересны и полезны для лучшего понимания и написания CSS.
Этот список определенно не является исчерпывающим, он содержит только то, что я узнал за последние несколько дней, и хочу поделиться им.
Терминология
Как и в любом языке программирования, существуют определенные термины, используемые для описания концепций. CSS является языком программирования, он ничем не отличается, поэтому изучение терминологии важно, чтобы помочь в коммуникации или даже просто для вашего личного знания.
Селектор потомков (Descendant combinator)
Вы знаете этот маленький пробел между селекторами в вашем стиле? На самом деле у него есть имя — Селектор потомков (Descendant combinator).
Layout, paint and composite
Эти термины больше связаны с тем, как браузер отображает данные, но все же важно, так как некоторые свойства CSS будут влиять на различные этапы рендеринга.
Шаг макета — это вычисление того, сколько места занимает элемент, когда он находится на экране. Изменение свойства «layout» в CSS (например, width, height) означает, что браузер должен будет проверить все другие элементы и «перекомпоновать» страницу, то есть перерисовать затронутые области и собрать их вместе.
- Paint (Прорисовка)
Этот процесс заполняет пиксели для каждой визуальной части элементов (цвета, границы и т. д.). Рисование элементов обычно выполняется на нескольких слоях.
Изменение свойств «прорисовки» не влияет на макет страницы, поэтому браузер пропускает шаг макета, но по-прежнему выполняет прорисовку.
Прорисовка часто является самой дорогой частью цепочки.
- Composite (Компоновка)
Компоновка — это шаг, когда браузеру нужно рисовать слои в правильном порядке. Поскольку некоторые элементы могут перекрывать друг друга, этот шаг важен для обеспечения порядка отображения элементов.
Если вы измените CSS свойство, которое не требует ни макета, ни прорисовки, тогда браузеру нужно только сделать композицию.
Для получения подробной информации о том, что запускает изменение различных CSS свойств, посмотрите на CSS Triggers.
Производительность CSS
Селектор потомков может быть затратным
В зависимости от того, насколько большое у вас приложение, только использование селектора потомков без большей конкретности может быть очень затратным. Браузер собирается проверить каждый элемент-потомок на соответствие, потому что отношения не ограничены родительским и дочерним элементами.
Браузер собирается проверить все ссылки на странице, прежде чем переходить к тем, которые находятся внутри нашего #nav раздела.
Более эффективный способ сделать это — добавить определенный селектор .navigation-link на каждый элемент нашего #nav элемента.
Браузер читает селекторы справа налево
Я должен был знать это, потому что это звучит очень важно, но я не знал
При анализе CSS браузер резолвит селекторы CSS справа налево.
Если мы посмотрим на следующий пример:
- сматчить каждый на странице.
- найти все содержащиеся в
- .
- использовать предыдущие совпадения и сузить до тех, которые содержатся в
-
.
- Наконец, отфильтровать вышеприведенные элементы до тех, которые содержатся в элементе с классом .container
Рассматривая эти шаги, мы видим, что чем конкретнее правый селектор, тем эффективнее браузер будет фильтровать и разрешать CSS свойства.
Чтобы улучшить производительность приведенного выше примера, мы могли бы заменить .container ul li a чем-то вроде .container-link-style самого тега .
Избегайте изменения макета, где это возможно
Изменения некоторых CSS свойств потребуют обновления всего макета.
Например, такие свойства как width, height, top, left (называемые также «геометрическими свойствами»), требуют перерасчета макета и перерендерить отображение дерева для обновления.
Если вы измените эти свойства для многих элементов, потребуется много времени, чтобы рассчитать и обновить их положение/размер.
Остерегайтесь сложности прорисовки
Некоторые свойства CSS (например, blur) дороже, чем другие, когда дело доходит до прорисовки. Подумайте о других, более эффективных способах достижения того же результата.
Дорогие CSS-свойства
Некоторые свойства CSS стоят дороже, чем другие. Это означает, что они занимают больше времени, чтобы отрисовать.
Некоторые из этих дорогих свойств включают в себя:
- border-radius
- box-shadow
- filter
- :nth-child
- position: fixed
Это не означает, что вы не должны использовать их вообще, но важно понимать, что если элемент использует некоторые из этих свойств и будет рендериться сотни раз, это повлияет на производительность рендеринга.
Порядок
Порядок в файлах CSS имеет значение
Если мы посмотрим на CSS ниже:
А затем посмотрим на этот HTML-код:
Порядок селекторов в HTML не имеет значения, порядок селекторов в файле CSS — имеет.
Хороший способ оценить производительность вашего CSS — использовать инструменты разработчика вашего браузера.
Если вы используете Chrome или Firefox, вы можете открыть инструменты разработчика, перейти на вкладку «Производительность» и записать, что происходит при загрузке или взаимодействии с вашей страницей.
Ресурсы
Проводя некоторые исследования для этой статьи, я наткнулся на несколько действительно интересных инструментов, перечисленных ниже:
CSS Triggers — сайт, на котором перечислены некоторые свойства CSS и влияние на производительность использования и изменения этих свойств в вашем приложении.
Uncss — инструмент для удаления неиспользуемых стилей из CSS.
Css-explain — небольшой инструмент, объясняющий CSS-селекторы.
Fastdom — инструмент для пакетных операций чтения/записи DOM, чтобы ускорить производительность макета.
На этом пока все! Надеюсь, это имеет смысл!
Спасибо за прочтение! ��
Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира Web!
Jem
Read more posts by this author.
Почему браузер читает CSS-селекторы справа налево
Если вы не знали об этом, браузер читает селекторы справа налево, то есть обрабатывая селектор #widget .heading span он в первую очередь найдёт все спаны, затем выберет только те, которые лежат внутри .heading , а затем оставит только спаны, лежашие внутри #widget .
Звучит нелогично, но причина такого поведения в том, что задачи разработчика и браузера несколько отличаются. Задача разработчика при чтении или составлении селектора — получение соответствующего ему набора элементов. А для понимания задачи браузера нужно немного контекста.
Прежде чем отрисовать страницу, браузер строит дерево отображения (render tree). Оно состоит из объектов отображения — визуальных элементов страницы, расположенных в том же порядке, в котором они должны быть выведены на страницу. Дерево отображения строится на основе DOM , но в него не попадают невизуальные элементы вроде head или элементы с display: none; , а сложным элементам вроде select могут соответствовать несколько объектов отображения.
Отрисовка страницы состоит из нескольких этапов, но нас интересует один — компоновка объектов отображения. На этом этапе браузер проходит по дереву отображения и рассчитывает размеры и положение каждого объекта на странице. Чтобы посчитать для объекта отображения эти значения, браузеру нужно знать стили, которые применены к этому объекту. Для этого ему нужно найти в таблице стилей все блоки правил, применяемые к элементу, соответствующему объекту отображения. И здесь мы подошли к ответу на исходный вопрос.
Ключевая разница — разработчику нужно найти соответствующие CSS -селектору элементы, а браузеру нужно найти соответствующие элементу CSS -селекторы. В таком случае браузеру гораздо эффективнее читать селектор справа налево, чтобы сразу отсеять большинство неподходящих селекторов.
Рассмотрим тот же пример с селектором #widget .heading span . Предположим, что браузеру нужно определить, подходит ли этот селектор к элементу div . Если бы браузер читал селектор слева направо, ему бы пришлось найти на странице элемент с идентификатором widget , внутри него найти все элементы с классом .heading , а затем найти внутри все span и проверить, есть ли среди них тот самый div . Это очень много работы. А благодаря чтению справа налево браузер может сразу определить, что span и div — принципиально разные элементы и поэтому селектор не подходит.
Следите за выходом новых заметок через RSS или Телеграм-канал.
Этот сайт не следит за вами и не собирает никакие данные.
Поговорим о специфике работы CSS
Если вы часто используете CSS, то наверняка вам будет полезно знать о специфике его работы. Настоящий мастер в первую очередь должен знать именно это, а потом уже как позиционировать и оформлять элементы. Так же, если вы когда-то использовали ключевое слово important!, то эта статья так же для вас.
Как браузер читает CSS
В первую очередь вам необходимо знать, каким образом браузер читает CSS код. Делает он это сверху вниз, проходясь последовательно по каждой строчке:
/*Строка 10*/ ul li a < color: red; >/*Строка 90*/ ul li a
Правило написанное на строке 10, будет заменено на строке 90. В результате цвет ссылки будет синим. Правила с одинаковыми селекторами, которые находятся ближе к концу файла имеют больший приоритет.
Тот же самый принцип работает при последовальном подключении CSS файлов:
Специфика
Всё вышеперечисленное имеет место быть в том случае, если вес ваших селекторов одинаков. Если же вы приписываете ID, классы или вложенность элементов, то тут включается CSS специфика.
Существует 4 категории составляющих веса селектора: строчные стили, ID, классы и простые элементы. Как оценивать вес? Расклад такой:
- ID-шки весят 100 очков
- Классы весят 10 очков
- Элементы весят по 1 очку
Зная это, рассчитаем приоритет селектора:
#content .sidebar .module li a
100 + 10 + 10 + 1 + 1 = 122 (ID, 2 класса, 2 элемента)
Запомните:
- ID весит больше всего по сравнению с классами и элементами, поэтому вы должны ограничить использование ID в ваших стилях до минимума;
- В случаях, когда селекторы весят одинаково, порядок их применения будет такой: последний селектор имеет больший приоритет;
- Стили списанные в HTML самые козырные, так как они ближе всех к элементу;
- Единственный способ переопределить встроенные стили, это использовать ключевое слово !important;
- Псевдо-классы и атрибуты весят так же, как и обычные классы;
- Псевдо-элементы весят, как обычные элементы;
- Универсальный селектор (*) не весит ничего.
Примеры:
ul li a
Общий вес данного селектора 3 очка, так что добавив класс другой селектор будет иметь приоритет повыше.
.content #sidebar
Данный селектор весит 110 очков из-за ID и класса.
.post p:first-letter
Этот селектор весит 12 очков, так как псевдо-элемент :first-letter и тэг параграфа весят по одному баллу.
Этот селектор весит всего 1 очко. Подобный тип селектора должен быть написан в верхней части страницы. При написании основных стилей, которые в дальнейшем могут быть переопределены для конкретных областей.
Запомните, что для переопределения ID-шки, вы должны написать 256 классов для одного элемента:
#title < font-weight: bold; >.home .page .content .main .posts .post .post-content .headline-area .wrapper /* . etc. . */ .title
Только так второй селектор перебьёт первый.
Итог
Конечно теоретическая специфика CSS это далеко не самый важный аспект. Однако, зная эти правила можно ускорить работу над сайтом.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.webdesignerdepot.com/2013/04/how-to-use-css-specificity/
Перевел: Станислав Протасевич
Урок создан: 7 Мая 2013
Просмотров: 19738
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.