I have read https://github.com/ampproject/amphtml/blob/master/docs/create_page.md about the usage of CSS, but am not sure what CSS selectors the format allows. Are there any restrictions on selectors/properties?
Can style declarations be placed anywhere in <html>
or only in <head>
?
Is it possible to include any external stylesheets?
From the Official AMP GitHub Documentation:
You may include 1 <style>
tag in the <head>
of the DOM. You must append amp-custom
to the <style>
tag like this: <style amp-custom>your style rules here</style>
You may not alter the margin
property on the body
element.
You may not load an external stylesheet or import one via @import
You may not add style attributes to elements.
You may not use the !important
qualifier.
You may never use any of the following properties:
behavior:
overflow: scroll
overflow: auto
transition:
filter
animation
-moz-binding
You may use the following selectors:
.class
e.g. .row
#id
e.g. #sidebar
tag-name
e.g. section
.row, .clearfix
or #sidebar, #main-body, article
@media (max-width:48em){}
You may use the following pseudo-selectors:
:hover
:active
:visited
You may not use any input
elements with the exception of button
(as these are used to interact with AMP Web Components).
You are obliged to avoid using class names prefixed with -amp
or -amp-
to avoid conflicting with AMP components. You can override the styles of these components if you wish.
Your style rules must not exceed 50KB.
You may acquire font assets either through a whitelisted font vendor (... Google Fonts) or by fetching the font through @font-face via HTTP/HTTPS — i.e. not via data:
or JavaScript plugin (since JS is banned).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With