Устранение неполадок с CSS

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

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

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

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

  1. Во-первых, убедитесь, что ваши стили вообще назначены целевому элементу. Откройте инструменты разработчика браузера, нажав F12 в Windows/Linux или Option + ⌘ + I на Mac.

  2. В инструментах разработчика включите инструмент "Инспектор", доступный в левом верхнем углу открытого окна.

  3. При наведении курсора на нужный элемент щелкните по нему, чтобы просмотреть его свойства CSS.

  1. Изучите свойства Стилей (Styles) выбранного элемента. Если вам трудно найти CSS, который вы добавили к элементу, попробуйте переключиться на вкладку Вычисляемые (Computed) и найдите там одно из свойств, которое вы пытаетесь изменить. Если свойство находится в списке, разверните его, чтобы просмотреть каскад правил, определяющих его значение, и найдите то, которое вы добавили.

  1. Если вы все еще не можете найти ни один из своих стилей в Вычисляемые (Computed) свойствах, значит, что-то не так с CSS, который вы пытаетесь применить. В этом случае выясните, что именно в свойствах пошло не так, и это, надеюсь, решит проблему.

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

Проверка добавленных стилей

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

  1. Проверьте, не направлено ли ваше CSS-правило на некорректный HTML-элемент. Это может быть лишний/пропущенный элемент или комбинатор в правиле, или просто опечатка.

Чтение статьи Использование селекторов поможет вам лучше понять, как составлять селекторы для CSS-правил в UI Builder.

  1. Если вы уверены, что селектор корректен с точки зрения позиции целевого элемента в DOM, и он записан в свойстве Стиль CSS элемента группы свойств Стиль элемента в Редакторе свойств компонента:

    • Убедитесь, что вы не используете HTML-элементы, расположенные за пределами разметки Элемента компонента, в качестве части селектора. В SberMobile Редакторе CSS отправной точкой выбора является не тег <html> документа, а внешняя HTML-обертка того, к чему обращается пользовательское свойство стиля.

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

    • Если дополнительных выделенных полей стилей нет и изменение правила не помогает, попробуйте переместить проблемный фрагмент CSS в свойство Стиль контейнера группы свойств Свойства контейнера.

  2. Если вы подключили пользовательский CSS в качестве ссылки на внешний файл или запись Медиатеки, проверьте, отображается ли она в разделе <head> документа и имеет ли она правильное содержимое.

Разрешение конфликтов между правилами

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

  • Написано другоеCSS-правило, которое соответствует тому же элементу и имеет больший вес из-за своей специфики.

  • Один из стилей по умолчанию компонента имеет более специфический селектор, чем тот, который вы используете в своем пользовательском стиле.

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

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

Все веб-компоненты SberMobile имеют набор стилей по умолчанию, которые отвечают за то, как компоненты выглядят и взаимодействуют из коробки.

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

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

Флаг important

Среди способов борьбы с упрямым пользовательским стилем, который не хочет применяться так, как должен, есть печально известный CSS-флаг !important.

Когда он используется с CSS-свойствами , CSS-флаг !important изменяет правила выбора деклараций внутри каскада, делая свойство наиболее приоритетным, независимо от специфики правил выбора или других факторов.

Разделитель !, за которым следует ключевое слово important, отмечает объявление как важное. Синтаксис выглядит следующим образом:

свойство: значение !important;

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

В очень редких случаях вы можете встретить элементы компонентов, у которых встроенные CSS-стили объявлены как значение их атрибута style. Если стили не предназначены для определения текущих значений динамических свойств, использование флагов !important - единственный способ их отменить.

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

Избегайте использования !important для переопределения специфичности по любым причинам, кроме устранения неполадок или переопределения стилей встроенных элементов HTML. Никогда не стоит использовать этот флаг в реальном проекте, со временем он только создаст больше проблем.

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

Здесь приведен список наиболее распространенных проблем, с которыми вы можете столкнуться при работе со стилями веб-компонентов в UI Builder, а также способы их решения.

Проблема

Пользовательский CSS не отображается в стилях компонентов.

Решение

Следуйте разделам Выявление проблем с CSS и Проверка добавленных стилей этой статьи.

Проблема

Стиль компонента по умолчанию не переопределяется с помощью пользовательского CSS.

Решение

  1. Адаптируйте свой выбор, чтобы преодолеть вес того, который вызывает конфликт.

  2. Используйте флаг !important, если вы пытаетесь переопределить значение свойства встроенного стиля.

Проблема

CSS-файл, подключенный к инструментальной панели, не применяется.

Решение

  1. Убедитесь, что файл прикреплен к инструментальной панели, как описано в конце примера Добавление пользовательских CSS-файлов в инструментальную панель.

  2. Если вы берете CSS-файл из внешнего ресурса, проверьте его текущую доступность.

  3. Если вы подключаете CSS-файл из Медиатеки, установите его настройки кэширования на PUBLIC, как описано в примере Загрузка ресурсов в расширение.

  4. Проверьте валидность CSS в файле с помощью любого доступного сервиса.

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

Проблема

Шрифт, подключенный к инструментальной панели, не применяется, когда он используется.

Решение

  1. Убедитесь, что шрифт подключен к инструментальной панели, как описано в примере Подключение шрифтов к Инструментальной панели.

  2. Если вы получаете шрифт из внешнего ресурса, проверьте его текущую доступность

  3. Если вы подключаете файл шрифта из Медиатеки, установите настройки его кэширования на PUBLIC, как описано в примере Загрузка ресурсов в расширение.

  4. Проверьте правильность применения свойства font-family, как описано в примере "Применение шрифтов к компоненту ".

  5. Для дальнейшего устранения неполадок выполните те же процедуры, что и для других CSS-свойств стилей .

Проблема

Последние изменения CSS игнорируются.

Решение

  1. Попробуйте обновить кэш браузера с помощью Ctrl + F5 в Windows/Linux или ⌘ + ⇧ + R на Mac.

  2. Если селектор в проблемном стиле был изменен, проверьте, правильна ли новая нотация.

  3. Выясните, не было ли изменений в других свойствах компонента, над которым вы работаете, которые могли повлиять на его HTML-структуру и атрибуты.

  4. Если вы берете CSS-файл из внешнего ресурса, проверьте его доступность в данный момент.

  5. Если вы подключаете CSS-файл из Медиатеки, установите его настройки кэширования на PUBLIC, как описано в примере Загрузка ресурсов в расширение.

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

Проблема

Полосы прокрутки появляются в контейнере компонента.

Решение

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

  2. Проверьте значение свойства Выход за пределы контента в группе свойств Свойства контейнера компонента. Возможно, вам потребуется изменить его на скрытый или видимый в зависимости от конкретного случая.

  3. Если вы используете CSS-свойство overflow в пользовательском стиле, проверьте, как поведет себя разметка, если его отключить.

  4. Если вы не используете CSS-свойство overflow в стиле компонента, найдите HTML-элемент с полосами прокрутки в DOM инструментальной панели и попробуйте применить свойство с подходящим значением к нему или его потомкам.