Настройка CSS
С помощью собственного CSS вы можете настроить внешний вид мобильных Турбо‑страниц.
Совет
Если вы хотите настроить вид мобильных страниц, не прибегая к СSS, перейдите в раздел Кастомизация.
Ограничения
Чтобы скорость загрузки Турбо‑страниц не падала, на CSS накладываются ограничения. При написании CSS не используйте:
- сторонние шрифты (в том числе пользовательские);
- низкопроизводительную анимацию;
- селекторы по имени тега или идентификатору;
- сторонние загружаемые ресурсы (например,
.page { background-image: url("https://example.com/image.png") }
).
Ограничения проверяются с помощью Stylelint. Конфигурация.
Максимальный размер CSS в формате gzip — 21 КБ.
Как кастомизировать
Шаг 1. Определение классов
Чтобы определить класс с нужным стилем:
-
В интерфейсе Вебмастера перейдите на страницу Турбо‑страницы для контентных сайтов → Отладка.
-
В разделе отладки RSS вставьте
item
страницы, которая содержит элементы для отладки и нажмите Применить. -
Откройте инструменты разработчика. Для этого нажмите клавишу F12.
-
Выберите нужный элемент на Турбо‑странице с помощью инструмента .
-
Найдите классы и стили, которые вы хотите изменить. Используйте их при отладке отображения.
Шаг 2. Отладка отображения
Чтобы отладить отображение новых стилей:
- Переключитесь на раздел отладки стилей. Для этого нажмите кнопку CSS.
- Напишите свой CSS и нажмите кнопку Применить, чтобы увидеть применение стилей на примере Турбо‑страницы.
Стили не применяются, если они написаны с ошибкой. Ошибки отображаются под полем в блоке CSS.
Шаг 3. Сохранение стилей
Когда CSS-стили готовы и пример Турбо‑страницы отображается правильно:
- Скопируйте набор стилей и перейдите на страницу Турбо‑страницы для контентных сайтов → Настройки.
- В разделе CSS выберите Мобильные.
- Вставьте набор стилей в поле 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;
}