Hệ thống Bố cục AMPHTML

Tổng quan

Mục đích chính của hệ thống bố cục là đảm bảo các yếu tố AMP có thể diễn đạt bố cục của chúng để thời gian chạy có thể suy diễn kích thước của các yếu tố trước khi các tài nguyên từ xa như JavaScript và cuộc gọi dữ liệu được hoàn tất. Điều này quan trọng bởi nó giúp giảm đáng kể thời gian render và tình trạng giật khi cuộn.

Xét đến điều này, Hệ thống Bố cục AMP được thiết kế để hỗ trợ một số ít bố cục linh hoạt giúp đảm bảo hiệu năng tốt. Hệ thống này phụ thuộc vào một nhóm các thuộc tính như layout (bố cục), width (chiều rộng), height (chiều cao), sizes (kích thước) và heights (chiều cao) để diễn đạt nhu cầu về bố cục và kích thước của yếu tố.

Hành vi

Một yếu tố AMP ngoài container (ví dụ, layout != container) sẽ khởi động trong chế độ chưa diễn giải/chưa xây dựng trong đó tất cả các con của nó đều bị ẩn ngoại trừ một mã giữ chỗ (xem thuộc tính placeholder (mã giữ chỗ)). JavaScript và trọng tải dữ liệu cần để xây dựng toàn bộ yếu tố vẫn có thể đang tải về và khởi động, nhưng thời gian chạy AMP đã biết làm thế nào để chia kích thước và bố cục cho yếu tố mà chỉ dựa vào các lớp CSS và các thuộc tính layout (bố cục), width (chiều rộng), height (chiều cao) và media (đa phương tiện). Trong hầu hết các trường hợp, một placeholder (mã giữ chỗ), nếu được quy định, sẽ được đổi kích thước và vị trí để tận dụng toàn bộ không gian của yếu tố.

Placeholder (mã giữ chỗ) sẽ được ẩn ngay khi yếu tố được xây dựng và bố cục đầu tiên của nó hoàn tất. Ở thời điểm này, yếu tố này được kỳ vọng là đã xây dựng và định vị các con của nó đúng cách để sẵn sàng được hiển thị và chấp nhận đầu vào của một độc giả. Đây là hành vi mặc định. Mỗi yếu tố có thể ghi đè lên, ví dụ như, ẩn placeholder (mã giữ chỗ) nhanh hơn hoặc giữ nó lâu hơn.

Yếu tố này được đổi kích thước và hiển thị dựa trên các thuộc tính layout (bố cục), width (chiều rộng), height (chiều cao) và media (đa phương tiện) theo thời gian chạy. Tất cả các quy tắc bố cục đều được triển khai thông qua CSS nội bộ. Yếu tố này được cho là "định nghĩa kích thước" nếu kích thước của nó có thể được suy diễn từ phong cách CSS và không thay đổi dựa trên các con của nó: khả dụng ngay lập tức hoặc được chèn động. Điều này không có nghĩa kích thước của yếu tố này không thể được thay đổi. Bố cục có thể được tương thích hoàn toàn như với các bố cục responsive (tương thích), fixed-height (chiều cao cố định), fill (lấp đầy) và flex-item (linh hoạt). Nó chỉ có nghĩa là kích thước không thay đổi nếu không được người dùng tương tác rõ ràng, ví dụ như trong quá trình render hoặc cuộn, hoặc sau khi tải về.

Nếu yếu tố được cấu hình sai cách, nó sẽ hoàn toàn không được render trong PROD, và trong chế độ DEV, thời gian chạy sẽ render yếu tố này trong trạng thái lỗi. Các lỗi tiềm năng bao gồm giá trị không hợp lệ hoặc không được hỗ trợ của các thuộc tính layout (bố cục), width (chiều rộng) và height (chiều cao).

Thuộc tính Bố cục

width và height

Tùy thuộc vào giá trị của thuộc tính layout (bố cục), các yếu tố thành phần AMP phải có một thuộc tính width (chiều rộng) và height (chiều cao) chứa một giá trị điểm ảnh là số nguyên. Hành vi bố cục thực tế được xác định bởi thuộc tính layout (bố cục) như được mô tả dưới đây.

