Çoklu dolgu büyük bir güncelleme alırken, kapsayıcı sorguları kararlı tarayıcılarda çalışmaya başlar

Una Kravets

Gerald Monaco

Kapsayıcı sorguları kullanıma hazır.

Size güzel bir haberimiz var. En çok talep gören geliştirici özelliklerinden biri artık web tarayıcılarında yer almaya başladı! Chromium 105 ve Safari 16'dan itibaren, boyut tabanlı kapsayıcı sorguları oluşturabilir ve bu tarayıcılarda kapsayıcı sorgu birimi değerlerini kullanabilirsiniz. Chrome Aurora Ekibi, boyuta dayalı kapsayıcı sorgularının ve cq birimlerinin kullanımını daha da kolaylaştırmak için Container Query Polyfill'i daha fazla tarayıcıyı ve kullanım alanını destekleyecek şekilde güncellemek için yoğun şekilde çalışıyor.

Not: Kapsayıcı sorguları css-contain-3 spesifikasyonunun bir parçasıdır. Bu spesifikasyon, yeni birim değerlerini ve hem boyut hem de stil kapsayıcı türlerini kapsamaktadır. Tarayıcılar başlangıçta yalnızca boyut sınırlama desteğiyle kullanıma sunulacaktır. Bu nedenle, bu makalede boyut sınırlamaya odaklanacağız.

Kapsayıcı sorguları nedir?

Kapsayıcı sorguları, bir üst öğenin alt öğelerini biçimlendirmek için o öğenin özelliklerini hedefleyen stil mantığı yazmanızı sağlayan bir CSS özelliğidir. Bir üst öğenin boyutunu sorgulayarak gerçekten bileşen tabanlı duyarlı tasarım oluşturabilirsiniz. Bu, yalnızca görüntü alanı hakkında boyut bilgisi sağlayan medya sorgularına göre çok daha ayrıntılı ve yararlı bilgilerdir.

Kapsayıcı sorgularıyla, sayfanın neresinde olduklarına bağlı olarak farklı şekillerde görünebilecek, yeniden kullanılabilir bileşenler yazabilirsiniz. Böylece, sayfalar ve şablonlar arasında çok daha dayanıklı ve duyarlı hale gelirler.

Kapsayıcı sorgularını kullanma

Bazı HTML'niz olduğunu varsayalım:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

Bir kapsayıcı sorgusu kullanmak için öncelikle izlemek istediğiniz üst öğede kapsama ayarını ayarlamanız gerekir. Bunu, container-type özelliğini ayarlayarak veya kapsayıcı türünü ve kapsayıcı adını aynı anda belirlemek için container kısaltmasını kullanarak yapabilirsiniz.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

Artık stilleri en yakın üst öğeye göre ayarlamak için @container kuralını kullanabilirsiniz. Bir kart bir sütundan iki sütuna kadar uzanabilen yukarıdaki resimde olduğu gibi bir tasarım için şöyle bir şey yazın:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

Daha düzenli ve açık olması için üst öğe kapsayıcısına bir ad verin:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

Ardından, önceki kodu şu şekilde yeniden yazın:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Kapsayıcı sorgu birimleri

Kapsayıcı sorgularını daha da kullanışlı hale getirmek için, kapsayıcı tabanlı birim değerleri de kullanabilirsiniz. Aşağıdaki tabloda, olası kapsayıcı birimi değerleri ve bunların kapsayıcı boyutuna nasıl karşılık geldiği gösterilmektedir:

birim	göre
cqw	Sorgu kapsayıcısı genişliğinin% 1'i
cqh	Sorgu kapsayıcısının yüksekliğinin% 1'i
cqi	Sorgu kapsayıcısının satır içi boyutunun% 1'i
cqb	Sorgu kapsayıcısının blok boyutunun% 1'i
cqmin	cqi veya cqb'nin daha küçük değeri
cqmax	cqi veya cqb'nin büyük değeri

