AMP

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:

Değer Davranış ve Gereksinimler
Mevcut değil Değer belirtilmezse, bileşenin yerleşimi şu şekilde çıkarılır:
  • height mevcutsa ve width yoksa veya auto, otomatik olarak ayarlanmışsa,fixed-height yerleşimi varsayılır.
  • sizes veya heights özellikleriyle birlikte width ve height mevcutsa, responsive yerleşim varsayılır.

  • width ve height varsa, fixed yerleşim varsayılır.
  • width ve height yoksa, container yerleşimi varsayılır.
container Öğe, normal bir HTML div gibi alt öğelerinin boyutunu tanımlamasına izin verir. Bileşenin belirli bir yerleşime sahip olmadığı, yalnızca bir kapsayıcı görevi gördüğü varsayılır; altındakiler hemen işlenir.
fill Öğe, hem genişlik hem de yükseklik olarak kullanabileceği alanı kaplar. Başka bir deyişle, bir fill öğesinin düzeni ve boyutu, üst öğesiyle eşleşir. Bir öğenin üst kabını doldurması için, "doldurma" yerleşimini belirtin ve ana kapsayıcının position:relative veya position:absolute değerini belirttiğinden emin olun.
fixed Öğe, yanıt verme desteklenmeyen sabit bir genişliğe ve yüksekliğe sahiptir. width ve height özellikleri mevcut olmalıdır. Tek istisna, amp-pixel ve amp-audio bileşenleridir.
fixed-height Öğe, kullanabileceği alanı alır ancak yüksekliği değiştirmeden tutar. Bu yerleşim, yatay olarak konumlandırılmış içeriği içeren amp-carousel gibi öğeler için iyi çalışır. height özelliği mevcut olmalıdır. width özelliği mevcut olmamalı veya auto ile eşit olmalıdır.
flex-item flex-item yerleşim türüne sahip üst öğesindeki öğe ve diğer öğeler, ana esnek bir kapsayıcı olduğunda (yani, display: flex) üst kapsayıcının kalan alanını alır. width ve height nitelikleri gerekli değildir.
intrinsic Öğe, kullanabileceği alanı alır ve amp-img'ye aktarılan width ve height özellikleriyle tanımlanan öğenin boyutuna ulaşana veya erişene kadar yüksekliğini width ve height özelliklerinin verdiği en boy oranına otomatik olarak yeniden boyutlandırır. max-width gibi bir CSS kısıtlaması. Genişlik ve yükseklik özellikleri mevcut olmalıdır. Bu düzen, amp-img, amp-carousel vb. dahil çoğu AMP öğesi için çok iyi çalışır. Kullanılabilir alan ana öğeye bağlıdır ve ayrıca max-width CSS kullanılarak özelleştirilebilir. Bu yerleşim, kendine özgü bir yükseklik ve genişliğe sahip olmasıyla responsive'dan farklıdır. Bu, responsive yerleşimin 0x0 oluşturacağı ve intrinsic yerleşimin doğal boyutunun veya herhangi bir CSS kısıtlamasının daha küçük olmasına neden olacağı yüzen bir öğenin içinde en belirgindir.
nodisplay Öğe görüntülenmez ve ekran stili none gibi ekranda sıfır yer kaplar. Bu düzen her AMP elemanına uygulanabilir. Öğenin kendisini kullanıcı eyleminde gösterebileceği varsayılmaktadır (örneğin, amp-lightbox). width ve height öznitelikleri gerekli değildir.
responsive Öğe, kullanabileceği alanı alır ve yüksekliğini otomatik olarak width ve height özelliklerinin verdiği en boy oranına yeniden boyutlandırır. Bu düzen, amp-img, amp-video vb. dahil çoğu AMP öğesi için çok iyi çalışır. Kullanılabilir alan ana öğeye bağlıdır ve ayrıca max-width CSS kullanılarak özelleştirilebilir. width ve height özellikleri mevcut olmalıdır.

Not: "layout=responsive" özelliğine sahip öğelerin gerçek boyutu yoktur. Elemanın boyutu, kapsayıcı elemanı ile belirlenir. AMP öğenizin görüntülendiğinden emin olmak için, içeren öğe için bir genişlik ve yükseklik belirtmelisiniz. AMP öğesinin görünümünü geçersiz kılarak AMP öğesini görünmez hale getireceğinden, içeren öğede "display:table" belirtmeyin.

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.
Yerleşim Genişlik/
Yükseklik gerekli mi?
Boyut tanımlanır mı? Ek Öğeler CSS "display"
container Hayır Hayır Hayır block
fill Hayır Evet, ana öğenin boyutu. Hayır block
fixed Evet Evet, width ve height ile belirtilmiştir. Hayır inline-block
fixed-height sadece height; width auto olabilir Evet, ana kapsayıcı ve height tarafından belirtilir. Hayır block
flex-item Hayır Hayır Evet, ana kapsayıcıya göre. block
intrinsic Evet Evet, ana kapsayıcıya ve width:height en boy oranına bağlıdır. Evet, i-amphtml-sizer. block (değiştirilmiş öğe gibi davranır)
nodisplay Hayır Hayır Hayır none
responsive Evet Evet, ana kapsayıcıya ve width:height en boy oranına bağlıdır. Evet, i-amphtml-sizer. block