Trong một số trường hợp, nếu width (chiều rộng) hoặc height (chiều cao) không được quy định, thời gian chạy AMP có thể gán mặc định cho các giá trị này như sau:

• amp-pixel: Cả width (chiều rộng) và height (chiều cao) đều được đặt mặc định là 0.
• amp-audio: width (chiều rộng) và height (chiều cao) mặc định được suy diễn từ trình duyệt.

layout

AMP cung cấp một nhóm bố cục quy định hoạt động của một thành phần AMP trong bố cục tài liệu. Bạn có thể quy định một bố cục cho một thành phần bằng cách bổ sung thuộc tính layout (bố cục) với một trong các giá trị bố cục được quy định trong bảng dưới đây.

Ví dụ: Một ảnh tương thích đơn giản, ở đó chiều rộng và chiều cao được sử dụng để xác định tỷ lệ khung hình.

<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"

> </amp-img>
> 

Các giá trị được hỗ trợ cho thuộc tính layout (bố cục):

sizes

Mọi yếu tố AMP hỗ trợ bố cục responsive (tương thích) cũng đều hỗ trợ thuộc tính sizes (kích cỡ). Giá trị của thuộc tính này là biểu thức sizes (kích cỡ) như được mô tả trong img sizes, nhưng được mở rộng cho mọi yếu tố, không chỉ là ảnh. Nói một cách ngắn gọn, thuộc tính sizes (kích thước) mô tả cách chiều rộng của yếu tố được tính dựa trên các điều kiện đa phương tiện.

Khi thuộc tính sizes (kích thước) được quy định với width (chiều rộng) và height (chiều cao), layout (bố cục) sẽ được đặt mặc định là responsive (tương thích).

Ví dụ: Sử dụng thuộc tính sizes (kích thước)

Trong ví dụ sau, nếu màn hiển thị rộng hơn 320px, ảnh sẽ rộng 320px, nếu không, nó sẽ rộng 100vw (100% chiều rộng màn hiển thị).

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"

> </amp-img>
> 

disable-inline-width

Thuộc tính sizes (kích thước) đứng riêng sẽ thiết lập một phong cách width (chiều rộng) inline cho yếu tố này. Khi kết hợp disable-inline-width với sizes, yếu tố AMP sẽ nhân rộng giá trị của sizes (kích thước) đến thẻ cơ sở của yếu tố, cũng giống img được lồng trong một amp-img, mà không thiết lập width inline như sizes thường làm khi đứng riêng trong AMP.

Ví dụ: Sử dụng thuộc tính disable-inline-width

Trong ví dụ sau, chiều rộng của yếu tố <amp-img> không bị ảnh hưởng, và sizes (kích thước) chỉ được sử dụng để chọn một nguồn từ srcset.

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"
disable-inline-width

> </amp-img>
> 

heights

Mọi yếu tố AMP hỗ trợ bố cục responsive (tương thích) cũng đều hỗ trợ thuộc tính heights (chiều cao). Giá trị của thuộc tính này là biểu thức sizes (kích cỡ) dựa trên biểu thức đa phương tiện tương tự với thuộc tính img sizes, nhưng với 2 điểm khác biệt chính:

1. Giá trị này được áp dụng cho chiều cao, chứ không phải là chiều rộng của yếu tố.
2. Nó cho phép giá trị phần trăm, ví dụ như 86%. Nếu giá trị phần trăm được sử dụng, nó sẽ chỉ báo phần trăm chiều rộng của yếu tố.

Khi thuộc tính heights (chiều cao) được quy định với width (chiều rộng) và height (chiều cao), layout (bố cục) sẽ được đặt mặc định là responsive (tương thích).

Ví dụ: Sử dụng thuộc tính height (chiều cao)

Trong ví dụ sau, chiều cao của ảnh sẽ được đặt mặc định là 80% chiều rộng, nhưng nếu màn hiển thị rộng hơn 500px, chiều cao sẽ được giới hạn ở 200px. Bởi thuộc tính heights (chiều cao) được quy định với width (chiều rộng) và height (chiều cao), bố cục sẽ được đặt mặc định là responsive (tương thích).

<amp-img
src="https://acme.org/image1.png"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"

