CSS для Турбо-страницы

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

  1. Пример стилизации с помощью CSS
  2. Как использовать CSS
  3. Ограничения

Пример стилизации с помощью CSS

Посмотрите примеры CSS-селекторов для оформления разных элементов страницы.

/* Выделение цветом шапки страницы */

.cover {
  background: #BBD8E4;
  padding-bottom: 32px;
}

/* Заголовок страницы по центру */
.cover .title {
  text-align: center;
}

.cover .subtitle {
  text-align: center;
  margin-top: 8px;
}

.cover .image {
  margin-top: 24px;
  border-radius: 4px;
}

/* Цвет ссылок */
.link {
  color: #307896;
}

/* Цвет иконки Турбо-страницы в шапке */
.page .header-turbo-icon {
  fill: rgba(0, 0, 0, 0.6);
}

/* Шрифт заголовка */
.title_level_2 {
  font-weight: 100;
}

Как использовать CSS

Чтобы написать CSS-разметку и посмотреть ее отображение, выполните следующее:
  1. На странице Турбо-страницы → Отладка откройте блок CSS и в поле напишите правила.
  2. Нажмите кнопку Отладить, чтобы увидеть применение стилей на примере Турбо-страницы.

Стили не применяются, если они написаны с ошибкой. Ошибки отображаются под полем в блоке CSS.

Когда CSS-стили готовы и пример Турбо-страницы отображается правильно:
  1. Скопируйте созданный вами код и перейдите на страницу Турбо-страницы → Настройки.
  2. В блоке CSS нажмите кнопку Изменить и добавьте код в поле. Нажмите кнопку Сохранить.

Ограничения

При написании CSS-разметки не используйте:

  • Пользовательские стили.
  • Сторонние, в том числе пользовательские, шрифты.
  • Низкопроизводительную анимацию.
  • Селекторы по названиям HTML-элементов. Например, .a { color: #307896; }.
  • Сторонние загружаемые ресурсы. Например, .page { background-image: url("https://example.com/image.png") }.