CSS Medya Sorguları: Hızlı Referans ve Kapsamlı Rehber
Giriş: Medya Sorguları Nedir ve Neden Önemlidir?
Günümüzün dijital dünyasında kullanıcılar, web sitelerine akıllı telefonlardan tablet bilgisayarlara, masaüstü monitörlerden akıllı televizyonlara kadar çok çeşitli cihazlar üzerinden erişmektedir. Bu cihazların her birinin ekran boyutları, çözünürlükleri, yönlendirmeleri ve hatta kullanıcı tercihleri (örneğin, koyu mod) farklılık gösterir. Bir web sitesinin tüm bu farklı koşullara uyum sağlayarak her cihazda optimum bir kullanıcı deneyimi sunması, modern web tasarımının temel gereksinimlerinden biridir. İşte bu noktada CSS Medya Sorguları (Media Queries) devreye girer.
Medya sorguları, CSS’in güçlü bir özelliğidir ve web geliştiricilerin, belirli cihaz özelliklerine veya ortam koşullarına göre farklı stil kuralları uygulamasına olanak tanır. Örneğin, bir web sitesinin mobil cihazlarda farklı bir düzen, daha büyük yazı tipleri veya gizlenmiş menüler göstermesini sağlayabiliriz. Masaüstü ekranlarda ise daha geniş bir düzen, birden fazla sütun ve tam boyutlu gezinme çubukları görüntülenebilir. Bu dinamik uyum yeteneği, web sitelerinin “duyarlı (responsive)” olmasını sağlar ve kullanıcıların cihazlarından bağımsız olarak tutarlı, erişilebilir ve estetik bir deneyim yaşamasını garanti eder. Medya sorguları olmasaydı, her cihaz türü için ayrı bir web sitesi geliştirmek veya tüm cihazlarda kötü görünen tek bir statik tasarım kullanmak zorunda kalırdık ki bu da hem geliştirme maliyetlerini artırır hem de kullanıcı memnuniyetini düşürürdü.
Medya Sorgularının Temel Yapısı
Medya sorguları, CSS içinde @media kuralı kullanılarak tanımlanır. Bu kural, bir veya daha fazla medya özelliğinin belirli bir koşulu karşılayıp karşılamadığına bakar ve koşul doğruysa içerisindeki CSS kurallarını uygular.
@media Kuralı
@media kuralı, medya sorgusunun başlangıç noktasıdır. Temel yapısı şu şekildedir:
@media medya_türü and (medya_özelliği: değer) {
/ Medya sorgusu koşulu karşılandığında uygulanacak CSS kuralları /
}
Örneğin, ekran genişliği 768 pikselden küçük olduğunda bir stil uygulamak için:
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
.menu {
flex-direction: column;
}
}
Medya Türleri (Media Types)
Medya türleri, stilin uygulanacağı genel cihaz kategorisini belirtir. En sık kullanılan medya türleri şunlardır:
* all: Tüm medya türleri için geçerlidir. Varsayılan değerdir ve genellikle açıkça belirtilmez.
* screen: Renkli bilgisayar ekranları, tabletler ve akıllı telefonlar gibi cihazlar için. Web siteleri için en sık kullanılan türdür.
* print: Yazıcılar için. Web sayfasının yazdırıldığında nasıl görüneceğini belirlemek için kullanılır.
* speech: Ekran okuyucular gibi konuşma sentezleyicileri için. Nadiren kullanılır.
Örnek:
@media print {
body {
font-size: 12pt;
color: black;
}
nav, footer {
display: none; / Navigasyon ve altbilgiyi yazdırma çıktısından gizle /
}
}
Medya Özellikleri (Media Features)
Medya özellikleri, belirli bir cihazın veya ortamın özelliklerini sorgulamak için kullanılır. Her özelliğin bir adı ve bir değeri vardır. Bazı özellikler min- veya max- önekleriyle kullanılarak bir aralık belirtilebilir.
Örnekler: width, height, orientation, resolution, color-scheme.
Mantıksal Operatörler (Logical Operators)
Medya sorgularında birden fazla koşulu birleştirmek için mantıksal operatörler kullanılır:
* and: İki veya daha fazla koşulun aynı anda doğru olmasını gerektirir.
@media screen and (min-width: 768px) and (max-width: 1024px) {
/ Genişlik 768px ile 1024px arasında olduğunda /
}
* or (virgül ,): Koşullardan herhangi birinin doğru olmasını gerektirir.
@media screen and (max-width: 600px), screen and (orientation: landscape) {
/ Genişlik 600px'ten küçükse VEYA cihaz yatay konumdaysa /
}
* not: Bir koşulun yanlış olmasını gerektirir. Genellikle belirli bir medya türünü hariç tutmak için kullanılır.
@media not screen and (color) {
/ Renkli ekran olmayan tüm cihazlar için (örn. e-okuyucular) /
}
* only: Eski tarayıcıların medya sorgusunu yanlışlıkla uygulamasını engellemek için kullanılır. Modern tarayıcılar için genellikle gereksizdir.
@media only screen and (min-width: 992px) {
/ Sadece ekran medya türü ve genişlik 992px'ten büyükse /
}
Sık Kullanılan Medya Özellikleri ve Uygulamaları
Medya sorgularının gücü, sunduğu zengin medya özelliklerinden gelir. İşte en sık kullanılanlar ve kullanım alanları:
Genişlik ve Yükseklik (Width & Height)
Bunlar, duyarlı tasarımın bel kemiğidir. Ekranın veya görüntü alanının (viewport) genişliğini ve yüksekliğini sorgular.
* width: Görüntü alanının mevcut genişliği.
* min-width: Görüntü alanı genişliği belirtilen değerden büyük veya eşitse. (Mobil-first yaklaşımda sıkça kullanılır.)
@media screen and (min-width: 768px) {
/ Tablet ve üzeri cihazlar için stiller /
}
* max-width: Görüntü alanı genişliği belirtilen değerden küçük veya eşitse. (Masaüstü-first yaklaşımda sıkça kullanılır.)
@media screen and (max-width: 767px) {
/ Mobil cihazlar için stiller /
}
* height: Görüntü alanının mevcut yüksekliği.
* min-height: Görüntü alanı yüksekliği belirtilen değerden büyük veya eşitse.
* max-height: Görüntü alanı yüksekliği belirtilen değerden küçük veya eşitse.
Cihaz Genişliği ve Yüksekliği (Device Width & Height)
Bu özellikler, cihazın fiziksel ekranının genişliğini ve yüksekliğini sorgular, görüntü alanının (viewport) değil. Genellikle width ve height yerine device-width ve device-height kullanmak, özellikle mobil cihazlarda, istenmeyen davranışlara yol açabilir. width ve height genellikle daha güvenli ve esnektir çünkü kullanıcı tarayıcıyı yeniden boyutlandırdığında da tepki verirler.
* min-device-width, max-device-width
* min-device-height, max-device-height
Önemli Not: Çoğu durumda, width ve height özelliklerini kullanmak, device-width ve device-height özelliklerine göre daha iyi sonuçlar verir. device-width ve device-height, cihazın fiziksel çözünürlüğüne bağlıdır ve kullanıcı tarayıcı penceresini yeniden boyutlandırdığında değişmezler. Bu durum, duyarlı tasarımın temel prensibi olan esnekliğe aykırıdır.
Yönlendirme (Orientation)
Cihazın yatay (landscape) veya dikey (portrait) konumda olup olmadığını sorgular.
* orientation: portrait: Cihaz dikey konumdaysa (yükseklik genişlikten büyükse).
* orientation: landscape: Cihaz yatay konumdaysa (genişlik yükseklikten büyükse).
@media screen and (orientation: landscape) {
body {
display: flex;
}
}
Çözünürlük (Resolution)
Cihazın piksel yoğunluğunu (DPI veya DPPC) sorgular. Özellikle Retina ekranlar gibi yüksek çözünürlüklü ekranlar için farklı görseller sunmak amacıyla kullanılır.
* min-resolution, max-resolution: Minimum veya maksimum çözünürlük. Birimi dpi (dots per inch) veya dpcm (dots per centimeter) olabilir.
* resolution: Belirli bir çözünürlük.
@media screen and (min-resolution: 2dppx) { / 2 device pixels per CSS pixel /
.logo {
background-image: url('logo@2x.png'); / Yüksek çözünürlüklü logo /
}
}
Renk (Color)
Cihazın renk yeteneklerini sorgular.
* color: Cihazın bit cinsinden renk bileşenlerinin sayısı.
* min-color, max-color: Minimum veya maksimum renk bit sayısı.
* color-index: Cihazın renk paletindeki giriş sayısı. (Nadiren kullanılır.)
* monochrome: Cihazın tek renkli olup olmadığını sorgular. (Nadiren kullanılır.)
Renk Gamı (Color Gamut)
Cihazın desteklediği renk gamını sorgular (örneğin, sRGB, P3). Daha geniş renk gamına sahip ekranlar için özel stiller uygulamak için kullanılabilir.
* color-gamut: srgb: Standart sRGB renk gamını destekler.
* color-gamut: p3: Display P3 renk gamını destekler (daha geniş).
* color-gamut: rec2020: Rec. 2020 renk gamını destekler (en geniş).
@media (color-gamut: p3) {
.hero-image {
background-image: url('hero-p3.jpg'); / Geniş gamlı görsel /
}
}
Ekran Oranı (Aspect Ratio)
Görüntü alanının genişliğinin yüksekliğine oranını sorgular.
* aspect-ratio: Belirli bir oran (örn. 16/9).
* min-aspect-ratio, max-aspect-ratio: Minimum veya maksimum oran.
@media screen and (min-aspect-ratio: 16/9) {
/ Geniş ekran monitörler için stiller /
}
Kullanıcı Tercihleri (User Preferences) – Yeni ve Önemli!
Bu medya özellikleri, kullanıcıların işletim sistemi veya tarayıcı ayarları aracılığıyla belirlediği tercihleri sorgular. Modern ve erişilebilir web tasarımında kritik öneme sahiptirler.
* prefers-color-scheme: Kullanıcının açık veya koyu tema tercihini sorgular.
* light: Açık tema tercih edildiğinde.
* dark: Koyu tema tercih edildiğinde.
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #eee;
}
a {
color: #8ab4f8;
}
}
* prefers-reduced-motion: Kullanıcının azaltılmış hareket (animasyon) tercihini sorgular. Özellikle duyarlı animasyonlar veya geçişler içeren siteler için erişilebilirlik açısından önemlidir.
* no-preference: Kullanıcının bir tercihi yok veya azaltılmış hareket istemiyor.
* reduce: Kullanıcı azaltılmış hareket tercih ediyor.
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
* prefers-contrast: Kullanıcının yüksek veya düşük kontrast tercihini sorgular.
* no-preference: Kullanıcının bir tercihi yok.
* more: Daha yüksek kontrast tercih ediliyor.
* less: Daha düşük kontrast tercih ediliyor.
* custom: Özel bir kontrast ayarı var (şu an için az destekleniyor).
@media (prefers-contrast: more) {
body {
background-color: black;
color: white;
}
button {
border: 2px solid white;
}
}
Medya Sorgularını Kullanım Stratejileri
Medya sorgularını etkili bir şekilde kullanmak için belirli stratejiler benimsemek önemlidir.
Mobil İlk Yaklaşım (Mobile-First) vs. Masaüstü İlk Yaklaşım (Desktop-First)
* Mobil İlk Yaklaşım: Bu strateji, tasarıma ve geliştirmeye en küçük ekran boyutundan (mobil) başlar. Temel stiller mobil cihazlar için yazılır ve daha sonra min-width medya sorguları kullanılarak daha büyük ekranlar için stiller eklenir. Bu yaklaşım, performansı ve kullanıcı deneyimini optimize etmek için genellikle tercih edilir çünkü mobil cihazlarda daha az kaynakla başlamak, daha sonra aşamalı olarak daha fazla karmaşıklık eklemek anlamına gelir.
/ Mobil cihazlar için varsayılan stiller (breakpoint yok) /
body {
font-size: 16px;
}
.container {
width: 100%;
padding: 15px;
}
/ Tabletler için (min-width: 768px) /
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/ Masaüstü için (min-width: 1200px) /
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
* Masaüstü İlk Yaklaşım: Bu strateji, tasarıma masaüstü ekran boyutundan başlar ve daha sonra max-width medya sorguları kullanılarak daha küçük ekranlar için stiller ayarlanır. Bu yaklaşım, mobil ilk yaklaşıma göre daha az tercih edilir çünkü mobil cihazlar için gereksiz stilleri yükleyebilir ve daha sonra bunları geçersiz kılmak zorunda kalabilirsiniz.
/ Masaüstü için varsayılan stiller /
body {
font-size: 18px;
}
.container {
width: 1170px;
margin: 0 auto;
}
/ Tabletler için (max-width: 1199px) /
@media screen and (max-width: 1199px) {
.container {
width: 970px;
}
}
/ Mobil cihazlar için (max-width: 767px) /
@media screen and (max-width: 767px) {
.container {
width: 100%;
padding: 15px;
}
}
Kırılma Noktaları (Breakpoints) Belirleme
Kırılma noktaları, tasarımın belirli bir ekran genişliğinde değiştiği noktalardır. Bu noktalar, genellikle yaygın cihaz boyutlarına (telefon, tablet, küçük masaüstü, büyük masaüstü) göre belirlenir, ancak en iyi uygulama, içeriğin kendisinin ne zaman bozulduğunu veya daha iyi bir düzene ihtiyaç duyduğunu gözlemleyerek dinamik olarak belirlenmesidir.
Yaygın kırılma noktası örnekleri:
* Küçük telefonlar: 320px
* Telefonlar: 480px – 600px
* Tabletler: 768px – `992px
* Masaüstü: 992px – 1200px
* Büyük masaüstü: 1200px üzeri
Kapsayıcı Sorgular (Container Queries) – Gelecek ve Mevcut Durum
Geleneksel medya sorguları, tüm görüntü alanına (viewport) göre stil uygular. Ancak modern web tasarımlarında, bir bileşenin (örneğin, bir widget veya kart) kendi kapsayıcısının boyutuna göre stil değiştirmesi daha mantıklı olabilir. İşte bu noktada Kapsayıcı Sorgular (Container Queries) devreye girer.
Kapsayıcı sorguları, bir bileşenin ebeveyn elementinin boyutuna göre stil uygulamasına izin verir. Bu, daha modüler ve yeniden kullanılabilir bileşenler oluşturmayı sağlar. Örneğin, bir kart bileşeni, ana düzenin genişliğine bakılmaksızın, kendi kapsayıcısının genişliğine göre dikeyden yatay düzene geçebilir.
Kapsayıcı sorguları, CSS’in yeni ve heyecan verici bir özelliğidir ve modern tarayıcılarda desteklenmektedir. Kullanımı, @container kuralı ile gerçekleşir:
.card-container {
container-type: inline-size; / Kapsayıcının yatay boyuta göre sorgulanacağını belirtir /
container-name: card; / Kapsayıcıya bir isim verir /
}
@container card (min-width: 400px) {
.card-title {
font-size: 1.5em;
}
.card-image {
float: left;
margin-right: 1em;
}
}
Medya sorguları, genel sayfa düzeni için vazgeçilmezken, kapsayıcı sorguları, sayfa içindeki bağımsız bileşenlerin duyarlılığını sağlamak için idealdir. Bu iki özellik birbirini tamamlar ve daha esnek ve güçlü duyarlı tasarımlar oluşturmaya olanak tanır.
Medya Sorgularında En İyi Uygulamalar ve İpuçları
Meta Viewport Etiketi
Duyarlı web tasarımının çalışması için her HTML sayfasının bölümünde viewport meta etiketini bulundurmak zorunludur:
Bu etiket, tarayıcıya sayfanın cihazın ekran genişliğine göre ölçeklenmesi gerektiğini ve başlangıç yakınlaştırma seviyesinin 1.0 olması gerektiğini bildirir. Bu olmadan, mobil tarayıcılar sayfayı varsayılan olarak masaüstü genişliğinde (genellikle 980px) işleyebilir ve ardından küçültebilir, bu da medya sorgularının doğru çalışmasını engeller.
Performans Etkileri
Çok fazla medya sorgusu kullanmak veya karmaşık sorgular yazmak performans sorunlarına yol açmaz. Ancak, medya sorguları içinde büyük dosyaları (örneğin, yüksek çözünürlüklü görseller) koşullu olarak yüklerken dikkatli olmak gerekir. Gereksiz kaynakların yüklenmesini önlemek için srcset ve sizes gibi HTML özellikleri veya etiketi ile duyarlı görseller kullanmak daha etkilidir.
Test Etme ve Hata Ayıklama
Medya sorgularını test etmek için tarayıcıların geliştirici araçlarını (örneğin, Chrome DevTools’un “Responsive Design Mode” veya Firefox “Responsive Design View”) kullanmak çok önemlidir. Bu araçlar, farklı ekran boyutlarını ve cihazları simüle etmenize olanak tanır, böylece tasarımınızın çeşitli koşullarda nasıl göründüğünü kolayca görebilirsiniz.
Tarayıcı Uyumluluğu
Modern medya sorguları (özellikle prefers-color-scheme gibi kullanıcı tercihi sorguları) yeni tarayıcılarda geniş çapta desteklenirken, eski tarayıcılar bazı özelliklere sahip olmayabilir. Bu nedenle, projenizin hedef kitlesi eski tarayıcıları içeriyorsa uyumluluğu kontrol etmek ve gerektiğinde yedek (fallback) stiller sağlamak önemlidir. Can I Use gibi kaynaklar, özelliklerin tarayıcı desteğini kontrol etmek için harika araçlardır.
Örnek Senaryolar ve Kod Parçacıkları
Basit Duyarlı Navigasyon
Mobil cihazlarda menüyü yığılmış hale getirme ve masaüstünde yatay bir menü gösterme.
/ Mobil İlk Varsayılan Stiller /
.navbar {
background-color: #333;
padding: 10px;
}
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column; / Mobil varsayılan: dikey /
}
.nav-item {
margin-bottom: 5px;
}
.nav-link {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
text-align: center;
}
/ Masaüstü ve üzeri için medya sorgusu /
@media screen and (min-width: 768px) {
.nav-list {
flex-direction: row; / Masaüstü: yatay /
justify-content: flex-end;
}
.nav-item {
margin-left: 15px;
margin-bottom: 0;
}
.nav-link {
padding: 5px 10px;
}
}
Görüntü Boyutlandırma
Farklı ekran boyutlarında farklı görüntü boyutları veya çözünürlükleri kullanma.
/ Mobil varsayılan: küçük görsel /
.hero-image {
width: 100%;
height: 200px;
background-image: url('hero-small.jpg');
background-size: cover;
background-position: center;
}
/ Tabletler için: orta boy görsel /
@media screen and (min-width: 768px) {
.hero-image {
height: 300px;
background-image: url('hero-medium.jpg');
}
}
/ Masaüstü için: büyük görsel /
@media screen and (min-width: 1200px) {
.hero-image {
height: 400px;
background-image: url('hero-large.jpg');
}
}
/ Yüksek çözünürlüklü ekranlar için (Retina vb.) /
@media screen and (min-resolution: 2dppx) {
.hero-image {
background-image: url('hero-large@2x.jpg'); / Daha yüksek çözünürlüklü görsel /
}
}
Tema Değişikliği (Koyu Mod)
Kullanıcının işletim sistemi tercihine göre koyu veya açık tema uygulama.
/ Varsayılan (açık) tema stilleri /
body {
background-color: #f0f2f5;
color: #333;
font-family: Arial, sans-serif;
}
h1, h2, h3 {
color: #222;
}
.card {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/ Koyu tema için medya sorgusu /
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #e0e0e0;
}
h1, h2, h3 {
color: #f0f0f0;
}
.card {
background-color: #2c2c2c;
border-color: #444;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
a {
color: #8ab4f8; / Koyu modda daha görünür bir link rengi /
}
}
Sonuç
CSS Medya Sorguları, modern web geliştirmenin temel taşlarından biridir. Çeşitli cihazlar ve kullanıcı tercihleri için uyarlanabilir ve erişilebilir web deneyimleri oluşturmanın anahtarıdırlar. width ve height gibi temel ekran boyutlandırma özelliklerinden prefers-color-scheme ve prefers-reduced-motion gibi kullanıcı tercihlerine kadar geniş bir yelpazede özellik sunarak, geliştiricilere web sitelerini her senaryoya göre hassas bir şekilde ayarlama imkanı tanırlar. Mobil-first yaklaşımını benimsemek, iyi tanımlanmış kırılma noktaları kullanmak ve yeni nesil kapsayıcı sorguları gibi özellikleri takip etmek, geleceğe dönük ve kullanıcı dostu web siteleri inşa etmenin en iyi yollarıdır. Medya sorgularını ustaca kullanarak, her kullanıcının cihazından bağımsız olarak keyifli ve işlevsel bir deneyim yaşamasını sağlayabiliriz.