System układu AMPHTML

Omówienie

Głównym celem systemu układu jest zapewnienie elementom AMP możliwości wyrażania swojego układu w sposób umożliwiający środowisku uruchomieniowemu wywnioskowanie rozmiaru elementów przed wykonaniem wywołań jakichkolwiek zasobów zdalnych, takich jak JavaScript i dane. Jest to o tyle istotne, że znacznie ogranicza to pauzy renderowania i przewijania.

Biorąc to pod uwagę, system układu AMP zaprojektowano w taki sposób, aby obsługiwanych było niewiele, ale elastycznych układów, gwarantujących dobrą wydajność. System ten, aby wyrażać potrzeby związane z układem i rozmiarami elementu, opiera się na zestawie atrybutów takich jak layout, width, height, size i heights.

Sposób działania

Element AMP nie będący kontenerem (tj. layout != container) uruchamiany jest w trybie nierozwiązanym/niewbudowanym, w którym wszystkie jego elementy podrzędne są ukryte z wyjątkiem elementu zastępczego (patrz atrybut placeholder). JavaScript i ładunek danych niezbędny do pełnego skonstruowania elementu może być nadal pobierany i inicjowany, ale środowisko uruchomieniowe AMP wie już, jak dobrać rozmiar i ułożyć element jedynie przy użyciu klas CSS i atrybutów layout, width, height i media. W większości przypadków atrybut placeholder, jeśli jest określony, ma określone wymiary i umiejscowienie takie, aby zajęte zostało całe miejsce elementu.

Element zastępczy, wskazany za pomocą atrybutu placeholder jest ukrywany, gdy tylko zostanie utworzony element i jego pierwszy układ. W tym momencie oczekuje się, że wszystkie jego elementy podrzędne zostaną odpowiednio utworzone, ustawione i będą gotowe do wyświetlenia oraz do akceptowania danych wprowadzanych przez czytelnika. Jest to domyślny sposób działania. Każdy element może go zastąpić, np. szybciej ukryć element zastępczy, wskazany za pomocą atrybutu placeholder lub wyświetlać go dłużej.

Element jest wymiarowany i wyświetlany przez środowisko uruchomieniowe na podstawie atrybutów layout, width, height i media. Wszystkie reguły układu są implementowane wewnętrznie za pomocą CSS. Mówi się, że element „definiuje rozmiar”, jeśli jego rozmiar jest określany za pomocą stylów CSS i nie zmieniają go elementy podrzędne: dostępne natychmiast lub wstawiane dynamicznie. Nie znaczy to, że rozmiar tego elementu nie może się zmienić. Układ może być w pełni responsywny, jak w przypadku układów responsive, fixed-height, fill i flex-item. Znaczy to po prostu, że rozmiar nie zmienia się bez jawnego działania użytkownika, np. podczas renderowania, przewijania lub pobierania postu.

Jeżeli element został nieprawidłowo skonfigurowany, to w trybie PROD w ogóle nie zostanie wyrenderowany, a w trybie DEV środowisko uruchomieniowe wyrendekuje element w stanie błędu. Możliwe błędy obejmują nieprawidłowe lub nieobsługiwane wartości atrybutów layout, width i height.

Atrybuty układu

width i height

W zależności od wartości atrybutu layout, elementy składnika AMP muszą mieć atrybuty width i height, zawierające wartość liczby całkowitej pikseli. Rzeczywisty sposób działania układu jest określony przez atrybut layout, jak opisano poniżej.

W kilku przypadkach, jeśli atrybuty width lub height nie są określone, środowisko uruchomieniowe AMP może domyślnie ustawić następujące ich wartości:

• amp-pixel: zarówno szerokość jak i wysokość są domyślnie ustawiane na 0.
• amp-audio: domyślna szerokość i wysokość są podawane z przeglądarki.

layout

AMP zapewnia zestaw układów, które określają sposób działania składnika AMP w układzie dokumentu. Można określić układ składnika poprzez dodanie atrybutu layout z jedną z wartości podanych w poniższej tabeli.

Przykład: prosty, responsywny obraz, w którym atrybuty width i height są używane do określenia współczynnika proporcji.

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

> </amp-img>
> 

Obsługiwane wartości atrybutu layout:

sizes

Wszystkie elementy AMP, które obsługują układ responsive, obsługują także atrybut sizes. Wartość tego atrybutu jest wyrażeniem rozmiaru opisanym w atrybucie img sizes, ale rozszerzonym na wszystkie elementy, nie tylko obrazy. W skrócie, atrybut size opisuje sposób obliczania szerokości elementu w zależności od warunków mediów.

Gdy atrybut sizes jest określony wraz z atrybutami width i height, ustawiana jest domyślna wartość atrybutu layout, responsive.

Przykład: użycie atrybutu sizes

W poniższym przykładzie, jeśli okienko na ekranie jest szersze niż 320px, obraz będzie miał szerokość 320px, w przeciwnym razie będzie miał szerokość 100vw (100% szerokości okienka na ekranie).

