CSS Medya Sorguları
CSS2 Tanıtılan Medya Türleri
BB2'de tanıtılan @mediakural, farklı medya türleri için farklı stil kuralları tanımlamayı mümkün kıldı.
Örnekler: Bilgisayar ekranları için bir, yazıcılar için bir, elde taşınan cihazlar için bir, televizyon tipi cihazlar için bir stil kuralınız olabilir.
Ne yazık ki bu ortam türleri, yazdırma ortamı türü dışında hiçbir zaman aygıtlar tarafından çok fazla destek görmemiştir.
CSS3 Tanıtılan Medya Sorguları
CSS3'teki medya sorguları, CSS2 medya türleri fikrini genişletti: Bir tür cihaz aramak yerine, cihazın kapasitesine bakarlar.
Medya sorguları, aşağıdakiler gibi birçok şeyi kontrol etmek için kullanılabilir:
- görünüm alanının genişliği ve yüksekliği
- cihazın genişliği ve yüksekliği
- yönlendirme (tablet/telefon yatay mı yoksa dikey modda mı?)
- çözüm
Medya sorgularını kullanmak, masaüstü bilgisayarlara, dizüstü bilgisayarlara, tabletlere ve cep telefonlarına (iPhone ve Android telefonlar gibi) uyarlanmış bir stil sayfası sunmak için popüler bir tekniktir.
Tarayıcı Desteği
Tablodaki sayılar, @mediakuralı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Medya Sorgu Sözdizimi
Bir ortam sorgusu bir ortam türünden oluşur ve doğru veya yanlış olarak çözümlenen bir veya daha fazla ifade içerebilir.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Belirtilen ortam türü, belgenin görüntülendiği aygıt türüyle eşleşiyorsa ve ortam sorgusundaki tüm ifadeler doğruysa, sorgunun sonucu doğrudur. Bir medya sorgusu doğru olduğunda, normal basamaklı kurallar izlenerek ilgili stil sayfası veya stil kuralları uygulanır.
Değil veya yalnızca operatörlerini kullanmadığınız sürece, ortam türü isteğe bağlıdır ve
alltür ima edilir.
Farklı ortamlar için farklı stil sayfalarınız da olabilir:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
CSS3 Medya Türleri
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Medya Sorguları Basit Örnekler
Medya sorgularını kullanmanın bir yolu, stil sayfanızın içinde alternatif bir CSS bölümüne sahip olmaktır.
Aşağıdaki örnek, görüntü alanı 480 piksel genişliğinde veya daha genişse arka plan rengini açık yeşil olarak değiştirir (görüntü alanı 480 pikselden azsa, arka plan rengi pembe olur):
Örnek
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Aşağıdaki örnek, görüntü alanı 480 piksel genişliğinde veya daha genişse sayfanın solunda kayan bir menüyü gösterir (görüntü alanı 480 pikselden azsa, menü içeriğin üstünde olacaktır):
Örnek
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Daha Fazla Medya Sorgusu Örneği
Medya sorgularıyla ilgili çok daha fazla örnek için sonraki sayfaya gidin: CSS MQ Örnekleri .
CSS @medya Referansı
Tüm medya türleri ve özellikleri/ifadeleri hakkında tam bir genel bakış için lütfen CSS referansımızdaki @media kuralına bakın .