Supported CSS
AMP for Email specifies additional CSS constraints which are described in
AMP for Email Supported CSS.
Like all web pages, AMP pages are styled with CSS, but you can’t reference external stylesheets (with the exception of custom fonts). Also certain styles are disallowed due to performance implications.
Styles may live in the head of the document or as inline style attributes
(see Add styles to a page).
But you can use CSS preprocessors and templating to build static pages
to better manage your content.
NOTE – AMP components come with default styles to make authoring responsive pages reasonably easy. These styles are defined in the
amp.css. Disallowed styles
The following styles aren’t allowed in AMP pages:
| Banned style | Description |
|---|---|
!important qualifier | Use and reference to !important is not allowed. This is a necessary requirement to enable AMP to enforce its element sizing rules. |
<link rel=”stylesheet”> | Disallowed with the exception of custom fonts. |
i-amphtml- class and i-amphtml- tag names. | The validator disallows class and tags names with the following regex `(^|\W)i-amphtml-`. These are reserved for internal use by the AMP framework. It follows, that the user's stylesheet may not reference CSS selectors for i-amphtml- classes and tags. |
Performance recommendations
These allowed styles should restrict values to the following for an optimal performance:
| Restricted style | Description |
|---|---|
transition property | Only GPU-accelerated properties (currently opacity, transform and -vendorPrefix-transform). |
-
with contributions from @pbakaus , @CrystalOnScript , @bpaduch , @choumx