AMP
TR
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский 中文 Polski Tiếng việt

Desteklenen CSS

Tüm web sayfaları gibi AMP sayfalarının stili de CSS ile belirlenir, ancak (özel yazı tipleri haricinde) harici stil sayfalarını referans alamazsınız. Ayrıca, performans üzerindeki etkilerinden dolayı belirli stillere izin verilmez; satır içi stil özniteliklerine izin verilmemektedir.

Tüm stiller, dokümanın head bölümünde yer almalıdır (bkz. Sayfaya stil ekleme). Ancak, içeriğinizi daha iyi yönetmek amacıyla statik sayfalar oluşturmak için CSS ön işlemcilerini ve şablonlarını kullanabilirsiniz.

Not: Duyarlı sayfaları yazmayı makul bir düzeyde kolaylaştırmak için AMP bileşenleri varsayılan stillerle birlikte gelir. Bu stiller, amp.css içinde tanımlanır.

CSS ön işlemcilerini kullanma

Ön işlemcilerin oluşturduğu çıktı, diğer web sayfalarında olduğu gibi AMP'de sorunsuz bir şekilde çalışır. Örneğin, amp.dev sitesi Sass'ı kullanır. (amp.dev sitesini meydana getiren statik AMP sayfalarını oluşturmak için biz Grow kullanıyoruz.)

Ön işlemcileri kullanırken neleri eklediğinize ayrıca dikkat etmeniz gerekir; yalnızca sayfalarınızın kullandığı öğeleri ekleyin. Örneğin, head.html kodu gerekli tüm AMP biçimlendirmesini ve *.scss kaynak dosyalarındaki satır içi CSS'yi içerir. Diğerlerinin yanı sıra amp-youtube için özel öğe komut dosyasını da içerir. Böylece, sitedeki birçok sayfaya yerleşik YouTube videoları eklenebilir.

 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">

  <title>AMP Project</title>
  <link rel="shortcut icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}
  </style>

  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

Yukarıdaki kodun biçimlendirilmiş AMP HTML'sine nasıl çevrildiğini görmek için amp.dev'daki herhangi bir sayfanın kaynağını görüntüleyin. (Chrome'da sağ tıklayın ve Sayfa Kaynağını Görüntüle'yi seçin.)

İzin verilmeyen stiller

Aşağıdaki stillere AMP sayfalarında izin verilmez:

Yasaklanan stil Açıklama
Satır içi stil öznitelikleri Tüm stiller sayfanın <head> öğesinde, bir <style amp-custom> etiketinin içinde tanımlanmalıdır.
!önemli niteleyici Kullanımına izin verilmez. Bu, AMP'nin öğe boyutlandırma kurallarını uygulamasını sağlama açısından önemli bir gereksinimdir.
<link rel=”stylesheet”> Özel yazı tipleri istisnasıyla izin verilmez.
* (evrensel seçici) Negatif performans etkileri vardır ve diğer seçici kısıtlamalarını aşmak için kullanılabilir.
:not() Evrensel seçiciyi simüle etmek için kullanılabilir.
Sözde seçiciler, sözde sınıflar ve sözde öğeler Sözde seçicilere, sözde sınıflara ve sözde öğelere yalnızca amp- ile başlamayan etiket adları içeren seçicilerde izin verilir. Doğru kullanım örneği: a:hover, div:last-of-type Yanlış kullanım örneği: amp-img:hover, amp-img:last-of-type
-amp- sınıfı ve i-amp- etiket adları Yazar stil sayfalarındaki sınıf adları, -amp- dizesiyle başlayamaz. Bunlar, AMP çalışma zamanı tarafından dahili kullanım için ayrılmıştır. Kullanıcı stil sayfasının -amp- sınıflarına ve i-amp etiketlerine ilişkin CSS seçicilerini referans alamayacağı kuralına uyar.

Beyaz listedeki geçiş ve animasyon özellikleri

AMP yalnızca yaygın kullanılan tarayıcılarda GPU hızlandırmalı olabilecek geçiş ve animasyon özelliklerine izin verir. AMP projesi şu anda opacity, transform ve -vendorPrefix-transform özelliklerini beyaz listeye almıştır.

Aşağıdaki örneklerde, <property> etiketinin beyaz listede olması gerekir:

  • transition <property> (Also -vendorPrefix-transition)
  • @ @keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)

overflow özelliğinin (ve overflow-y, overflow-x) stili “auto” veya “scroll” olarak belirlenemez. AMP dokümanlarında hiçbir kullanıcı tanımlı öğenin kaydırma çubuğu olamaz.

Özel yazı tipleri istisnası

AMP sayfaları harici stil sayfaları içeremez. Bunun tek istisnası özel yazı tipleridir. Özel yazı tiplerine referansta bulunmak için desteklenen iki yöntem, beyaz listedeki yazı tipi sağlayıcılarını işaret eden bağlantı etiketlerini ve @font-face öğesini dahil etmektir.

Yazı tipi sağlayıcıları, yalnızca CSS entegrasyonlarını desteklediklerinde ve HTTPS üzerinde sunum yaptıklarında beyaz listeye eklenebilir. Şu anda yalnızca aşağıdaki kaynaklar beyaz listeye alınmıştır ve bağlantı etiketleri aracılığıyla yazı tipi sunumu için bu kaynaklara izin verilmektedir:

Beyaz listedeki Google Fonts yazı tipi sağlayıcısını işaret eden örnek bağlantı etiketi:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

Alternatif olarak, @font-face öğesini kullanabilirsiniz. @font-face aracılığıyla dahil edilen yazı tipleri, HTTP veya HTTPS şeması aracılığıyla getirilmelidir.