What are Google AMP’s limitations with CSS, Javascript and HTML.
It is true that Google AMP will place strong restrictions on Javascript pages, but this does not apply as heavily on CSS. For those of you catching up, CSS stands for Cascading Style Sheets. CSS is a mechanism used to style webpages that are written in a markup language. These elements include everything from font, color, spacing, formatting and layout. The goal of Google AMP is not to make all sites look uniform in style, but to remove the functionalities of a webpage that slow it down. Google AMP still wants webpages to look as they were intended, and so styling is a very important component of this. In essence, the goal of the user is to practice good and clean CSS hygiene.
With that said, there will be certain limitations to certain styles, due to some performance indications. Here are a list of the CSS regulations:
Inline Style Attributes: Styles must be indicated in the header of the page using a custom AMP tag.
!important: It is important that Google AMP be able to enforce its sizing regulations on a webpage, and therefore usage of this is not allowed.
<link rel=“stylesheet”>: This is against policy with the exception of using custom fonts.
* (universal selector): The universal selector is banned as it can evade other selector restrictions.
:not(): This can be used to imitate selectors.
Pseudo-Selectors: These will have certain restrictions in Google AMP. Tag names must not start with amp-.
-amp- and -i-amp- tag names: These tags are reserved for internal use only.
behavior, -moz- binding: This is not supported by Google AMP.
Javascript is a computer language that is used to create webpages that often include interactive elements. This is not to be confused with Java. Java is a completely unrelated computer language used by developers to allow users to create applications on their computers. Javascript is what we are dealing with. Often times, Javascript is used to create elements like quizzes, polls, light boxes, embeds. Here are a list of Google AMP Javascript restrictions:
No developer or third-party Javascript.
No Javascript ads. To run an ad, Google AMP will load an iframe from a different origin and execute the ad inside a Javascript inside the iframe sandbox.
No Javascript analytics packages.
Within Google AMP there are also certain restrictions on HTML tags to ensure Google AMP best practices. AMP has created it’s own set of HTML tags called AMP HTML that replaces some of the limitations of HTML. Examples of restrictions include:
iframe
embed
object
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. READ MOREACCEPT
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are as essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.