Другое

Значительная часть настроек блоков описана на страницах раздела «Общие и повторяющиеся настройки». Ниже представлены быстрые ссылки для перехода к этим страницам:

В CMS Edita используется подход с CSS-модулями, который добавляет к именам классов специальные хеши (уникальные идентификаторы). Например:

В этом примере -308833f4259ec886 — это хеш, который:

• Автоматически генерируется системой

• Меняется при изменении кода или перезапуске сборки

• Хеши меняются при обновлениях и отличаются в разных окружениях (разработка, тестирование, боевой сервер) — ⚠️ если использовать их напрямую, стили перестанут работать.

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

Для надежного доступа к классам используйте селектор атрибута с частичным совпадением:

Данный селектор выбирает все элементы, у которых атрибут class содержит указанное значение (*=), независимо от добавленного хеша.

Вместо:

Используйте:

Если элемент имеет несколько классов, и вам нужно выбрать его точно, комбинируйте селекторы:

1. Не добавляйте точку перед именем класса в селекторе [class*=] — это уже не селектор класса, а селектор атрибута:

2. Не добавляйте нижнее подчеркивание перед именем класса — используйте точное имя без префикса:

3. Для ID элементов хеши не добавляются, поэтому обращение к ним остается стандартным:

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

Особенность:

• Классы могут объединять группы элементов с похожими свойствами;

• Повторяются на странице, не гарантируют уникальность имени.

Когда использовать:

• Когда нужно оформить несколько похожих элементов одинаково;

• Когда элемент может иметь несколько разных стилей одновременно.

Пример:

К сожалению, данный способ, при всей своей простоте не подходит для стилизации стандартных элементов блоков в Edita (причину см. в раздела «Работа с CSS-классами, содержащими хеши»).
Однако, вы можете через .class стилизовать свои элементы, если вы добавляете их в разметку через блок «HTML-код».

Особенность:

• id элементов уникальны внутри одной страницы.

Когда использовать:

• Когда нужно оформить уникальный элемент, конкретный элемент, не "задев" изменениями элементы с похожими классами.

В отличие от классов, ID не получают хеши в Edita, поэтому к ним можно обращаться напрямую:

Преимущества ID:

• Не имеют хешей

• Имеют высокую специфичность

• Легко находятся в коде

Ограничения:

• ID должен быть уникальным — его можно использовать только для одного элемента на странице

• Нельзя повторно использовать те же стили для разных элементов

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

Когда использовать:

• Когда нужно оформить элементы с определенным атрибутом

• Когда работаете с классами, у которых есть хеши (как в нашем случае)

• Когда нужно выбрать элементы по частичному совпадению текста

• Легко находятся в коде

Пример:

Псевдоклассы позволяют стилизовать элементы в определенных состояниях или положениях:

Псевдоэлементы позволяют стилизовать определенные части элементов:

Для наиболее точного выбора элементов можно комбинировать разные типы селекторов:

Специфичность — это "вес" или "приоритет" ваших CSS-правил. Когда к одному элементу применяются противоречивые стили, браузер использует тот, у которого выше специфичность.

1. Обычные селекторы тегов (div, p, span)

2. Классы (.имя-класса), атрибуты ([атрибут]) и псевдоклассы (:hover)

