Настройка CSS

С помощью собственного CSS вы можете настроить внешний вид мобильных Турбо‑страниц.

Ограничения

Чтобы скорость загрузки Турбо‑страниц не падала, на CSS накладываются ограничения. При написании CSS не используйте:

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

Ограничения проверяются с помощью Stylelint. Конфигурация.

Максимальный размер CSS в формате gzip — 21 КБ.

Как кастомизировать

Шаг 1. Определение классов

Чтобы определить класс с нужным стилем:

1. В интерфейсе Вебмастера перейдите на страницу Турбо‑страницы для контентных сайтов → Отладка.

2. В разделе отладки RSS вставьте item страницы, которая содержит элементы для отладки и нажмите Применить.

3. Откройте инструменты разработчика. Для этого нажмите клавишу F12.

   

4. Выберите нужный элемент на Турбо‑странице с помощью инструмента .

5. Найдите классы и стили, которые вы хотите изменить. Используйте их при отладке отображения.

Шаг 2. Отладка отображения

Чтобы отладить отображение новых стилей:

1. Переключитесь на раздел отладки стилей. Для этого нажмите кнопку CSS.
2. Напишите свой CSS и нажмите кнопку Применить, чтобы увидеть применение стилей на примере Турбо‑страницы.

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

Шаг 3. Сохранение стилей

Когда CSS-стили готовы и пример Турбо‑страницы отображается правильно:

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

HTML и CSS

Использование HTML и 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;
}