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