> </amp-img>
> 

media

Hầu hết các yếu tố đều hỗ trợ thuộc tính media (đa phương tiện). Giá trị của media là một truy vấn đa phương tiện. Nếu truy vấn không khớp, yếu tố này sẽ hoàn toàn không được render và các tài nguyên và có thể là tài nguyên con của nó sẽ không được truy xuất. Nếu cửa sổ trình duyệt thay đổi kích cỡ hoặc hướng, các truy vấn đa phương tiện sẽ được tái đánh giá và các yếu tố được ẩn và hiển thị dựa trên kết quả mới.

Ví dụ: Sử dụng thuộc tính media (đa phương tiện)

Trong ví dụ sau đây, chúng ta có 2 ảnh với các truy vấn đa phương tiện loại trừ lẫn nhau. Tùy thuộc vào chiều rộng màn hình, một trong hai ảnh sẽ được truy xuất và render. Thuộc tính media (đa phương tiện) khả dụng trên tất cả các yếu tố AMP, vậy nên nó có thể được sử dụng với các yếu tố không phải ảnh, ví dụ như quảng cáo.

<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width="466"
height="355"
layout="responsive"

> </amp-img>
> <amp-img
>   media="(max-width: 649px)"
>   src="narrow.jpg"
>   width="527"
>   height="193"
>   layout="responsive"
> </amp-img>
> 

placeholder

Thuộc tính placeholder (mã giữ chỗ) có thể được thiết lập trên mọi yếu tố HTML, không chỉ các yếu tố AMP. Thuộc tính placeholder (mã giữ chỗ) cho thấy yếu tố được đánh dấu với thuộc tính này sẽ hoạt động như mã giữ chỗ cho yếu tố AMP cha. Nếu được quy định, một yếu tố placeholder (mã giữ chỗ) phải là một con trực tiếp của yếu tố AMP. Theo mặc định, mã giữ chỗ sẽ được hiển thị ngay lập tức cho yếu tố AMP, kể cả khi tài nguyên của yếu tố AMP chưa được tải về hoặc bắt đầu. Sau khi đã sẵn sàng, yếu tố AMP thường sẽ ẩn mã giữ chỗ của nó và hiển thị nội dung. Hành vi chính xác liên quan đến mã giữ chỗ này phụ thuộc vào việc triển khai của yếu tố.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

fallback

Thuộc tính fallback (phương án dự phòng) có thể được thiết lập trên mọi yếu tố HTML, không chỉ các yếu tố AMP. Phương án dự phòng là một quy ước cho phép yếu tố giao tiếp với độc giả rằng trình duyệt không hỗ trợ yếu tố. Nếu được quy định, một yếu tố fallback (phương án dự phòng) phải là một con trực tiếp của yếu tố AMP. Hành vi chính xác liên quan đến phương án dự phòng này phụ thuộc vào việc triển khai của yếu tố.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">

  <div fallback>Cannot play animated images on this device.</div>
</amp-anim>

noloading

Thuộc tính noloading (không tải) chỉ báo khi nào thì "chỉ báo tải" nên được tắt cho yếu tố này. Rất nhiều yếu tố AMP được cho phép hiển thị một "chỉ báo tải", vốn là một hình hoạt họa cơ bản cho thấy rằng yếu tố này chưa được tải đầy đủ. Các yếu tố có thể bỏ hành vi này bằng cách thêm thuộc tính này.

(tl;dr) Tóm tắt Yêu cầu & Hành vi của Bố cục

Bảng sau đây mô tả các tham số được chấp nhận, lớp CSS và phong cách được sử dụng cho thuộc tính layout (bố cục). Lưu ý rằng:

1. Mọi lớp CSS có tiền tố -amp- và các yếu tố có tiền tố i-amp- đều được coi là nội bộ đối với AMP và việc sử dụng của chúng trong các stylesheet người dùng là không được cho phép. Chúng chỉ được hiển thị ở đây vì mục đích thông tin.
2. Tuy width (chiều rộng) và height (chiều cao) được quy định trong bảng này như cần thiết, các quy tắc mặc định có thể áp dụng như trường hợp của amp-pixel và amp-audio.