3. ID (#имя-id)

4. Встроенные стили (style="..." прямо в HTML)

5. Правила с !important

• Когда ваши стили не применяются из-за других, более "сильных" стилей

• Когда нужно переопределить стили, которые вы не можете изменить напрямую

1. Использовать более конкретный селектор:

2. Комбинировать несколько селекторов:

3. В крайнем случае, использовать !important:

Но будьте осторожны! Чрезмерное использование !important создаст проблемы в будущем.

1. Начинайте с наименее специфичных селекторов: аттрибут [class*="имя_класса_без_хеша"] для элементов Edita и обращение через .class для ваших элементов — используйте более специфичные только когда необходимо.

2. Используйте ID для уникальных, крупных блоков страницы, а внутри них обращайтесь к элементам через атрибуты или псевдоклассы.

3. Если у блока есть уникальный ID, используйте его для создания более специфичных селекторов:

4. Для интерактивных элементов (кнопки, ссылки) используйте псевдоклассы для разных состояний:

5. Если вы не можете идентифицировать элемент по классу или ID, используйте его положение в структуре:

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

1. Откройте инструменты разработчика в браузере (DevTools):

• Chrome/Edge: F12 или Ctrl+Shift+I (Cmd+Option+I на Mac)

• Firefox: F12 или Ctrl+Shift+I

• Safari: Cmd+Option+I

2. В DevTools перейдите на вкладку "Elements" (Chrome) или "Inspector" (Firefox)
Если вы всё сделали верно, то внизу окна увидите что-то похожее на

или

3. Выберите элемент на странице, к которому вы пытаетесь применить стили:

• В открывшемся окне DevTools нажмите на значок "Select an element" (иконка курсора в квадрате) в левом верхнем углу

• Кликните на элемент страницы, для которого вы написали стили

• В панели Elements/Inspector отобразится HTML-код этого элемента с его классами

4. Анализ классов элемента:

• Изучите атрибут class выбранного элемента в разметке (левая большая часть вкладки). Вы увидите что-то вроде:

  <div class="button_primary_a1b2c3 button_size_medium_x7y8z9">...</div>

• Запомните или запишите базовую часть имени класса (без хеша):

  • button_primary

  • button_size_medium

5. Проверка применения ваших стилей:

• В правой части DevTools перейдите на вкладку "Styles" (Chrome/Edge) или "Rules" (Firefox)

• Прокрутите список стилей, чтобы найти ваш селектор:

  [class*="button_primary"]

• Если ваш селектор присутствует в списке и не перечеркнут, значит стили применяются.

• Если ваш селектор отсутствует в списке, значит он не захватывает нужный элемент:

  • Проверьте опечатки в имени класса

  • Убедитесь, что не добавили точку (.) перед именем класса в селекторе

  • Проверьте, правильно ли вы скопировали базовую часть имени класса

• Если ваши стили перечеркнуты, значит они переопределены другими стилями с более высоким приоритетом.

• Если ваши стили перечеркнуты, а слева от правила есть значок ⚠️ — нужно перепроверить правильность написания css-правила.

6. Отладка с помощью панели Styles/Computed

• Перейдите на вкладку "Computed" (Chrome/Edge) или "Computed view" (Firefox).

• В поле поиска введите имя свойства, которое вы хотите проверить (например, color или margin-top).

• Изучите результат:

  • Вы увидите фактическое значение свойства, применяемое к элементу

  • Ниже будет показано, какие селекторы влияют на это свойство и их приоритет

• Если ваш селектор перечеркнут, значит он переопределен другим селектором с более высоким приоритетом. Возможные решения:

  • Использовать более специфичный селектор

  • Добавить !important к свойству (использовать с осторожностью, может перебить нужные стили!)

  • Изменить порядок подключения стилей

7. Временное редактирование для тестирования

• Вы можете временно изменить или добавить стили прямо в DevTools (при обновлении страницы такие стили удалятся):

  • Кликните по значению свойства, чтобы изменить его

  • Нажмите Tab, чтобы добавить новое свойство

  • Нажмите Enter для применения изменений

• Если стили работают при редактировании в DevTools, но не работают в вашем коде, проверьте:

  • Правильность синтаксиса CSS

  • Порядок загрузки стилей

  • Отсутствие конфликтов с другими стилями

7. Копирование правильного селектора из DevTools

• Щелкните правой кнопкой мыши на нужном элементе в панели Elements/Inspector.

• Выберите "Copy" → "Copy selector".

• Полученный селектор может содержать хеши. Преобразуйте его в формат с [class*=]:

Было:

Стало:

1. Включение инструментов разработчика в Safari
По умолчанию меню разработчика в Safari может быть скрыто. Чтобы его активировать:

• Откройте Safari.

• В верхнем меню выберите "Safari" → "Настройки" (или "Preferences").

• Перейдите на вкладку "Дополнения" (или "Advanced").

• В нижней части окна установите флажок "Показывать меню «Разработка» в строке меню" (или "Show Develop menu in menu bar").

• Закройте окно настроек.

• Теперь в верхнем меню Safari появится новый пункт "Разработка" (или "Develop").

2. Открытие инструментов разработчика
После активации меню разработчика вы можете открыть инструменты разработчика одним из следующих способов:

• Способ 1: Через меню
  В верхнем меню выберите "Разработка" (или "Develop").
  Из выпадающего меню выберите "Показать инспектор элементов" (или "Show Web Inspector").

• Способ 2: Горячие клавиши
  Cmd+Option+I

• Способ 3: Контекстное меню
  Щелкните правой кнопкой мыши на элементе страницы.
  Выберите "Исследовать элемент" (или "Inspect Element").

3. Использование инспектора элементов в Safari
Safari DevTools имеет немного другой интерфейс и терминологию, чем Chrome или Firefox:

• После открытия Web Inspector вы увидите панель с несколькими вкладками в верхней части.

• Для проверки стилей используйте вкладки:

  • "Elements" (для просмотра HTML-структуры)

  • "Styles" (для проверки CSS-стилей)

  • "Computed" (для проверки итоговых вычисленных стилей)

• Чтобы выбрать элемент на странице, нажмите на значок курсора в левом верхнем углу инспектора или используйте горячую клавишу:
  Cmd+Shift+C

• Щелкните по элементу на странице, стили которого вы хотите проверить.

4. Анализ стилей в Safari

Данный процесс аналогичен работе в Dev Tools в браузерах Chrome и Firefox (см. выше пункты 2-8)

Было:

Стало:

Этот подход позволит вашим стилям работать независимо от того, как меняются хеши в классах элементов.

Допустим, вы добавили в блок "HTML-код" следующие стили:

Для проверки:

1. Откройте DevTools (F12)

2. Выберите заголовок, который должен стать красным

3. Убедитесь, что в его классах есть header_title (возможно с хешем)

4. В панели Styles найдите ваш селектор [class*="header_title"]

5. Проверьте, применились ли свойства color: red и font-size: 28px

6. Если свойства перечеркнуты, изучите, какой селектор их переопределяет

7. При необходимости сделайте ваш селектор более специфичным:

Следуя этой инструкции, вы сможете эффективно отлаживать стили, даже если у элементов есть хеши в классах.