Instrucciones amp-dynamic-css-classes


amp-dynamic-css-classes


Las clases CSS dinámicas de AMP proporcionadas por la etiqueta de la clase amp-dynamic-css-classes permiten la lógica booleana para un puñado de condiciones

Agregar

Inserte el componente amp-dynamic-css-classes justo después de la apertura <head>


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

Para el propósito de este ejemplo, sea ha creado algunas clases CSS auxiliares que usan las reglas CSS definidas por amp-dynamic-css-classes. Éstos nos permiten referirnos más sucintamente a las condiciones en nuestro código abajo.


<style amp-custom>
  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-localhost) .if-localhost {
    display: none;
  }
  body:not(.amp-viewer) .if-viewer,
  body.amp-viewer .if-not-viewer {
    display: none;
  }
</style>

No es necesario incluir una llamada al componente amp-dynamic-css-classes para inicializar las clases en el elemento body

Remitente

El uso de estas clases de referencia puede permitirle incluir elementos condicionalmente.


Ejemplo



  You were referred here or embedded by Pinterest! I'll add a few extra "Pin It" buttons
  You were referred here or embedded by Twitter! I'll add a few extra Tweet buttons
  You were referred here or embedded by Google! I'll add a few extra Google+ buttons
  You came here directly! Cool :)
  You came here directly! Cool :)

  
  
  
  


  <span class="if-pinterest">You were referred here or embedded by Pinterest! I'll add a few extra "Pin It" buttons</span>
  <span class="if-twitter">You were referred here or embedded by Twitter! I'll add a few extra Tweet buttons</span>
  <span class="if-google">You were referred here or embedded by Google! I'll add a few extra Google+ buttons</span>
  <span class="if-ampbyexample">You came here directly! Cool :)</span>
  <span class="if-localhost">You came here directly! Cool :)</span>

  <amp-social-share type="email"
    layout="fixed"
    height="30"
    width="30"></amp-social-share>
  <amp-social-share type="twitter"
    layout="fixed"
    height="30"
    width="30"
    class="if-twitter"></amp-social-share>
  <amp-social-share type="pinterest"
    layout="fixed"
    height="30"
    width="30"
    class="if-pinterest"></amp-social-share>
  <amp-social-share type="linkedin"
    layout="fixed"
    height="30"
    width="30"
    class="if-linkedin"></amp-social-share>

Viewer

Las clases 'viewer' permiten probarlo en el visor de Google AMP:


Ejemplo



  Hey! You're not visiting within the context of an AMP Viewer!
  Ahoy! Since you're coming from a viewer, I'll reorder my social share buttons to prefer the one you prefer. Hope you like 'em!


  <span class="if-not-viewer">Hey! You're not visiting within the context of an AMP Viewer!</span>
  <span class="if-viewer">Ahoy! Since you're coming from a viewer, I'll reorder my social share buttons to prefer the one you prefer. Hope you like 'em!</span>



Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: