AMPHTML Yerleşim Sistemi

Genel bakış

Düzen sisteminin temel amacı, AMP öğelerinin düzenlerini ifade edebilmelerini sağlamaktır. Böylece çalışma zamanı, JavaScript ve veri çağrıları gibi herhangi bir uzak kaynak tamamlanmadan önce öğelerin boyutlandırılmasını sağlayabilir. Bu, jank'ın oluşturulmasını ve kaydırılmasını önemli ölçüde azalttığı için önemlidir.

Bu düşünceyle, AMP Yerleşim Sisteminin iyi performans garantisi sunan birkaç ama esnek yerleşim desteklemek için tasarlanmıştır. Bu sistem, öğenin düzenini ve boyutlandırma ihtiyaçlarını ifade etmek için {layout, width, height, sizes ve heights gibi bir dizi özniteliğe dayanır.

Davranış

Kapsayıcı olmayan bir AMP öğesi (yani, layout != container), bir yer tutucu haricinde tüm alt öğelerinin gizlendiği çözümlenmemiş/oluşturulmamış modda başlar (yer tutucu özelliğine bakın). Öğeyi tam olarak oluşturmak için gereken JavaScript ve veri yükü hâlâ indiriliyor ve başlatılıyor olabilir, ancak AMP çalışma zamanı yalnızca CSS sınıflarına ve layout, width, height ve media özelliklerine dayanarak öğenin nasıl boyutlandırılacağını ve yerleştirileceğini zaten biliyor. Çoğu durumda, bir placeholder, belirtilmişse, öğenin tüm alanını alacak şekilde boyutlandırılır ve konumlandırılır.

placeholder, öğe oluşturulur ve ilk düzeni tamamlanır tamamlanmaz gizlenir. Bu noktada, öğenin tüm alt öğelerinin uygun şekilde inşa edilmesi ve konumlandırılması ve görüntülenmeye ve okuyucunun girişini kabul etmeye hazır olması beklenir. Bu, varsayılan davranıştır. Her öğe, örneğin placeholder daha hızlı gizlemek veya daha uzun süre tutmak için geçersiz kılabilir.

Öğe, çalışma zamanına göre layout , width , height ve media niteliklerine göre boyutlandırılır ve görüntülenir. Tüm yerleşim kuralları, CSS aracılığıyla dahili olarak uygulanır. Boyutu CSS stilleri aracılığıyla anlaşılabiliyorsa ve alt öğelerine göre değişmiyorsa öğenin "boyutu tanımladığı" söylenir: hemen kullanılabilir veya dinamik olarak eklenir. Bu, bu öğenin boyutunun değişemeyeceği anlamına gelmez. Yerleşim; responsive , fixed-height , fill ve flex-item öğe yerleşimlerinde olduğu gibi tamamen duyarlı olabilir. Bu sadece boyutun açık bir kullanıcı eylemi olmadan değişmediği anlamına gelir, örneğin işleme, kaydırma veya indirme işlemi sırasında.

Öğe yanlış yapılandırılmışsa, PROD'da hiç oluşturulmaz ve DEV modunda çalışma zamanı öğeyi hata durumunda oluşturur. Olası hatalar, layout, width ve height özniteliklerinin geçersiz veya desteklenmeyen değerlerini içerir.

Yerleşim Öznitelikleri

width ve height

layout özniteliğinin değerine bağlı olarak, amp bileşen öğelerinin bir tamsayı piksel değeri içeren bir width ve height özniteliğine sahip olması gerekir. Gerçek yerleşim davranışı, aşağıda açıklandığı gibi layout özniteliği tarafından belirlenir.

Bazı durumlarda, width veya height belirtilmemişse, AMP çalışma zamanı bu değerleri aşağıdaki gibi varsayılan olarak ayarlayabilir:

• amp-pixel: Hem width hem de height varsayılan olarak 0'dır.
• amp-audio: Varsayılan width ve height tarayıcıdan çıkarılır.

layout

AMP, bir AMP bileşeninin belge düzeninde nasıl davrandığını belirten bir dizi yerleşim sağlar. Aşağıdaki tabloda belirtilen değerlerden biriyle layout niteliği ekleyerek bir bileşen için bir yerleşim belirtebilirsiniz.

Örnek: En boy oranını belirlemek için genişlik ve yüksekliğin kullanıldığı basit, duyarlı bir resim.

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

> </amp-img>
> 

layout özelliği için desteklenen değerler:

sizes

responsive yerleşimi destekleyen tüm AMP öğeleri, aynı zamanda sizes özelliğini de destekler. Bu özniteliğin değeri, img sizes'da açıklandığı gibi bir boyut ifadesidir. Ancak yalnızca resimleri değil tüm öğeleri kapsar. Kısacası, sizes özelliği, ortam koşullarına bağlı olarak öğenin genişliğinin nasıl hesaplandığını açıklar.

sizes özelliği width ve height ile birlikte belirtildiğinde, layout varsayılan olarak responsive olacak şekilde ayarlanır.

Örnek: sizes özniteliğini kullanma

Aşağıdaki örnekte, görüntü alanı 320px'den daha genişse, görüntü 320 piksel genişliğinde olacaktır, aksi takdirde 100vw genişliğinde olacaktır (görüntü alanı genişliğinin %100'ü).

