Поддерживаемые элементы CSS
Оформление AMP-страниц, как и любых других, определяется с помощью CSS, однако такие страницы не требуют указывать сторонние таблицы стилей (за исключением пользовательских шрифтов). Кроме того, запрещены некоторые стили, а также атрибуты встроенного стиля, потому что они снижают производительность.
Все стили должны содержаться в заголовке документа, однако с помощью препроцессоров и шаблонов CSS можно создавать статические страницы, что позволяет более эффективно управлять контентом.
Примечание. Компоненты AMP по умолчанию содержат стили, позволяющие упростить разработку адаптивных страниц. Эти стили определяются в файле amp.css.
Запрещенные стили
На AMP-страницах запрещено использовать следующие стили:
| Запрещенный стиль | Описание |
|---|---|
Квалификатор !important
| Запрещено использовать !important или ссылаться на него. Это требование важно для контроля выбора размеров элементов в AMP. |
<link rel=”stylesheet”> | Запрещен (за исключением внешних шрифтов). |
Использование строки i-amphtml- в наименованиях классов и тегов | Валидатор не пропускает имена классов и тегов, совпадающие с регулярным выражением «(^|\W)i-amphtml-». Подобные имена зарезервированы для внутреннего использования платформой AMP. Соответственно, таблица стилей пользователя не может ссылаться на CSS-селекторы классов и тегов с именами, содержащими i-amphtml-. |
Рекомендации по производительности
Для обеспечения оптимальной производительности некоторые разрешенные стили должны ограничиваться указанными ниже значениями:
| Ограниченный стиль | Описание |
|---|---|
Свойство transition
| Только свойства, которые поддерживают аппаратное ускорение графическим адаптером (на данный момент это opacity, transform и -браузерныйПрефикс-transform). |
@keyframes {...} | Только свойства, которые поддерживают аппаратное ускорение графическим адаптером (на данный момент это opacity, transform и -браузерныйПрефикс-transform). |
Исключение для внешних шрифтов
AMP-страницы не могут включать внешние таблицы стилей, за исключением внешних шрифтов.
Использование препроцессоров CSS
Контент, созданный с помощью препроцессоров, отображается как на страницах AMP, так и на любых других веб-страницах. Например, на сайте amp.dev используется язык Sass. Для создания статических страниц AMP, составляющих сайт amp.dev, применяется генератор Grow.
Если вы используете препроцессоры, загружайте только те элементы, которые применяются на ваших страницах. Например, файл head.html будет содержать всю необходимую разметку AMP и встроенные стили CSS из исходных файлов *.scss, а также скрипт специальных элементов для атрибута amp-youtube. Благодаря этому на многих страницах сайта можно встраивать видео YouTube.
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project"> <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project"> <title>AMP Project</title> <link rel="shortcut icon" href="/static/img/amp_favicon.png"> <link rel="canonical" href="{{doc.url}}"> <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css"> <style amp-custom> {% include "/assets/css/main.min.css" %} </style> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script> <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> </head>
Чтобы узнать, как указанный выше код преобразуется в формат HTML для AMP-страниц, просмотрите исходный код любой страницы на сайте amp.dev. Для этого в браузере Chrome нажмите правую кнопку мыши и выберите Просмотр кода страницы.
-
with contributions from @pbakaus , @CrystalOnScript , @bpaduch , @choumx