Birden Fazla Medya Sorgusunu Birleştirme
Medya özelliklerini karmaşık sorgularda birleştirmek için and, or ve not işleçlerini kullanın.
Birden Fazla Medya Sorgusunu Birleştirme, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
and Operatörü
and anahtar sözcüğü, tüm koşulların aynı anda doğru olmasını gerektirir. Belirli cihaz boyutlarını ve türlerini birlikte hedeflemek için kullanışlıdır.
<div class="box">and operator demo</div>
and ile Aralık
min-width ve max-width değerlerini and ile birleştirmek, belirli bir görünüm alanı genişlik aralığını (yalnızca tablet stillerini) hedefler:
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
OR Anlamında Virgül
Virgülle ayrılmış sorgular OR gibi çalışır — ANY sorgu eşleşirse stiller uygulanır:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
not İşleci
not, bir medya sorgusunun tamamını olumsuzlar. Dikkatli kullanılmalıdır — yalnızca ilk koşula değil, sorgu ifadesinin tamamına uygulanır.
<div class="doc">not operator demo</div>
Parantezlerle not (Modern)
Modern Seviye 4 medya sorguları, tek tek özelliklerde işlev olarak not() kullanımına izin verir:
<div class="panel">not() function demo</div>
only Anahtar Sözcüğü (Eski)
only anahtar sözcüğü, medya özelliklerini desteklemeyen eski tarayıcılardan medya sorgularını gizlemek için kullanılırdı. Modern tarayıcılar bunu yok sayar; ancak kullanılması zararsızdır.
<div class="box">only keyword demo</div>
Medya Sorgularını İç İçe Yazma (CSS İç İçe Yazımı)
Yerel CSS iç içe yazımıyla medya sorguları seçici bloklarının içine yazılabilir:
<div class="card">Nested media query demo</div>
Mobil + Yüksek DPI Birleşimi
Özellikle mobil cihazları (küçük ve yüksek DPI değerine sahip cihazları) hedefleyin:
<div class="icon"></div>
Yazdırma + Renk
Yalnızca renkli yazıcılara uygulanan yazdırma stilleri için birden fazla medya özelliği:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
@import İçinde Medya Sorgusu
Medya sorguları, tüm stil sayfalarını koşullu olarak yüklemek için içe aktarma sırasında uygulanabilir (ancak bu işlem oluşturmayı engeller ve dikkatli kullanılmalıdır):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Karmaşık Sorgularda Mantıksal Özellikler
Genel bir kural olarak, daha basit sorguların bakımı daha kolaydır. Çok fazla koşulu birbirine zincirlemekten kaçının. Bir sorgu karmaşık hâle geldiğinde, sorguyu değiştirmek yerine CSS yaklaşımını yeniden yapılandırmayı düşünün.
Hızlı Kontrol
Görünüm alanı en az 600px genişliğindeyse OR cihaz yatay yöndeyse stilleri uygulayan medya sorgusu hangisidir?
Özet
and tüm koşulların doğru olmasını gerektirir. Virgüller, sorgular arasında OR anlamına gelir. not sorgunun tamamını olumsuzlar. Aralık hedeflemek için min-width ve max-width değerlerini birleştirin. Modern CSS, daha temiz ifadeler için seçici bloklarının içinde medya sorgularının iç içe yazılmasını ve aralık söz dizimini destekler.
Sıkça Sorulan Sorular
“Birden Fazla Medya Sorgusunu Birleştirme” dersi ücretsiz mi?
Evet — “Birden Fazla Medya Sorgusunu Birleştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Birden Fazla Medya Sorgusunu Birleştirme” dersinde ne öğreneceğim?
Medya özelliklerini karmaşık sorgularda birleştirmek için and, or ve not işleçlerini kullanın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Birden Fazla Medya Sorgusunu Birleştirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Sözdizimi ve Yaygın Kesme Noktaları
- Genişlik, Yükseklik ve Yön Sorguları
- Prefers-Color-Scheme ve Prefers-Reduced-Motion
- Birden Fazla Medya Sorgusunu Birleştirme