Forum Moderators: martinibuster

Message Too Old, No Replies

Is it possible to inclide a stylesheet in an amp page?

         

virtualreality

12:36 am on Aug 13, 2016 (gmt 0)

10+ Year Member Top Contributors Of The Month



On this page - [ampproject.org...]
There is the following example:

<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>

When I try this it does not work. Is it possible to include a stylesheet in an AMP page?

keyplyr

1:23 am on Aug 13, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Create a test amp page and call the CSS from the head section (don't use an include.) If that works, then it's just a matter of implementation.

Note: This discussion would probably get more attention if posted in the AMP forum:
[webmasterworld.com...]

or the CSS forum:
[webmasterworld.com...]

tangor

5:33 am on Aug 13, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm not doing AMP, but you made me look at what is allowed and what is not. This from the AMP markups allowed found at GitHub:

Stylesheets

Major semantic tags and the AMP custom elements come with default styles to make authoring a responsive document reasonably easy. An option to opt out of default styles may be added in the future.

[github.com...]

Sounds like (and what I expected) that AMP is extremely limited in fudge factors (make it unique and artsy) and relies on boilerplate AMP specific CSS, js, and just about anything else that veers from a very STRICT interpretation of static HTML pages.

If I read it correctly, the HEAD section is pretty limited in what is allowed.

That said (ignoring the art aspect0 this is a good thing from a tech delivery point of view. if everything looks and acts exactly the same using minimal tools, the bloat and time to deliver is radically reduced.

The takeaway is your page will look no different than all the other Amp pages being served to mobile.

A template with no character growth possibilities, but one that will deliver (usually) a consistent and relatively fast processing and delivery experience.

I suspect the answer is "no". :(

keyplyr

9:13 am on Aug 13, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Good sherlocking tangor

james007

10:22 am on Aug 14, 2016 (gmt 0)

10+ Year Member Top Contributors Of The Month



Um - just as an aside, this advice is bogus.

You can put a full (if small) stylesheet in your AMP pages. No, it doesn't demand that you use boilerplate stuff at all. You cannot "call the CSS", it has to be inline.

My personal website is entirely in AMP; the website I run has AMP for its news pages. Both are running very different looks/feels. There's absolutely no similarity between them, and other AMP pages.

AMP is remarkably good for this kind of thing.

keyplyr

11:09 am on Aug 14, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




The github page referenced above does state "Inline CSS variables" can be used.

james007

12:28 pm on Aug 14, 2016 (gmt 0)

10+ Year Member Top Contributors Of The Month



To be clear, an inline stylesheet can be used.

(That's, of course, different from inline variables).