AMP教學-使用CSS的注意事項

在AMP中CSS因快速載入有諸多規定，甚至在2018年8月以前是有限制html裡面不得有像"style="color:red;" 這類的行內css，幸好後來開放了這一塊，想要在html裡面微調一些東西就不一定要使用class修改。
本篇就css的規範加以說明並提供一些小技巧。

1.css只能崁入不能外連
只能把css放在<style amp-custom>....</style>裡面，不允許外部連結css。
但是自定義字體的css是允許連結的，例如下列的名單是可以連結進AMP頁面：

• Typography.com: https://cloud.typography.com
• Fonts.com: https://fast.fonts.net
• Google Fonts: https://fonts.googleapis.com
• Typekit: https://use.typekit.net
• Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com

字體的部分(@font-face)也允許在css裡面外連，例如:

<style amp-custom>
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://somedomain.org/VeraSeBd.ttf");
}

body {
font-family: "Bitstream Vera Serif Bold", serif;
}</style>

2. !important 不可以使用
為了AMP能夠有一致的元素規範，!important不能使用

3.請勿使用 -amp- 或i-amp 之類的class名稱
為避免混淆或是影響原本的amp標籤元件，應避免使用類似的名稱

4.限制css中的 transition和 @keyframes {...} 的動畫功能
僅能使用如 opacity，transform和-vendorPrefix-transform 這幾項，其他不可使用

5.css最大上限為75kb

可以使用線上壓縮 (例如https://csscompressor.com/ )或是自行產生壓縮檔案。


AMP網頁開發載入CSS的方法簡述:
當AMP頁面如果有許多頁，手動每一頁都複製貼上、修改CSS實在是太累人也不好維護了，尤其現在很多人也會使用預處理器(例如LESS、SASS)。如果在做網站初期已經有打算製作AMP頁面，建議可一同規劃進去。

方法1.-用pug格式(以前稱為jade)，編寫一個index.pug的檔案，將css連結放在body前面
例如:

style(amp-custom)
 include style.css

style(amp-custom)代表是原本的 <style amp-custom>...</style>，
include style.css 代表載入該css檔案位置
寫好後再轉譯成一般html即可。(可以用軟體轉譯，例如https://prepros.io/ ，或者用webpack)
編輯時如果想要隨時預覽可以利用MAMP或是google serve程式。

方法2-index必須寫成php格式
例如index.php ，此方法必須主機要支援php才行(但不用透過轉譯，直接寫進去就好)。
在 <style amp-custom>...</style> 裡面寫上這段(檔案位置自由變更)

<?php readfile( getcwd() . "/style.css"); ?>

兩個方式各有優缺點，如果想嘗試pug語法並且有使用預處理器的人可以試試；假如主機有支援php並且不想更改太多架構寫法的，可以用第二個方式

但如果今天是要將一個舊的網頁改為AMP網頁，可能上述兩個方式都不太適用，因為網頁可能本身開發時就不是使用pug或是php，維持html檔案的話只能自行將css載入貼上。
關於HTML改成AMP說明

參考:
AMP自定義字體
AMP的css
AMP Css上限
AMP中連結載入css的方法