AMP

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:

Wartość Sposób działania i wymagania
Nieobecna Jeśli nie podano żadnej wartości, układ danego składnika jest określany w następujący sposób:
  • Jeśli atrybut height jest obecny, a brakuje atrybutu width lub ma on ustawienie auto, przyjmowany jest układ fixed-height.
  • Jeśli obecny jest zarówno atrybut width, jak i height oraz atrybut sizes lub heights, przyjmowany jest układ responsive.
  • Jeśli obecny jest zarówno atrybut width, jak i height, przyjmowany jest układ fixed.
  • Jeśli brakuje zarówno atrybutu width, jak i height, przyjmowany jest układ container.
container Element pozwala swoim elementom podrzędnym określić jego rozmiar, podobnie jak zwykły div w HTML. Zakłada się, że składnik sam w sobie nie ma określonego układu, a jedynie działa jako kontener; jego elementy podrzędne są renderowane natychmiast.
fill Element zajmuje dostępne miejsce, zarówno na szerokość jak i wysokość. Innymi słowy, układ i rozmiar elementu fill odpowiada jego elementowi nadrzędnemu. Aby element wypełnił swój kontener nadrzędny, kontener ten musi mieć układ „fill” oraz właściwości position:relative albo position:absolute.
fixed Element ma stałą szerokość i wysokość, bez obsługi responsywności. Muszą być obecne atrybuty width i height. Jedynymi wyjątkami są składniki amp-pixel oraz amp-audio.
fixed-height Element zajmuje dostępne dla niego miejsce, ale utrzymuje wysokość bez zmian. Ten układ działa dobrze w przypadku elementów takich jak amp-carousel, które zawierają treści rozmieszczone poziomo. Atrybut heights musi być obecny. Atrybut width nie może być obecny lub musi mieć wartość auto.
flex-item Element i inne elementy w elemencie nadrzędnym z typem układu flex-item zajmują pozostałe miejsce w kontenerze nadrzędnym, gdy jest to kontener elastyczny (tj. display: flex). Atrybuty width i height nie są wymagane.
intrinsic Element zajmuje dostępne dla niego miejsce i automatycznie zmienia wysokość wg współczynnika proporcji obrazu podanego przez atrybuty width i height aż do osiągnięcia rozmiaru elementu zdefiniowanego przez te atrybuty przekazane do elementu amp-img albo osiągnięcia ograniczenia CSS, takiego jak max-width. Muszą być obecne atrybuty width i height. Układ ten działa bardzo dobrze w przypadku większości elementów AMP, w tym amp-img, amp-carousel, itd. Dostępne miejsce zależy od elementu nadrzędnego i można ją również dostosować za pomocą właściwości CSS max-width. Ten układ różni się od układu responsive, gdyż ma własną wysokość i szerokość. Jest to najbardziej widoczne w elemencie przestawianym, w którym układ responsive będzie renderować 0x0, a układ intrinsic będzie powiększany do osiągnięcia mniejszego z jego naturalnych rozmiarów lub ograniczenia CSS.
nodisplay Element nie jest wyświetlany i zajmuje zero miejsca na ekranie, jakby miał właściwość display style none. Ten układ można stosować do każdego elementu AMP. Zakłada się, że element może wyświetlać się sam wskutek działania użytkownika (np. amp-lightbox). Atrybuty width i height nie są wymagane.
responsive Element zajmuje dostępne dla niego miejsce i automatycznie zmienia wysokość wg współczynnika proporcji obrazu podanego przez atrybuty width i height. Układ ten działa bardzo dobrze w przypadku większości elementów AMP, w tym amp-img, amp-carousel, itd. Dostępne miejsce zależy od elementu nadrzędnego i można je również dostosować za pomocą właściwości CSS max-width

. Muszą być obecne atrybuty width i height.

Uwaga: elementy z atrybutem "layout=responsive" nie mają własnego rozmiaru. Rozmiar elementu jest określany na podstawie elementu jego kontenera. Aby zapewnić wyświetlanie elementu AMP, należy określić szerokość i wysokość elementu zawierającego. Nie należy określać właściwości "display:table" w elemencie zawierającym, ponieważ unieważnia to wyświetlanie elementu AMP, czyniąc element AMP niewidocznym.

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.
Układ Atrybut width/
height wymagany?
Definiuje rozmiar? Dodatkowe elementy Właściwość CSS „display”
container Nie Nie Nie block
fill Nie Tak, rozmiar elementu nadrzędnego. Nie block
fixed Tak Tak, określony przez atrybuty width i height. Nie inline-block
fixed-height Tylko height; width może mieć wartość auto Tak, określony przez kontener nadrzędny i atrbut height. Nie block
flex-item Nie Nie Tak, w zależności od kontenera nadrzędnego block
intrinsic Tak Tak, na podstawie kontenera nadrzędnego i współczynnika proporcji width:height. Tak, i-amphtml-sizer. block (zachowuje się jak zastąpiony element)
nodisplay Nie Nie Nie none
responsive Tak Tak, na podstawie kontenera nadrzędnego i współczynnika proporcji width:height. Tak, i-amphtml-sizer. block