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

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
如果有使用其他框架或是頁面較複雜,很可能會超過75kb,建議在放入AMP頁面前先進行壓縮。(先前為50kb)
可以使用線上壓縮 (例如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的方法 
文章關鍵字:AMP AMP教學 CSS 網頁技術

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播