CSS Özellik Sorguları
Konteyner sorguları ebeveynin ne kadar geniş olduğunu sorar. Medya sorguları viewport’a bakar. Özellik sorguları tamamen başka bir soru sorar: bu tarayıcı bu CSS’i anlıyor mu? @supports ile güvenilir bir temel bırakır, modern düzeni veya seçicileri yalnızca motorun başardığı yerde açarsınız.
Kademeli iyileştirme, kumar değil
Özellik sorgusu bir yetenek kapısıdır. Eski stilleri silmezsiniz — her yerde çalışan bir düzen tutar, ardından motor ihtiyacınız olan özelliği ayrıştırabildiğinde (örneğin display: grid veya flex’te gap) @supports içinde daha zengin bir katman eklersiniz.
Temel @supports
Yaygın biçim bir özellik–değer çiftini test eder. Tarayıcı o bildirimi anlayabiliyorsa içteki kurallar uygulanır:
.card-list {
display: block;
}
.card-list .card {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
}
@supports (display: grid) {
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
.card-list .card {
margin-bottom: 0;
}
}
Blok dışında kartlar basit bir margin ile üst üste biner. @supports (display: grid) içinde aynı liste esnek bir ızgaraya döner — eski motorlar yığını korur; yeniler grid alır.
Koşulları birleştirin: and, or, not
Birden fazla özelliği birlikte isteyebilir, alternatifleri kabul edebilir veya testi tersine çevirebilirsiniz:
@supports (display: grid) and (gap: 1rem) {
.toolbar {
display: grid;
grid-auto-flow: column;
gap: 0.75rem;
align-items: center;
}
}
@supports (display: flex) or (display: grid) {
.cluster {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
}
@supports not (display: grid) {
.card-list .card {
max-width: 36rem;
}
}
and kapıyı daraltır (ikisi de geçmeli). or genişletir. not, desteklenmeyen yolu stillendirir — bilinçli bir geri dönüş için yararlıdır; o geri dönüşün gerçekten okunaklı ve eksiksiz olduğundan emin olun.
Seçicileri selector() ile test edin
Bazı özellikler özellik değil, seçicidir. Onları selector() içine koyun ki sorgu şunu sorsun: “bu seçiciyi ayrıştırabiliyor musun?”
.nav a {
color: #0f172a;
text-decoration: none;
}
@supports selector(:has(*)) {
.nav:has(a:focus-visible) {
outline: 2px solid #2563eb;
outline-offset: 4px;
}
.card:has(img) .title {
font-weight: 700;
}
}
selector() olmadan @supports içinde çıplak :has() güvenilir bir kalıp değildir. Bununla, :has() bilmeyen tarayıcılar yalnızca gelişmiş kuralları atlar ve temel bağlantı stilleri kalır.
Kim hangi soruyu sorar?
📊 Media, container, and feature queries
| Sorduğunuz soru | Ne zaman tercih | Tipik araç |
|---|---|---|
| Viewport / cihaz bağlamı ne kadar geniş? | Sayfa kabuğu, kesme noktaları | @media (…) |
| Bileşeni saran bu ebeveyn ne kadar geniş? | Eşit olmayan yuvalardaki kartlar | container-type sonrası @container (…) |
| Tarayıcı bu CSS’i destekliyor mu? | Kademeli iyileştirme | @supports (…) / selector(…) |
Bu üçlü temizce üst üste biner: sayfa için medya, yuva için konteyner, yetenek için @supports. @supports ile sahte kesme noktası uydurmayın; @media ile özellik denetimi yapmayın.
Önce temel, sonra yükseltme
Pratik kalıp: ortak görünümü kapının dışında tutun, gelişmiş düzeni içeri alın:
.feature-panel {
padding: 1.25rem;
border-radius: 0.75rem;
background: #f8fafc;
color: #0f172a;
}
.feature-panel .lead {
margin: 0 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5;
}
.feature-panel .actions {
display: block;
}
.feature-panel .actions a {
display: inline-block;
margin: 0.25rem 0.5rem 0.25rem 0;
padding: 0.5rem 0.875rem;
border-radius: 0.5rem;
background: #e2e8f0;
color: inherit;
text-decoration: none;
}
@supports (display: flex) and (gap: 0.5rem) {
.feature-panel .actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.feature-panel .actions a {
margin: 0;
}
}
Her tarayıcı dolgu, tipografi ve tıklanabilir bağlantı alır. Flex + gap yalnızca ikisi de anlaşıldığında gelir — biri eksikse boş bir delik kalmaz.
Nesting ile @supports birlikte
Modern Toolkit parçaları birleşir. Nesting seçicileri düzenler; yetenek kapısı hâlâ @supports’indir:
.pricing {
padding: 1rem;
border: 1px solid #e2e8f0;
}
@supports (display: grid) {
.pricing {
display: grid;
gap: 1rem;
& .tier {
padding: 1rem;
background: #fff;
}
& .tier .price {
font-size: 1.5rem;
font-weight: 700;
}
}
}
Nesting’in kendisi desteklenmiyorsa düz bir eşdeğer dışarıda tutun veya iç içe biçimi gelişmiş yolun parçası kabul edin — aynı kademeli iyileştirme zihniyeti.
Kendiniz deneyin
- Bir listeyi basit dikey yığın olarak stillendirin; sonra Grid düzenini
@supports (display: grid)içine sarın. - Flex/grid boşluğunun yarım uygulanmaması için
andilegapisteyin. - Net bir
max-widthgeri dönüşüyle@supports not (display: grid)ekleyin — her iki yol da kasıtlı görünmeli. - Bir
:has()kuralını@supports selector(:has(*))ile kilitleyin. - Tüm görsel stilleri
@supportsiçine taşımayın; marka rengi ve tipografiyi temelde bırakın.
Sık yapılan hatalar
- Temelsiz şekilde tek kullanılabilir düzeni
@supportsiçine koymak — desteklemeyen tarayıcılar bozuk sayfa görür - Değer olmadan
@supports (display)yazmak — özellik sorgusu özellik–değer çifti (veyaselector(…)) ister @media’nın yerinde@supportskullanmak (veya tersi) — yetenek ≠ viewport genişliği- Temelin zaten dayandığı bir özelliği test etmek — yalnızca iyileştirmeyi kapılayın
- Küçük kazanımlar için derin
@supportsyığınları — tek net gelişmiş katman daha iyidir
Özet
@supports, CSS’i tarayıcı yeteneğine göre kapılar (özellik sorguları)(property: value)ile test edin;and/or/notile birleştirin; seçiciler içinselector()kullanın- Sağlam bir temel tutun; destek varken yükseltin
- Üçlüyü unutmayın:
@media→ viewport,@container→ ebeveyn boyutu,@supports→ yetenek - Modern Toolkit burada biter — sonraki modül: Erişilebilirlik ve Kapanış (
accessibility)
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek