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>

为了演示此示例，我们创建了一些使用 amp-dynamic-css-classes 定义的 CSS 规则的辅助 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