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.
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
vemin-width: 300px
). - Aralık sorguları (
200px < width < 400px
vewidth < 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.
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.
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
veem
, 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)
).
- 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 desteklenirorientation
veaspect-ratio
özellik sorguları.- Sorguların özelliklere göre doğru şekilde filtrelenmesi (örneğin, yatay yazma modunda
container: inline-size
üzerindeheight
sorgusunun doğru şekilde sorgulanmasına izin verilmez). - DOM mutasyonu (örneğin, çalışma zamanında kaldırılan
<style>
ve<link>
öğeleri).
Ç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
vecqh
)@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
vestyle
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 sonracontainer-type: inline-size
blok boyutunun muhtemelen değişeceği, ancakResizeObserver
'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