CSS Konteyner Sorguları: Gerçekten Duyarlı Bileşenler
Yıllar boyunca duyarlı tasarım şu anlama geliyordu: "düzeni görüntü alanına uyarlamak."
Bir bileşen kartı @media (max-width: 768px) ne kadar geniş olduğunu biliyor
ancak gerçekte ne kadar boş alana sahip olduğunu bilmiyor
bağlam. Bu kartı dar bir kenar çubuğuna koyun ve sanki öyleymiş gibi davranır.
mobilde, ekran 27" masaüstü olsa bile. Ana içeriğe koyun
ve bu kap bir akıllı telefondan daha dar olsa bile bir masaüstü gibi davranır.
Le CSS Kapsayıcı Sorguları Bu sorunu kökünden çözün: bir bileşen boyutuna tepki verebilir kendi konteyneri, değil görünüm alanının. Üstün tarayıcı desteğiyleTemel 2025'te %88 (Chrome 105+, Firefox 110+, Safari 16+), bu teknik üretime hazırdır.
Ne Öğreneceksiniz
- Medya Sorguları ile Kapsayıcı Sorguları arasındaki temel fark
- Bir sınırlama bağlamı nasıl tanımlanır?
container-type - Sözdizimi
@containersorgular için - Konteyner boyutu sorguları: satır içi boyut, blok boyutu
- Kapsayıcı stili sorguları: özel özelliklere dayalı sorgular
- Hiyerarşik sorgular için adlandırılmış kapsayıcılar
- Konteyner sorgularını Angular, React ve Vue'ya entegre etme
Medya Sorgularıyla İlgili Sorun
Medya sorguları, görünüm alanı: genişlik ekranın yönü, renk şeması. Bu, düzen ve basit ve bir bileşen her zaman tahmin edilebilir bir genişliğe sahiptir. Ama tasarımlarda modern sistemlerde aynı bileşen tamamen farklı bağlamlarda yeniden kullanılır:
- Ana sayfada bir ürün kartı (masaüstünde 3 sütun)
- "İlgili ürünler" kenar çubuğundaki aynı kart (1 dar sütun)
- Tam ekran modelde aynı kart (2 sütun)
- Arama sayfasındaki aynı kart (etkin filtrelere göre değişkenlik gösterir)
Medya sorgularında her kullanımın içeriğini önceden bilmeniz ve yazmanız gerekir. vakaya özgü CSS seçicileri. Konteyner sorgularıyla e özerktir: kendisini mevcut alana uyarlar.
Bir Konteyner Tanımlayın
Kapsayıcı sorgularını kullanmak için ilk adım hangi öğenin olduğunu bildirmektir.
"konteyner" sorgulanacak. Mülkiyetle yapılır container-type:
/* Crea un container che risponde alla larghezza (inline-size) */
.card-wrapper {
container-type: inline-size;
}
/* Crea un container che risponde sia a larghezza che altezza */
.card-wrapper {
container-type: size;
}
/* Dai un nome al container per query gerarchiche */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* Shorthand */
.card-wrapper {
container: card / inline-size;
}
Bir öğeye sahip olduktan sonra container-type, onun tüm torunları
kullanabilirler @container boyutlarını sorgulamak için.
Sözdizimi @konteyner
Sözdizimi medya sorgularıyla aynıdır ancak görünüm penceresini sorgulamak yerine, en yakın konteyneri bir muhafaza bağlamıyla sorgulayın:
.card {
/* Layout default: verticale, compatto */
display: grid;
grid-template-areas:
"image"
"content";
gap: 12px;
}
.card__image {
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px 8px 0 0;
}
/* Quando il container e largo almeno 400px: layout orizzontale */
@container (min-width: 400px) {
.card {
grid-template-areas: "image content";
grid-template-columns: 200px 1fr;
}
.card__image {
aspect-ratio: 1;
border-radius: 8px 0 0 8px;
}
}
/* Quando il container e largo almeno 600px: layout espanso */
@container (min-width: 600px) {
.card {
grid-template-columns: 280px 1fr;
gap: 24px;
padding: 24px;
}
.card__title {
font-size: 1.5rem;
}
}
/* Range syntax (CSS Level 4) - piu leggibile */
@container (200px <= width <= 400px) {
.card {
/* stile per range specifico */
}
}Adlandırılmış Kapsayıcılar: Hiyerarşik Sorgular
İç içe kapsayıcılarınız olduğunda, bir sorguyu sorgulamak için kapsayıcılara ad verebilirsiniz. en yakın yerine belirli bir ata:
<!-- HTML struttura -->
<main class="layout" style="container: layout / inline-size">
<aside class="sidebar" style="container: sidebar / inline-size">
<div class="widget">
<!-- Questo widget puo interrogare sia "sidebar" che "layout" -->
</div>
</aside>
</main>/* Query sul container "sidebar" (il piu vicino) */
@container sidebar (min-width: 300px) {
.widget { display: flex; }
}
/* Query sul container "layout" (l'antenato nominato) */
@container layout (min-width: 1200px) {
.widget { max-width: 400px; }
}Kapsayıcı Stili Sorguları: Gizli Özellik
Boyut sorgularına ek olarak kapsayıcı sorguları da şunları destekler: stil sorgular: kapsayıcının CSS özel özelliklerinin değerlerine dayalı sorgular. Chrome 111+ ve Safari 17.4+ tarafından desteklenen bu özellik, yeni olasılıkların kapısını aralıyor tema ve bileşen çeşitleri açısından tamamen yeni.
/* Definisci una custom property sul container */
.card-wrapper {
container-type: style;
/* La variante del componente viene comunicata via custom property */
--card-variant: featured;
}
/* Il componente si adatta alla variante del container */
@container style(--card-variant: featured) {
.card {
border: 2px solid var(--color-accent);
background: var(--color-accent-subtle);
}
.card__badge {
display: block; /* mostra il badge "In evidenza" */
}
}
@container style(--card-variant: compact) {
.card {
padding: 8px;
font-size: 0.875rem;
}
.card__image {
display: none; /* nasconde l'immagine in modalita compatta */
}
}Bu kalıp, anlamsal bağlamı kapsayıcıdan taşıyıcıya aktarmanıza olanak tanır. kapsüllemeyi koruyan, ek CSS veya JavaScript sınıfları olmayan bileşen.
Konteyner ölçüm birimleri: cqw, cqh, cqi, cqb
Konteyner sorgularıyla birlikte konteynerle ilgili yeni ölçü birimleri de geliyor:
cqw: Konteyner genişliğinin %1'icqh: Konteyner yüksekliğinin %1'icqi: Konteyner satır içi boyutunun %1'i (= LTR düzeni için cqw)cqb: Konteyner blok boyutunun %1'i (= cqh)cqmin: cqi ve cqb arasında daha küçükcqmax: cqi ve cqb arasında daha büyük olan
/* Tipografia fluida relativa al container */
.card__title {
/* Scala da 16px a 24px in base alla larghezza del container */
font-size: clamp(1rem, 4cqi, 1.5rem);
}
/* Padding proporzionale al container */
.card {
padding: 5cqi;
}
/* Gap che si adatta */
.card__grid {
display: grid;
gap: clamp(8px, 2cqi, 24px);
}Angular, React ve Vue'da Konteyner Sorguları
Angular: Container Uyumlu Bileşenler
/* card.component.scss */
:host {
display: block;
container-type: inline-size;
container-name: card-host;
}
.card {
display: grid;
grid-template-areas: "image" "content";
gap: 12px;
}
@container card-host (min-width: 400px) {
.card {
grid-template-areas: "image content";
grid-template-columns: 180px 1fr;
}
}// card.component.ts
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss'],
// :host come container - nessun JS necessario per il responsive
host: { class: 'card-container' }
})
export class CardComponent {
@Input() product!: Product;
}React: Konteyner Sorgularıyla CSS Modülleri
/* card.module.css */
.wrapper {
container-type: inline-size;
container-name: card;
}
.card {
display: grid;
gap: 12px;
}
@container card (min-width: 400px) {
.card {
grid-template-columns: 180px 1fr;
}
}// Card.tsx
import styles from './card.module.css';
export function Card({ product }: { product: Product }) {
return (
<div className={styles.wrapper}>
<article className={styles.card}>
<img src={product.image} alt={product.name} />
<div>
<h3>{product.name}</h3>
<p>{product.description}</p>
</div>
</article>
</div>
);
}Kapsayıcı Sorguları ve Medya Sorguları: Ne Zaman Kullanılmalı?
| Senaryo | Optimum Seçim | Sebep |
|---|---|---|
| Genel sayfa düzeni | Medya Sorguları | Düzen görünüm alanına bağlıdır |
| Yeniden kullanılabilir bileşenler | Konteyner Sorguları | Bileşen kendi bağlamına uyum sağlamalıdır |
| Sistem belirteçlerini tasarlayın | İkisi birden | Kesme noktaları için görünümler, varyantlar için kapsayıcılar |
| Karanlık/açık mod | Medya Sorguları | renk şemasını ve bir medya özelliğini tercih eder |
| Dinamik kenar çubuğu | Konteyner Sorguları | İçerik açık/kapalı kenar çubuğuna sığar |
| Baskı stili | Medya Sorguları | @media print bir medya sorgusudur |
Desen Karşıtı: Container Sorgularında Yaygın Yapılan Hatalar
Hata #1: Container'ın Kendisini Sorgulama
olan bir eleman container-type kendini sorgulayamaz
@container — değiştirilmiş olanın soyundan biri olması gerekir.
Asla bir kapsayıcı ve kural tanımlamayın @container aynı
seçici.
Hata #2: konteyner tipi: Yükseklik Tanımlı olmayan boyut
container-type: size kabın bir boyuta sahip olmasını gerektirir
hem genişlik hem de yükseklik olarak tanımlanır. Eğer kullanırsan size bir konteyner üzerinde
açıkça yükseklik olmadan sorgular height e cqh
beklendiği gibi çalışmayacaklar. Amerika inline-size çoğunlukta
vakaların.
Sonraki Adımlar
Artık kapsayıcı sorguları sayesinde gerçekten duyarlı bileşenlere sahipsiniz. Serideki bir sonraki makale, CSS Bağlantı Konumlandırma API'sini inceliyor. tek bir JavaScript satırı olmadan araç ipuçlarını, açılır menüleri ve açılır pencereleri uygulamak için: CSS'yi geliştiricilerin beklediği bildirimsel güce yaklaştıran başka bir teknik yıllardır.
Sonuçlar
CSS Kapsayıcı Sorguları oluşturma şeklimizi temelden değiştiriyor duyarlı bileşenler. Her bileşenin belirlediği küresel bir kesme noktası sistemi yerine bilmeli ve saygı duymalıdır, her bileşen özerk hale gelir ve kendine uyum sağlar bağlam. Bu, daha sürdürülebilir kodlara ve gerçekten şekillendirilebilir tasarım sistemlerine yol açar ve manuel olarak yönetilecek daha az uç durum.
%88'in üzerindeki tarayıcı desteğiyle konteyner sorguları dağıtıma hazır bugün üretim. Başlamanın ve bileşenlerini tanımlamanın en iyi yolu birden fazla bağlamda kullanılan tasarım sisteminiz - genellikle kart, liste öğesi, medya nesnesini kullanın ve bunları aşamalı olarak yeni paradigmaya dönüştürün.