Chỉnh sửa bố cục và hiển thị trên trang AMP
Các trang AMP bản chất vẫn là các trang web chỉ khác là được cấu hình hiển thị dành riêng cho mobile; mọi kiểu dáng cho trang và các thành phần của nó được thực hiện bằng các thuộc tính CSS. Các phần tử sử dụng các class or element selectors được nhúng trong cặp thẻ <head>. Được khai báo nằm trong cặp thẻ <style amp-custom>:
Khai báo CSS nhúng trong trang AMP
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Mỗi trang AMP bạn chỉ có thể nhúng 1 lần cặp thẻ <style amp-custom>, Tuy nhiên không phải phần tử CSS nào bạn nhúng vào cũng được sử dụng và hợp lệ trong trang AMP.
Các thuộc tính css không được phép sử dụng trong trang AMP
| Style bị cấm | Mô tả |
|---|---|
!important bị loại bỏ |
Sử dụng và tham chiếu bởi !important là không được phép. Đây là một yêu cầu quan trọng trong tính hợp lệ của trang AMP. Vì khi sử dụng thuộc tính này sẽ ảnh hưởng đến thuộc tính định kicsk thước phần tử của trang AMP được google quy định. |
<link rel=”stylesheet”> |
Không được phép sử dụng ngoại trừ dùng cho font chữ tùy chỉnh
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet"> |
Lớp hoặc thẻ có chứ cum-amp- và i-amp- |
Tên lớp, trong phần CSS mà bạn chỉnh sửa không được bắt đầu bằng-amp-. Chúng được sử dụng riêng trong thời gian chạy của AMP.Theo sau, Các khai báo css khác của người dùng cũng không được tham chiếu tới các phần tử lớp -amp và thẻ i-amp. |
Khuyến nghị tăng hiệu xuất cho trang AMP
còn nữa…………………