Должен ли ампер-кастом быть размещен до или после установки усилителя - PullRequest
Новая
       22

Должен ли ампер-кастом быть размещен до или после установки усилителя

0 голосов
/ 04 мая 2018

Некоторые из найденных мной образцов AMP включают тег amp-custom до amp-boilerplate. 

  <style amp-custom>
    h1 {
      color: red;
    }
  </style>
  <style amp-boilerplate>.....</style>

В то время как другие примеры показывают amp-boilerplate перед , amp-custom. 

<style amp-boilerplate>
    .....
</style>
<style amp-custom>
    h1 {
        color: red;
    }
</style>

Если я хочу, чтобы моя страница соответствовала стандартам AMP, должен ли я разместить тег стиля amp-custom до или после моего тега стиля усилителя.

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Для срока действия AMP порядок не имеет значения. Однако порядок тегов внутри заголовка может повлиять на производительность загрузки страницы. Рекомендуемый порядок для меток головы:

  1. meta charset, затем остальные meta теги.
  2. AMP runtime v0.js <script> (загрузка должна начаться как можно скорее, так как блокируется рендер).
  3. <script> теги для других расширений задержки рендеринга (amp-эксперимент, amp-dynamic-css-классы)
  4. <script> теги для оставшихся расширений (amp-bind, ...)
  5. <link> метка для favicon
  6. <style amp-custom>
  7. любые другие теги, разрешенные в <head>
  8. шаблон для усилителя, сначала style шаблон для усилителя, затем noscript. (установка шаблонной таблички позволяет избежать нестандартных стилей, случайно перекрывающих правила CSS)

Обратите внимание: это относится только к AMP, не обслуживаемым через Google AMP Cache , так как кэш переупорядочивает заголовок, следуя этим правилам в любом случае.

0 голосов
/ 04 мая 2018

Я не думаю, что имеет значение, в каком порядке вы их разместите. Если у вас есть проблемы, вы всегда можете запустить свой код через инструмент проверки AMP или бросить # development = 1 после вашего URL и проверить консоль в вашем браузере dev tools.

Примечание: после добавления # development = 1 может потребоваться дважды обновить страницу с открытыми инструментами разработчика, чтобы она отображала сообщение об успешном или неудачном завершении работы в консоли.

Я только что пытался установить amp-custom перед настройкой amp-шаблон в инструменте проверки AMP, а также amp-шаблон до появления amp-custom, и оба вернулись как действительные AMP.

Я знаю, что для веб-сайта нашей компании мы добавили его после amp-custom из-за того, что он определяет для нас так, чтобы он имел приоритет над любым другим стилем.

...