<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

sizes özelliği kendi başına öğede satır içi width stilini ayarlar. disable-inline-width ile sizes eşleştirirken, AMP öğesi, sizes değerini, bir amp-img içinde yuvalanmış img'de olduğu gibi, sizes değerini genellikle AMP'de kendi başına yaptığı şekilde satır içi width ayarlamadan öğenin temelindeki etikete yayar.

Örnek: disable-inline-width özniteliğini kullanma

Aşağıdaki örnekte, <amp-img> öğesinin genişliği etkilenmez ve sizes yalnızca srcset kaynaklarından birini seçmek için kullanılır.

<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

responsive yerleşimi destekleyen tüm AMP öğeleri, aynı zamanda heights özelliğini de destekler. Bu özelliğin değeri, img sizes özelliğine benzer şekilde medya ifadelerine dayalı, ancak iki temel farkla birlikte bir boyut ifadesidir:

1. Öğenin genişliğine değil, yüksekliğine uygulanır.
2. Yüzde değerlerine izin verilir, ör. 86%. Yüzde değeri kullanılıyorsa, öğenin genişliğinin yüzdesini gösterir.

heights özelliği width ve height ile birlikte belirtildiğinde, layout varsayılan olarak responsive ayarlanır.

Örnek: heights özniteliğini kullanma

Aşağıdaki örnekte, görüntünün yüksekliği varsayılan olarak genişliğin %80'i kadardır, ancak görüntü alanı 500px'den daha genişse, yükseklik 200px ile sınırlandırılır. heights özelliği width ve height ile birlikte belirtildiğinden, yerleşim varsayılan olarak responsive olur.

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

> </amp-img>
> 

media

Çoğu AMP öğesi, media özelliğini destekler. media değeri bir medya sorgusudur. Sorgu eşleşmezse, öğe hiç oluşturulmaz hem kaynaklar hem de potansiyel olarak alt kaynaklar getirilmez. Tarayıcı penceresinin boyutu veya yönü değişirse, medya sorguları yeniden değerlendirilir ve öğeler gizlenir ve yeni sonuçlara göre gösterilir.

Örnek: media özniteliğini kullanma

Aşağıdaki örnekte, birbirini dışlayan medya sorguları içeren 2 resmimiz var. Ekran genişliğine bağlı olarak, iki görüntüden biri alınacak ve işlenecektir. media özelliği tüm AMP öğelerinde mevcuttur, bu nedenle reklamlar gibi resim olmayan öğelerle kullanılabilir.

<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

placeholder özelliği, yalnızca AMP öğelerinde değil, herhangi bir HTML öğesinde de ayarlanabilir. placeholder özelliği, bu öznitelikle işaretlenen öğenin ana AMP öğesi için bir yer tutucu görevi gördüğünü belirtir. Belirtilirse, bir yer tutucu öğe, AMP öğesinin doğrudan alt öğesi olmalıdır. Varsayılan olarak placeholder, AMP öğesinin kaynakları indirilmemiş veya başlatılmamış olsa bile, AMP öğesi için hemen gösterilir. AMP öğesi hazır olduğunda genellikle placeholder'ı gizler ve içeriği gösterir. placeholder'a göre tam davranış, öğenin uygulanmasına bağlıdır.

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

fallback

fallback özniteliği, yalnızca AMP öğelerinde değil, herhangi bir HTML öğesinde de ayarlanabilir. Geri dönüş, öğenin okuyucuya tarayıcının öğeyi desteklemediğini bildirmesine olanak tanıyan bir kuraldır. Belirtilirse, yedek öğe, AMP öğesinin doğrudan alt öğesi olmalıdır. Geri dönüşle ilgili kesin davranış, öğenin uygulanmasına bağlıdır.

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

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

noloading

noloading özelliği, bu öğe için "yükleme göstergesinin" kapatılıp kapatılmayacağını belirtir. Çoğu AMP öğesinin, öğenin henüz tam olarak yüklenmediğini gösteren temel bir animasyon olan bir "yükleme göstergesi" göstermesine izin verilir. Öğeler, bu özelliği ekleyerek bu davranışı devre dışı bırakabilir.

(tl;dr) Yerleşim Gereksinimlerinin ve Davranışlarının Özeti

Aşağıdaki tablo, layout niteliği için kullanılan kabul edilebilir parametreleri, CSS sınıflarını ve stilleri açıklamaktadır. Bunları unutmayın:

1. Öneki -amp- ile işaretlenmiş tüm CSS sınıfları ve ön eki i-amp- olan öğeler, AMP'ye dahil olarak kabul edilir ve bunların kullanıcı stil sayfalarında kullanımına izin verilmez. Burada sadece bilgi amaçlı gösterilmektedir.
2. Tabloda gerektiği gibi width ve height belirtilmiş olsa da, varsayılan kurallar amp-pixel ve amp-audio'da olduğu gibi geçerli olabilir.