Kapsayıcı sorguları kullanıma hazır.
Heyecan verici bir haberimiz var. En çok talep edilen geliştirici özelliklerinden biri web tarayıcılarında kullanıma sunuldu! Chromium 105 ve Safari 16'dan itibaren, bu tarayıcılarda boyuta dayalı kapsayıcı sorguları oluşturabilir ve kapsayıcı sorgu birimi değerlerini kullanabilirsiniz. Chrome'daki Aurora ekibi, boyuta dayalı kapsayıcı sorgularını ve cq
birimlerini daha da kolaylaştırmak için yoğun bir şekilde çalışarak Kapsayıcı Sorgusu Polidoldurması'nı daha fazla tarayıcı ve kullanım alanını destekleyecek şekilde güncelledi. Böylece, bu güçlü özelliği bugün güvenle kullanabilirsiniz.
Kapsayıcı sorguları nedir?
Kapsayıcı sorguları, alt öğelerin stilini belirlemek için bir üst öğ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, yalnızca görüntü alanı hakkında boyut bilgisi sağlayan medya sorguları gibi bir şeyden çok daha ayrıntılı ve yararlı bir bilgidir.
Kapsayıcı sorguları sayesinde, sayfadaki konumlarına göre 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
Aşağıdaki HTML'yi kullandığınızı varsayalım:
<!-- card parent -->
<div class=”card-parent”>
<div class=”card>
<!-- card contents -->
…
</div>
</div>
Kapsayıcı sorgusu kullanmak için öncelikle izlemek istediğiniz üst öğede kapsayıcıyı 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 @container
kuralını kullanarak stilleri en yakın üst öğeye göre ayarlayabilirsiniz. Kartın bir sütundan iki sütuna taşınabileceği yukarıdaki resim gibi bir tasarım için aşağıdaki gibi bir metin 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ıya dayalı birim değerlerini 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 | göre |
---|---|
cqw | Sorgu kapsayıcı genişliğinin% 1'i |
cqh | Sorgu kapsayıcı yüksekliğinin% 1'i |
cqi | 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 değerinden büyük olan |
Kapsayıcı tabanlı birimleri nasıl kullanacağınıza dair bir örnek olarak duyarlı yazı tipini verebiliriz. 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 yapar. Yani satır içi boyut (genişlik) arttıkça yazı tipi boyutu da büyür, boyut azaldıkça yazı tipi boyutu da 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
'ten büyük veya .5rem
'ten küçük olmayacak ancak kapsayıcının satır içi boyutunun %15'ini alacaktır.
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.
Container sorgusu polyfill'i
Container 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 veya üst sürümleri
- Chrome 79 ve sonraki sürümler
- Edge 79 veya sonraki sürümler
- Safari 13.4 veya üst sürümleri
Sıkıştırıldığında boyutu 9 KB'tan azdır ve şu anda kararlı tarayıcılarda kullanılabilen tam @container sorgu söz dizimini desteklemek için MutationObserver ile ResizeObserver'ı kullanır:
- Ayrık sorgular (
width: 300px
vemin-width: 300px
). - Aralık sorguları (
200px < width < 400px
vewidth < 400px
). - Özellikler ve anahtar karelerde kapsayıcı göreli uzunluk birimleri (
cqw
,cqh
,cqi
,cqb
,cqmin
vecqmax
).
Kapsayıcı sorgusu çoklu dolgusunu kullanma
Polifill'i 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>
User-Agent
'ye göre koşullu olarak polyfill yayınlamak için bir hizmet kullanmak veya kendi kaynağınızda kendi kendinize barındırmak da isteyebilirsiniz.
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 bunu 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ı doğal olarak destekleyen cihazlarda bu yükleme göstergesi hiçbir zaman gösterilmez.
Yeni Polyfill Özellikleri
Güncellenen çoklu dolgu aşağıdakileri destekler:
- İç içe yerleştirilmiş
@container
kuralları. @container
kurallarının@supports
ve@media
sorguları içine yerleştirilmesi ve bunun tersi desteklenir.@supports (container-type: inline-size)
gibi koşullu CSS, polyfill yüklendikten sonra iletilir.- 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ı (writing-mode 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ı sorgu söz dizimi:
- Aralık söz dizimi (örneğin
(200px < width < 400px)
). - Eşitlik sorguları (örneğin,
(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ı özelliklere göre doğru şekilde filtreleme (örneğin,
container: inline-size
üzerindeheight
sorgulamasına yatay yazma modunda doğru şekilde 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ı sorgu polyfill'ini kullanıyorsanız dikkat etmeniz gereken birkaç eksik özellik vardır:
- Gölge DOM henüz desteklenmiyor.
- Kapsayıcı göreli birimleri (örneğin,
cqw
vecqh
),@media
sorgu koşullarında desteklenmez.- Safari: 15.4'ten önceki sürümlerde animasyon anahtar karelerinde Kapsayıcı Göreli Birimleri desteklenmez.
calc()
,min()
,max()
veya diğer matematiksel işlevler henüz sorgu koşullarında desteklenmemektedir.- Bu polyfill yalnızca satır içi ve aynı kaynaktan 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
kapsayıcıları için temel tarayıcı desteği gerekir:- Safari 15.4 ve üstü
- Firefox şu anda stil sınırlamayı desteklemiyor ancak bu konuda çalışmalar devam ediyor.
Uyarılar var
- FID ve CLS'yi etkilememek için polyfill, ilk düzenin ne zaman gerçekleşeceği konusunda hiçbir garanti vermez (senkronize olarak yüklenirse bile). Bunun tek istisnası, LCP'nin makul olmayan bir şekilde gecikmesini önlemeye çalışmasıdı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 bunu belirtmekte fayda var. Bunun nedeni, bircontainer-type: inline-size
öğesinin blok boyutunun bir sorgu değerlendirildikten sonra büyük olasılıkla değişmesidir. AncakResizeObserver
, blok boyutu değişikliklerini önemsemediğini belirtmek için hiçbir yönteme sahip değildir.- 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.
- Aşağıdakilerden daha eski tarayıcıların %2,23'ü için
:where()
geçici çözümü kullanmanız gerekir:- Safari 14
- Chromium 88
- Edge 88
- Samsung İnternet 15
- Firefox 78