3

I am converting my HTML page into AMP Pages. I have seen test url https://validator.ampproject.org/#. This page is validate from AMP.

Screen Shot for Help: enter image description here

But When I used External Css. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

Then It will fail.

Screen Shot For help. enter image description here

Then how can I access materialize css file. Because I am using Materialize Ui framework in my website.

But I have read also about

 <style amp-custom> </style>

SO AMP validate page suggest include inline css in amp-custom. But materialize css is so long. It will break in some mobile browsers. Because https://github.com/ampproject/amphtml/issues/4555

If anybody have some idea then please share.

Francesco Gallo
  • 77
  • 9
Varun Sharma
  • 4,632
  • 13
  • 49
  • 103
  • This doesn't appear to have anything to do with AMP. `{% %}` is some syntax that is used by several template engines. You haven't told us which one you are using, how you are running it, or what the output from it is. – Quentin Feb 13 '17 at 09:57
  • @Quetine. I am not using any template.{%include " /main.min.css"%}file but not using any refrence like href. – Varun Sharma Feb 13 '17 at 10:01
  • @Quentine. I want only load external css file through – Varun Sharma Feb 13 '17 at 10:03
  • (1) That isn't how you spell my handle. It's on the screen in front of you and Stackoverflow does tab completion. (2) *I am not using any template* — What do you think is processing `{% %}` then? (3) *external css file through ` – Quentin Feb 13 '17 at 10:05
  • Hi @Quentin. I am also finding the discovery of that css include a little confusing. In looking at the example I can't see a template being used so what processor would make this work? Until now I have been using the inline styles as instructed but if there is a method to use an include, even if it renders inline css on serving the page that would be preferrable. – K7Buoy Feb 14 '17 at 09:27
  • @K7Buoy — There are lots of template engines that can use that syntax. – Quentin Feb 14 '17 at 09:33

2 Answers2

8

External Style Stylesheets are forbidden in AMP. You must include the CSS declaration self (up to 10.000 lines) between. This is for save time by additional network request and blocking rendering.

<style amp-custom>
...
</style>
Lovntola
  • 1,409
  • 10
  • 31
  • But it is not working in all mobile devices and browsers. It is breaking in some browsers.Page is not rendered properly, Like ugly page render(some text of css) – Varun Sharma Feb 13 '17 at 13:02
  • if you are aware with Opera browser, Then It will not work. – Varun Sharma Feb 13 '17 at 13:03
  • Try – Lovntola Feb 13 '17 at 13:17
  • There is no differend if you load a external Stylesheet or include in the HTML. And external stylsheet are forbidden in AMP. – Lovntola Feb 17 '17 at 08:49
  • SOOOORY, i see now the include, i was by link. SORRY. – Lovntola Feb 17 '17 at 08:52
  • Maybe you have relative links to Url in your css. Before the path was /asset/css now is the path, the path from your html document. Keep care that you use absolute URLs in you css. – Lovntola Feb 17 '17 at 08:54
  • thanks. But Path is correct, Dont worry. But I cant understand, Why my question is devoted and closed. I am asking very good concept. Because this concept very important in web. – Varun Sharma Feb 17 '17 at 09:28
  • i goolled your site. Do you sure you validate the AMP Version of your site. here is no amp rel link. Can you post yor AMP site? – Lovntola Feb 17 '17 at 09:42
  • Right now I am implementing. If you want then you can see my beta.winni.in/cake-delivery-in-bangalore link. But this link is not permanent.This is testing server. – Varun Sharma Feb 17 '17 at 11:31
  • Yeap that what the error say:You have the link to the Stylesheet. Thats not permited. You MUST put the CSS code self between the . And you must remove all Javascripts. Here is a sample of my site: http://www.usa-reisetipps.net/?html-amp=1 you add the ?html-amp=1 on all my site to see the AMP Version. I hope you understand that AMP is not convert HTML to AMP. It is a own alternate small mobil Website. – Lovntola Feb 17 '17 at 11:53
  • Try: – Lovntola Feb 17 '17 at 12:01
  • Thank your effort. But I am not using php – Varun Sharma Feb 17 '17 at 12:18
  • is solution is got @Lovntola I am sticking here – Yasar Arafath May 17 '17 at 13:39
0

currently there is no support for external css in Accelerated mobile pages. Although you can use inline css which was not allowed earlier. So you have to compromise with the css.

Manish
  • 11
  • 3