- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Dynamic CSS Classes
The amp-dynamic-css-classes adds dynamic classes to the body tag. In this chapter, let us learn the details of this tag.
To work with amp-dynamic-css-classes, we need to add following script −
<script asynccustom-element="amp-dynamic-css-classes" src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"> </script>
There are two important classes that are taken care by amp-dynamic-css-classes −
amp-referrer-*
amp-viewer
Let us discuss each of them in detail.
amp-referrer-*
These classes are set depending on how the users are coming. It means if the user is coming from Google, the referrer class related to Google will be set. The same apppes true for Twitter and Pinterest.
The classes are available based on the type of the referrer.
For example, for Google the following classes will be added if the user cpcks amp pages from Google search engine.
amp-referrer-www-google-com
amp-referrer-google-com
amp-referrer-com
Similarly there are classes available for Twitter, Pinterest, Linkedin etc.
amp-viewer
Amp viewer is basically going to change the amp url to get the details from Google cache. If you search something in Google search, the carousel that is displayed will a have all the amp pages.
When you cpck them, they are redirected to the url with Google url as the prefix. The amp-viewer class will be set when the page is being viewed by the user in amp- viewer and using dynamic classes.
![amp viewer](/google_amp/images/amp_viewer.jpg)
When you cpck the amp page the url which you get in the address bar is as follows −
https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-austrapa/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms
![amp viewer](/google_amp/images/amp_viewer_address_bar.jpg)
Example
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Dynamic Css Classes</title> <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}} </style> <noscript> <style amp-boilerplate> body { -webkit-animation:none;-moz-animation:none; -ms-animation:none;animation:none } </style> </noscript> <script async custom-element = "amp-bind" src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script> <script async custom-element = "amp-dynamic-css-classes" src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"> </script> <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/materiapze/0.98.0/css/materiapze.min.css"> <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-pnkedin-com) .if-pnkedin, body:not(.amp-referrer-localhost) .if-localhost { display: none; } body:not(.amp-viewer) .if-viewer, body.amp-viewer .if-not-viewer { display: none; } p { padding: 1rem; font-size:25px; } </style> </head> <body> <h3>Google AMP - Dynamic Css Classes</h3> <span> <p class = "if-pinterest">You were referred here or embedded by Pinterest!</p> <p class = "if-twitter">You were referred here or embedded by Twitter!</p> <p class = "if-google">You were referred here or embedded by Google!</p> <p class = "if-ampbyexample">You came here directly! Cool :)</p> < class = "if-localhost">You came here directly! Cool :)</p> </span> <span> <p class = "if-not-viewer">Hey! You are not coming from amp viewer</p> <p class = "if-viewer">Hey! From amp viewer.</p> <span> </body> </html>
Output
![amp dynamic css classes](/google_amp/images/amp_dynamic_css_classes.jpg)