<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

Atrybut sizes ustawi samodzielnie na elemencie styl inline width. Podczas parowania atrybutu disable-inline-width z atrybutem sizes element AMP będzie propagować wartość atrybutu sizes do podstawowego znacznika elementu, jak w przypadku elementu img zagnieżdżonego w elemencie amp-img, bez ustawiania atrybutu width inline, co atrybut sizes zazwyczaj robi samodzielnie w AMP.

Przykład: użycie atrybutu disable-inline-width

W poniższym przykładzie szerokość elementu <amp-img> nie jest zmieniana, a atrybut sizes jest używany tylko do wybrania jednego ze źródeł z 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

Wszystkie elementy AMP, które obsługują układ responsive, obsługują także atrybut heights. Wartość tego atrybutu jest wyrażeniem sizes bazującym na wyrażeniach media, podobnym do atrybutu sizes w znacznikach img, ale z dwoma kluczowymi różnicami:

1. Wartość dotyczy wysokości, a nie szerokości elementu.
2. Dozwolone są wartości procentowe, np. 86%. Jeśli użyta zostanie wartość procentowa, wskazuje ona procent szerokości elementu.

Gdy atrybut heights jest określony wraz z atrybutami width i height, ustawiana jest domyślna wartość atrybutu layout, responsive.

Przykład: użycie atrybutu heights

W poniższym przykładzie wysokość obrazu będzie domyślnie wynosiła 80% szerokości, ale jeśli okienko na ekranie ma szerokość większą niż 500px, wysokość jest ograniczona do 200px. Jako że atrybut heights jest określony wraz z atrybutami width i height, domyślnie ustawiany jest układ responsive.

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

> </amp-img>
> 

media

Większość elementów AMP obsługuje atrybut media. Wartość atrybutu media to zapytanie o media. Jeśli zapytanie nie zwraca dopasowania, element nie jest renderowany, a jego zasoby i potencjalnie zasoby podrzędne nie są pobierane. Jeśli okno przeglądarki zmieni rozmiar lub orientację, zapytania o media są ponownie oceniane, a elementy są ukrywane i wyświetlane na podstawie nowych wyników.

Przykład: użycie atrybutu media

W poniższym przykładzie mamy 2 obrazy z wzajemnie wykluczającymi się zapytaniami o media. W zależności od szerokości ekranu zostanie pobrany i wyrenderowany jeden z tych dwóch obrazów. Atrybut media jest dostępny na wszystkich elementach AMP, więc może być używany z elementami innymi niż obrazy, takimi jak reklamy.

<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

Atrybut placeholder można ustawić w dowolnym elemencie HTML, nie tylko elementach AMP. Atrybut placeholder wskazuje, że element oznaczony tym atrybutem działa jako element zastępczy nadrzędnego elementu AMP. Atrybut ten można umieścić w dowolnym elemencie HTML, który jest bezpośrednim elementem podrzędnym elementu AMP. Domyślnie elementy zastępcze elementu AMP są wyświetlane natychmiast, nawet jeśli zasoby elementu AMP nie zostały pobrane lub zainicjowane. Gdy element AMP jest już gotowy, zazwyczaj ukrywa elementy zastępcze i pokazuje swoją zawartość. Dokładny sposób działania elementu zastępczego zależy od implementacji elementu. AMP

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

fallback

Atrybut fallback można ustawić w dowolnym elemencie HTML, nie tylko elementach AMP. Fallback jest konwencją, która pozwala na poinformowanie czytelnika, że dany element nie jest obsługiwany przez przeglądarkę. Jeśli jest określony, element fallback musi być bezpośrednim elementem podrzędnym elementu AMP. Dokładny sposób działania elementu fallback zależy od implementacji elementu AMP.

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

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

noloading

Atrybut noloading wskazuje, czy „wskaźnik ładowania” danego elementu ma być wyłączony. Wiele elementów AMP może pokazywać „wskaźnik ładowania”, czyli prostą animację pokazującą, że element nie został jeszcze w pełni załadowany. Dodanie tego atrybutu powoduje wyłączenie tego sposobu działania elementów.

(tl;dr) Podsumowanie wymagań i sposobów działania dotyczących układu

Poniższa tabela przedstawia dopuszczalne parametry, klasy CSS oraz style używane w przypadku atrybutu layout. Należy pamiętać, że:

1. Każda klasa CSS z prefiksem -amp- oraz elementy z prefiksem i-amp- są uważane za wewnętrzne elementy AMP i ich użycie w arkuszach stylów użytkownika jest niedozwolone. Są one pokazane tutaj jedynie w celach informacyjnych.
2. Mimo że atrybuty width i height są określone w tabeli zgodnie z wymaganiami, mogą mieć zastosowanie reguły domyślne, tak jak w przypadku składników amp-pixel i amp-audio.