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:
