Какие правила CSS поддерживает AMP HTML?

Я прочитал https://github.com/ampproject/amphtml/blob/master/docs/create_page.md об использовании CSS, но я не уверен, какие селекторы CSS позволяет формат. Существуют ли какие-либо ограничения на селекторы/свойства?

Можно ли размещать объявления стиля где угодно в <html> или только в <head>?

Можно ли включить какие-либо внешние таблицы стилей?


css amp-html
person Mohamed Hussain    schedule 08.10.2015    source источник

Ответы (2)


arrow_upward
19
arrow_downward

Из официальной документации AMP GitHub:

  • Вы можете включить тег 1 <style> в <head> модели DOM. Вы должны добавить amp-custom к тегу <style> следующим образом: <style amp-custom>your style rules here</style>

  • Вы не можете изменить свойство margin элемента body.

  • Вы не можете загрузить внешнюю таблицу стилей или импортировать ее через @import

  • Вы не можете добавлять атрибуты стиля к элементам.

  • Вы не можете использовать квалификатор !important.

  • Вы никогда не можете использовать любое из следующих свойств:

    • behavior:
    • overflow: scroll
    • overflow: auto
    • transition:
    • filter
    • animation
    • -moz-binding

  • Вы можете использовать следующие селекторы:

    • .class e.g. .row
    • #id e.g. #sidebar
    • tag-name e.g. section
    • селектор, селектор, например. .row, .clearfix или #sidebar, #main-body, article
    • медиа-запросы, например. @media (max-width:48em){}

  • Вы можете использовать следующие псевдоселекторы:

    • :hover
    • :active
    • :visited

  • Вы не можете использовать какие-либо элементы input, за исключением button (поскольку они используются для взаимодействия с веб-компонентами AMP).

  • Вы обязаны избегать использования имен классов с префиксом -amp или -amp- во избежание конфликтов с компонентами AMP. Вы можете переопределить стили этих компонентов, если хотите.

  • Ваши правила стиля не должны превышать 50 КБ.

  • Вы можете приобрести ресурсы шрифта либо через поставщика шрифтов из белого списка (... Google Fonts), либо загрузив шрифт через @font-face через HTTP/HTTPS, то есть не через data: или плагин JavaScript (поскольку JS запрещен).

person amdouglas    schedule 08.10.2015
comment
Вы также не можете объявлять атрибут type для button элементов. Просто на голову. - person amdouglas; 08.10.2015
comment
Это анекдотично, потому что валидатор AMP — это кусок дерьма, но, потратив некоторое время на устранение некоторых недействительных селекторов, я могу подтвердить, что псевдоэлементы :first-child, :last-child, :before, :after и селекторы прямого потомка (>) проходят успешно. Проверка. - person amdouglas; 08.10.2015
comment
Спасибо, Цезарь; однако я должен предупредить вас, что я не обновлял свой ответ в соответствии со спецификацией с течением времени, поэтому мой ответ может быть уже не на 100% точным. Я бы сослался на самую последнюю информацию (также можно просмотреть здесь, на github) - person amdouglas; 22.09.2016
comment
В значительной степени это так, сделал фиктивную страницу с вашими спецификациями и отлично работал. Наставил меня на правильный путь. Проблема, с которой я сталкиваюсь сейчас, зная, как работает AMP, заключается в том, хочу ли я обновить весь свой сайт без начальной загрузки :( - person Cesar Bielich; 22.09.2016
comment
Если вы решите отказаться от Bootstrap, возможно, вам будет полезна альтернатива. Min.css или что-то в этом роде соответствует максимальному размеру таблицы стилей amp-custom, позволяет избежать нарушения правил и дает внешний вид Bootstrapy — с небольшим украшением. - person amdouglas; 22.09.2016
comment
Я предполагаю, что это все CSS, а не JS. - person Cesar Bielich; 22.09.2016
comment
Это действительно так, хотя я не пробовал, потому что я склонен использовать свой собственный CSS с каждым проектом, который я делаю. Иногда CSS может быть достаточно. - person amdouglas; 22.09.2016
comment
Да, я могу жить без JS, просто нужно изменить структуру тех страниц, на которых он есть. Больше нет jstables :( - person Cesar Bielich; 22.09.2016
comment
Есть ли альтернативы таблицам JS с CSS? - person Cesar Bielich; 22.09.2016
comment
Думаете ли вы об усилении сайта в своем профиле? Вы можете использовать какой-нибудь очень, действительно хакерский CSS для достижения эффекта, похожего на нумерацию страниц в таблицах, но, честно говоря, я бы не рекомендовал это делать. Лучше всего было бы создать компоненты и загрузить их с пользовательскими элементами amp-iframe. Это можно сделать: в качестве эксперимента я создал полнофункциональный веб-форум, прошедший проверку AMP, загрузив CRUD-формы в amp-iframes. - person amdouglas; 22.09.2016
comment
да, это сайт, я собираюсь попробовать amp-iframe - person Cesar Bielich; 22.09.2016
comment
@амдуглас. Не могли бы вы проверить эту ссылку. stackoverflow .com/questions/42199925/. Я застрял в AMP. - person Varun Sharma; 23.02.2017

arrow_upward
0
arrow_downward

Свойство css «переход» не запрещено, оно ограничено только свойствами с ускорением на GPU (в настоящее время непрозрачность, преобразование и -vendorPrefix-transform).

https://www.ampproject.org/docs/guides/responsive/style_pages

person Artur Fidelus    schedule 08.12.2016