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