Kapsayıcı tabanlı birimleri nasıl kullanacağınıza ilişkin bir örnek de duyarlı tipografidir. Görüntü alanına dayalı birimler (vh, vb, vw ve vi gibi) ekrandaki herhangi bir öğeyi boyutlandırmak için kullanılabilir.

.card h2 {
  font-size: 15cqi;
}

Bu kod, yazı tipi boyutunu kapsayıcının satır içi boyutunun% 15'ine dönüştürür. Diğer bir deyişle, satır içi boyutu (genişlik) arttıkça yazı tipi boyutu artar veya boyut küçüldükçe küçülür. Bunu daha da ileri götürmek amacıyla, tipografinize minimum ve maksimum boyut sınırı belirlemek ve kapsayıcı boyutuna göre uygun şekilde boyutlandırmak için clamp() işlevini kullanın:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

Artık başlık hiçbir zaman 3rem değerinden büyük veya .5rem boyutundan küçük olmayacaktır. Ancak aradaki herhangi bir yerde kapsayıcının satır içi boyutunun% 15'ini alacaktır.

Bu demo, bunu bir adım öteye taşıyarak, 2 sütunlu görünümde sunulan geniş kartları da daha küçük bir boyut aralığına güncelliyor.

Kapsayıcı sorgusu çoklu dolgusu

Kapsayıcı sorguları son derece güçlü bir özellik olduğundan bu özelliği projelerinize dahil ederken rahat olmanızı ve tarayıcı desteğinin bunda büyük bir rol oynadığını bilmenizi istiyoruz. Bu nedenle, Container Sorgusu Polyfill'inde iyileştirmeler yapmak için çalışıyoruz. Bu çoklu dolgu şu konularda genel desteğe sahiptir:

• Firefox 69 ve üstü sürümler
• Chrome 79 veya daha yeni sürümler
• Edge 79 ve sonraki sürümler
• Safari 13.4+

Sıkıştırıldığında boyutu 9 KB'tan küçüktür ve şu anda kararlı tarayıcılarda kullanılabilen tam @container sorgu söz dizimini desteklemek için DimensionObserver MutationObserver ile birlikte kullanır:

• Ayrı sorgular (width: 300px ve min-width: 300px).
• Aralık sorguları (200px < width < 400px ve width < 400px).
• Özellikler ve animasyon karelerindeki kapsayıcı göreli uzunluk birimleri (cqw, cqh, cqi, cqb, cqmin vecqmax).

Kapsayıcı sorgusu çoklu dolgusunu kullanma

Çoklu dolguyu kullanmak için şu komut dosyası etiketini dokümanınızın başına ekleyin:

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

Çoklu dolguyu User-Agent temelinde koşullu olarak yayınlamak veya kendi kaynağınızda barındırmak için bir hizmet de kullanabilirsiniz.

Not: Tüm tarayıcılar yayınlanan veya kendi yol haritalarında yayınlanan kapsayıcı sorguları için destek sunar. Bu nedenle, çoklu dolguyu diğer kodunuzla gruplandırmaktan kaçınmanız önerilir.

En iyi kullanıcı deneyimi için başlangıçta çoklu dolguyu ekranın alt kısmındaki içerik için kullanmanız ve @supports sorgularını kullanarak, çoklu dolgu görüntülenmeye hazır olana kadar geçici bir yükleme göstergesi kullanmanız önerilir:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

Yeterince hızlı ağlarda ve cihazlarda veya kapsayıcı sorgularını yerel olarak destekleyen cihazlarda bu yükleme göstergesi hiçbir zaman gösterilmez.

Not: Bu tekniğin, ilk yükleme sırasında daha az olumsuzluk için LCP'yi etkili bir şekilde değiştirdiğini unutmayın. Bu nedenle, özellikle düşük performans gösteren cihazlarda, ilk yüklemede regresyonlar görebilirsiniz.

Yeni Polyfill Özellikleri

Güncellenen çoklu dolgu şunları destekler:

