amp-dynamic-css-classes

简介

AMP 由 amp-dynamic-css-class 提供的动态 CSS 类可以为少量条件启用布尔逻辑

设置

包含 amp-dynamic-css-classes 扩展组件。

<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>

为了本示例的目的，我们创建了一些辅助 CSS 类，它们使用 amp-dynamic-css-classes 定义的 CSS 规则。这使我们可以在下面的代码中更简洁地引用条件。

<style amp-custom>
  :root {
    --space-2: 1rem;   /* 16px */
  }
  body:not(.amp-referrer-pinterest-com) .if-pinterest,
  body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
  body:not(.amp-referrer-google-com) .if-google,
  body:not(.amp-referrer-twitter-com) .if-twitter,
  body:not(.amp-referrer-linkedin-com) .if-linkedin,
  body:not(.amp-referrer-localhost) .if-localhost {
    display: none;
  }
  body:not(.amp-viewer) .if-viewer,
  body.amp-viewer .if-not-viewer {
    display: none;
  }
  .dynamic-css {
    padding: var(--space-2);
  }
</style>

引荐来源

使用这些引荐来源类可以有条件地包含元素。您无需调用 amp-dynamic-css-classes 组件即可在 body 元素上初始化类。

您是从 Pinterest 引荐或嵌入到这里的！

您是从 Twitter 引荐或嵌入到这里的！

您是从 Google 引荐或嵌入到这里的！

您是直接来到这里的！很酷：)

<div class="if-pinterest dynamic-css">You were referred here or embedded by Pinterest!</div>
<div class="if-twitter dynamic-css">You were referred here or embedded by Twitter!</div>
<div class="if-google dynamic-css">You were referred here or embedded by Google!</div>
<div class="if-ampbyexample dynamic-css">You came here directly!  Cool :)</div>
<div class="if-localhost dynamic-css">You came here directly!  Cool :)</div>

查看器

“查看器”类允许您根据页面是否嵌入在 AMP 查看器中来设置样式。在 Google AMP 查看器上试用。请注意，这仅在移动设备或浏览器的移动模拟模式下有效。

嘿！您没有在 AMP 查看器的上下文中访问！

你好！因为您来自查看器。

<div class="if-not-viewer dynamic-css">Hey! You're not visiting within the context of an AMP Viewer!</div>
<div class="if-viewer dynamic-css">Ahoy! Since you're coming from a viewer.</div>

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系以讨论您的确切用例。

转到 Stack Overflow

无法解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您针对您特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

作者： @jmadler