Kapsayıcı sorguları kullanıma hazır.
Müthiş bir haber — En çok talep edilen geliştirici özelliklerinden biri web tarayıcılarında kullanıma sunuldu! Chromium 105 ve Safari 16'dan itibaren, artık boyuta dayalı kapsayıcı sorguları oluşturabilir ve bu tarayıcılarda kapsayıcı sorgu birimi değerlerini kullanabilirsiniz. Boyuta dayalı kapsayıcı sorguları ve cq
birimlerini kullanmayı daha da kolaylaştırmak amacıyla Chrome'daki Aurora ekibi, Container Query Polyfill'i (Kapsayıcı Sorgusu Polyfill'i) güncelleyerek daha fazla tarayıcıyı ve kullanım alanını desteklemek için yoğun bir şekilde çalışıyor. Bu sayede, bugün bu güçlü özelliği kullanırken kendinize güvenebilirsiniz.
Kapsayıcı sorguları nedir?
Kapsayıcı sorguları, bir üst öğenin alt öğelerini biçimlendirmek için söz konusu öğenin özelliklerini hedefleyen stil mantığı yazmanıza olanak tanıyan bir CSS özelliğidir. Bir üst öğenin boyutu için sorgu yaparak gerçekten bileşen tabanlı duyarlı tasarım oluşturabilirsiniz. Bu bilgiler, yalnızca görüntü alanı hakkında boyut bilgileri sağlayan medya sorguları gibi şeylere kıyasla çok daha ayrıntılı ve yararlı bilgilerdir.
Kapsayıcı sorgularıyla, sayfada bulundukları yere bağlı olarak farklı görünebilecek, yeniden kullanılabilir bileşenler yazabilirsiniz. Bu da onları sayfalar ve şablonlar genelinde çok daha dayanıklı ve duyarlı hale getirir.
Kapsayıcı sorgularını kullanma
Bir HTML'nizin 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 kapsamayı ayarlamanız gerekir. Bunu, container-type
özelliğini ayarlayarak veya kapsayıcı türü ile kapsayıcı adını aynı anda ayarlamak 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ın bir sütundan iki sütuna gönderilebileceği yukarıdaki resim gibi bir tasarım için aşağıdaki gibi 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;
}
}
Container 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ı birim değerleri ve bunların kapsayıcı boyutuna karşılık nasıl oldukları gösterilmektedir:
birim | ile |
---|---|
cqw | Sorgu kapsayıcı genişliğinin% 1'i |
cqh | Sorgu kapsayıcı yüksekliğinin% 1'i |
cqi | Bir sorgu kapsayıcısının satır içi boyutunun% 1'i |
cqb | Bir sorgu kapsayıcısının blok boyutunun% 1'i |
cqmin | cqi veya cqb'nin 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, duyarlı yazı tipidir. 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'i kadar yapar. Diğer bir deyişle, satır içi boyut (genişlik) büyüdükçe büyür ve küçüldükçe küçülür. Bunu daha da ileri taşımak için clamp()
işlevini kullanarak yazı biçiminize minimum ve maksimum boyut sınırı koyun ve kapsayıcı boyutuna göre yazınızı uyumlu bir şekilde boyutlandırı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
değerinden küçük olmayacaktır. Bununla birlikte, ortadaki herhangi bir yerde kapsayıcının satır içi boyutunun% 15'ini kaplayacak.
Bu demo, bunu bir adım ileriye taşır ve geniş kartları, 2 sütunlu görünümde sunulduğu için daha küçük bir boyut aralığına sahip olacak şekilde günceller.
Kapsayıcı sorgusu çoklu dolgusu
Kapsayıcı sorguları çok güçlü bir özellik olduğundan, bu özelliği projelerinize dahil ederken rahat hissetmenizi ve tarayıcı desteğinin bunun önemli bir parçası olduğunu bilmenizi isteriz. Bu nedenle, Kapsayıcı Sorgusu Çoklu Doldurma özelliğinde iyileştirmeler yapmaya çalışıyoruz. Bu çoklu dolgu, şu konularda genel desteğe sahiptir:
- Firefox 69 ve daha yeni sürümler
- Chrome 79 ve sonraki sürümler
- Edge 79 veya sonraki sürümler
- Safari 13.4 ve üstü
Sıkıştırıldığında boyutu 9 kb'ın altındadır ve şu anda kararlı tarayıcılarda kullanılabilen tam @container sorgu söz dizimini desteklemek için MutationObserver ile kampanyalarınızın boyutunu kullanır:
- Ayrık sorgular (
width: 300px
vemin-width: 300px
). - Aralık sorguları (
200px < width < 400px
vewidth < 400px
). - Özelliklerdeki 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 dokümanınızın başına şu komut dosyası etiketini ekleyin: :
<script type="module">
if (!("container" in document.documentElement.style)) {
import("https://unpkg.com/container-query-polyfill@^0.2.0");
}
</script>
polyfill'i User-Agent
temelinde koşullu olarak yayınlamak için bir hizmet kullanabilir veya bunu kendi kaynağınızda kendiniz barındırabilirsiniz.
En iyi kullanıcı deneyimi için başlangıçta çoklu dolguyu yalnızca ekranın alt kısmındaki içerik için kullanmanız ve çoklu dolgu görüntülemeye hazır olana kadar geçici olarak bir yükleme göstergesiyle değiştirmek için @supports
sorgularını kullanmanız önerilir:
@supports not (container-type: inline-size) {
.container,
footer {
display: none;
}
.loader {
display: flex;
}
}
Yeterince hızlı ağlarda ve cihazlarda ya da kapsayıcı sorgularını yerel olarak destekleyen cihazlarda, bu yükleme göstergesi hiçbir zaman gösterilmez.
Yeni Poly Dolgu Özellikleri
Güncellenen çoklu dolgu şunları destekler:
- İç içe
@container
kuralları. @container
kurallarının@supports
ve@media
sorguları altında ve tam tersi şekilde iç içe yerleştirilmesi desteklenir.@supports (container-type: inline-size)
gibi koşullu CSS'ler, polyfill yüklendikten sonra başarılı olur.- Tam CSS söz dizimi desteği (yorumları söz dizimsel olarak geçerli oldukları herhangi bir yere koymayla ilgili artık herhangi bir sorun yok).
- Dikey yazma modları (yazma modu aracılığıyla).
- Kapsayıcı Göreli Birimler (
cqw
,cqh
vb.) sorgu koşulları, özellik bildirimleri ve animasyon animasyon karelerinde desteklenir. Sorgu koşullarındarem
veem
desteklenir. - Genişletilmiş kapsayıcı sorgusu söz dizimi:
- Aralık söz dizimi (örneğin
(200px < width < 400px)
). - Eşitlik sorguları (ör.
(width = 200px)
).
- Aralık söz dizimi (örneğin
::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
veaspect-ratio
özellik sorguları.- Sorguların özelliklere göre doğru şekilde filtrelenmesine (örneğin,
container: inline-size
üzerindeheight
sorgusunun, yatay yazma modunda doğru şekilde yapılmasına izin verilmez). - DOM mutasyonu (örneğin, çalışma zamanında
<style>
ve<link>
öğelerinin kaldırılması).
Çoklu doldurma sınırlamaları ve uyarıları
Kapsayıcı sorgusu çoklu dolgusunu kullanıyorsanız dikkat etmeniz gereken birkaç eksik özellik vardır:
- Gölge DOM henüz desteklenmiyor.
- Kapsayıcı Göreli Birimler (örneğin,
cqw
vecqh
),@media
sorgu koşullarında desteklenmez.- Safari: 15.4'ten önceki animasyon animasyon karelerinde Kapsayıcı Göreli Birimler desteklenmez.
calc()
,min()
,max()
veya diğer matematiksel işlevler henüz sorgu koşullarında 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ı (çoklu dolgu manuel olarak yüklenmediği sürece) desteklenmez.
layout
vestyle
önleme için temel tarayıcı desteği gerekir:- Safari 15.4 ve üstü
- Firefox şu anda stil sınırlamayı desteklememektedir, ancak bu konuda çalışıyor.
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 (LCP'nin makul olmayan bir şekilde gecikmesinden kaçınmaya çalışır). Diğer bir deyişle, ilk boyada asla ona güvenmemelisiniz.
ResizeObserver Loop Errors
oluşturur. Orijinal çoklu dolgu da bunu yapıyor ancak burada değinmekte fayda var. Bunun nedeni,container-type: inline-size
blok boyutunun bir sorgu değerlendirildikten sonra değişebilmesi ancakResizeObserver
, blok boyutu değişikliklerinin önemsenmediğini anlamanın bir yolu yoktur.- Bu çoklu dolgu, Web Platformu Testlerine karşı test edilmiş olup JavaScript API'leri gibi belirli özellikler çoklu doldurulmadığı ve bu nedenle geçme oranı bilinçli olarak% 70'e yakın olduğu için %70'e ulaşmıştır.
:where()
geçici çözümü, şundan daha eski tarayıcıların% 2,23'ü için gereklidir:- Safari 14
- Chromium 88
- Kenar 88
- Samsung İnternet 15
- Firefox 78