• İç içe @container kural.
• @container kurallarının @supports ve @media sorgularının altına (veya tersinin) iç içe yerleştirilmesi desteklenir.
• Çoklu dolgu yüklendikten sonra @supports (container-type: inline-size) gibi koşullu CSS'ler aktarılır.
• Tam CSS söz dizimi desteği (Artık yorumları söz dizimsel olarak geçerli oldukları herhangi bir yere yerleştirmekle ilgili herhangi bir sorun yok).
• Dikey yazma modları (yazma moduyla).
• Kapsayıcı Göreli Birimleri (cqw, cqh vb.) sorgu koşulları, özellik bildirimleri ve animasyon animasyon karelerinde desteklenir. rem ve em, sorgu koşullarında desteklenir.
• Genişletilmiş kapsayıcı sorgu söz dizimi:
  • Aralık söz dizimi (örneğin, (200px < width < 400px)).
  • Eşitlik sorguları (örneğin, (width = 200px)).
• ::before ve ::after gibi sözde öğeler.
• :is(...)/:where(...) içermeyen tarayıcılar, isteğe bağlı bir geçici çözüm ile desteklenir
• orientation ve aspect-ratio özellik sorguları.
• Sorguların özelliklere göre doğru şekilde filtrelenmesi (örneğin, yatay yazma modunda container: inline-size üzerinde height sorgusunun doğru şekilde sorgulanmasına izin verilmez).
• DOM mutasyonu (örneğin, çalışma zamanında kaldırılan <style> ve <link> öğeleri).

Not: Güncellenen kapsayıcı sorgusu çoklu dolgusu artık kullanıcıların size() (ör. size(width >= 200px)) içinde boyut sorgularını sarmalaması gereken eski boyut sorgu söz dizimini desteklemiyor.

Çoklu doldurma sınırlamaları ve uyarıları

Kapsayıcı sorgusu çoklu dolgusunu kullanıyorsanız dikkat etmeniz gereken bazı eksik özellikler vardır:

• Gölge DOM henüz desteklenmiyor.
• Kapsayıcı Göreli Birimleri (örneğin, cqw ve cqh) @media sorgu koşullarında desteklenmez.
  • Safari: Kapsayıcı Göreli Birimleri, 15.4'ten önceki animasyon animasyon karelerinde desteklenmez.
• calc(), min(), max() veya diğer matematik işlevleri sorgu koşullarında henüz desteklenmemektedir.
• Bu çoklu dolgu, yalnızca satır içi ve aynı kaynak CSS ile çalışır. Çapraz kaynak stil sayfaları ve iframe'lerdeki stil sayfaları (bir çoklu dolgu manuel olarak yüklenmediği sürece) desteklenmez.
• layout ve style kapsama alanı için temel tarayıcı desteği gerekir:
  • Safari 15.4 ve üzeri
  • Firefox şu anda stil kapsama almayı desteklememektedir, ancak bunun üzerinde çalışmaktadır.

Uyarılar var

• Çoklu dolgu, FID ve CLS'nin etkilenmesini önlemek için eşzamanlı olarak yüklense bile ilk düzenin ne zaman gerçekleşeceğine dair hiçbir garanti vermez. Tek fark, LCP'de makul olmayan gecikmelerin olmasını önlemektir. Diğer bir deyişle, ilk boyama için asla ona güvenmemelisiniz.
• ResizeObserver Loop Errors sonucunu oluşturur. Orijinal çoklu dolgu da bunu yapıyor ancak bundan bahsetmeye değer. Bunun nedeni, sorgunun değerlendirildikten sonra container-type: inline-size blok boyutunun muhtemelen değişeceği, ancak ResizeObserver'a blok boyutundaki değişiklikleri önemsemediğimizi bildirmesinin mümkün olmamasıdır.
• Bu çoklu dolgu, Web Platformu Testlerine göre test edilmiş ve JavaScript API'leri gibi belirli özellikler çoklu doldurulmadığından ve geçme oranı kasıtlı olarak% 70'e yakın olduğundan %70'e ulaşmıştır.
• :where() geçici çözümü, şundan daha eski tarayıcı kullanıcılarının% 2,23'ü için gereklidir:
  • Safari 14
  • Chromium 88
  • Kenar 88
  • Samsung İnternet 15
  • Firefox 78