amp-dynamic-css-classes

简介

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

设置

包含 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 撰写