CSS Medya Sorgusu, CSS’yi yalnızca tarayıcı ve cihaz ortamı belirttiğiniz bir kuralla eşleştiğinde, örneğin “görüntü alanı 480 pikselden daha geniş olduğunda” uygulamanız için bir yol sunar. Ortam sorguları, görüntü alanının boyutuna bağlı olarak farklı düzenler oluşturmanıza olanak sağladığından duyarlı web tasarımının önemli bir parçasıdır, ancak sitenizin çalıştığı ortamla ilgili diğer şeyleri, örneğin kullanıcının fare yerine dokunmatik ekran kullanıp kullanmadığını tespit etmek için de kullanılabilirler. Bu derste önce medya sorgularında kullanılan sözdizimi hakkında bilgi edinecek ve ardından basit bir tasarımın nasıl duyarlı hale getirilebileceğini gösteren çalışılmış bir örnekte bunları kullanmaya devam edeceksiniz.
| Ön Koşullar: | HTML temelleri (HTML’ye Giriş bölümünü çalışın) ve CSS’nin nasıl çalıştığına dair bir fikir (CSS ilk adımlar ve CSS yapı taşları bölümlerini çalışın). |
|---|
Medya Sorgusu Temelleri
En basit medya sorgusu sözdizimi şu şekildedir:
@media media-type and (media-feature-rule) {
/* CSS kuralları buraya */
}
Aşağıdakilerden oluşur:
- Tarayıcıya bu kodun ne tür bir ortam için olduğunu söyleyen bir ortam türü (örn. baskı veya ekran).
- İçerdiği CSS’nin uygulanması için geçilmesi gereken bir kural veya test olan medya ifadesi.
- Test geçerse ve ortam türü doğruysa uygulanacak bir CSS kuralları kümesi.
Medya türleri
Belirleyebileceğiniz olası medya türleri şunlardır:
allprintscreen
Aşağıdaki medya sorgusu, sayfa yazdırıldığında gövdeyi yalnızca 12 punto olarak ayarlayacaktır. Sayfa bir tarayıcıya yüklendiğinde geçerli olmayacaktır.
@media print {
body {
font-size: 12pt;
}
}
Not: Buradaki medya türü, MIME türü olarak adlandırılan türden farklıdır.
Not: Seviye 3 Ortam Sorguları spesifikasyonunda tanımlanan bir dizi başka ortam türü vardı; bunlar kullanımdan kaldırılmıştır ve bunlardan kaçınılmalıdır.
Not: Medya türleri isteğe bağlıdır; medya sorgunuzda bir medya türü belirtmezseniz, medya sorgusu varsayılan olarak tüm medya türleri için olacaktır.
Medya özellik kuralları
Türü belirledikten sonra, bir kural ile bir medya özelliğini hedefleyebilirsiniz.
Genişlik ve yükseklik
Duyarlı tasarımlar oluşturmak için en sık tespit etme eğiliminde olduğumuz (ve yaygın tarayıcı desteğine sahip olan) özellik görünüm alanı genişliğidir ve görünüm alanı belirli bir genişliğin üstünde veya altındaysa – veya tam bir genişlikse – min-width, max-width ve width media özelliklerini kullanarak CSS uygulayabiliriz.
Bu özellikler, farklı ekran boyutlarına yanıt veren düzenler oluşturmak için kullanılır. Örneğin, görüntü alanı tam olarak 600 piksel ise gövde metin rengini kırmızı olarak değiştirmek için aşağıdaki medya sorgusunu kullanırsınız.
@media screen and (width: 600px) {
body {
color: red;
}
}
Copy to Clipboard
Open this example in the browser, or view the source.
The width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 600 pixels, use max-width:
@media screen and (max-width: 600px) {
body {
color: blue;
}
}
Bu örneği tarayıcıda açın veya kaynağı görüntüleyin.
Pratikte, minimum veya maksimum değerleri kullanmak duyarlı tasarım için çok daha kullanışlıdır, bu nedenle genişlik veya yüksekliğin tek başına kullanıldığını nadiren görürsünüz.
Medya sorguları spesifikasyonunun Seviye 4 ve 5’inde tanıtılan yeni özelliklerden bazıları sınırlı tarayıcı desteğine sahip olsa da, test edebileceğiniz bir dizi başka medya özelliği vardır.
Oryantasyon
İyi desteklenen bir medya özelliği, dikey veya yatay mod için test yapmamızı sağlayan oryantasyondur. Cihaz yatay yöndeyse gövde metni rengini değiştirmek için aşağıdaki medya sorgusunu kullanın.
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
Standart bir masaüstü görünümü yatay yöne sahiptir ve bu yönde iyi çalışan bir tasarım, dikey modda bir telefon veya tablette görüntülendiğinde o kadar iyi çalışmayabilir. Yönlendirme testi, dikey moddaki cihazlar için optimize edilmiş bir düzen oluşturmanıza yardımcı olabilir.
İşaretleme cihazlarının kullanımı
Seviye 4 spesifikasyonunun bir parçası olarak, hover medya özelliği tanıtıldı. Bu özellik, kullanıcının bir öğenin üzerine gelme yeteneğine sahip olup olmadığını test edebileceğiniz anlamına gelir, bu da esasen bir tür işaretleme cihazı kullandıkları anlamına gelir; dokunmatik ekran ve klavyede gezinme sayılmaz.
@media (hover: hover) {
body {
color: rebeccapurple;
}
}
Bu örneği tarayıcıda açın veya kaynağı görüntüleyin.
Kullanıcının üzerine gelemeyeceğini biliyorsak, bazı etkileşimli özellikleri varsayılan olarak görüntüleyebiliriz. Hover yapabilen kullanıcılar için, bir bağlantının üzerine gelindiğinde bunları kullanılabilir hale getirmeyi seçebiliriz.
Ayrıca Seviye 4’te pointer medya özelliği de bulunmaktadır. Bu özellik üç olası değer alır: none (yok), fine (ince) ve coarse (kaba). İnce işaretçi fare veya trackpad gibi bir şeydir. Kullanıcının küçük bir alanı hassas bir şekilde hedeflemesini sağlar. Kaba işaretçi, dokunmatik ekrandaki parmağınızdır. None değeri, kullanıcının herhangi bir işaretleme aygıtına sahip olmadığı anlamına gelir; belki de yalnızca klavyeyle veya sesli komutlarla geziniyorlardır.
İşaretçi kullanmak, kullanıcının ekranla kurduğu etkileşim türüne yanıt veren daha iyi arayüzler tasarlamanıza yardımcı olabilir. Örneğin, kullanıcının cihazla dokunmatik ekran olarak etkileşime girdiğini biliyorsanız daha büyük dokunma alanları oluşturabilirsiniz.
Daha karmaşık medya sorguları
Tüm farklı olası medya sorgularıyla, bunları birleştirmek veya sorgu listeleri oluşturmak isteyebilirsiniz – bunlardan herhangi biri eşleştirilebilir.
Medya sorgularında “and” mantığı
Medya özelliklerini birleştirmek için, yukarıda bir medya türünü ve özelliğini birleştirmek için kullandığımız gibi “and” kullanabilirsiniz. Örneğin, minimum genişlik ve yönelim için test yapmak isteyebiliriz. Gövde metni yalnızca görüntü alanı en az 600 piksel genişliğindeyse ve cihaz yatay moddaysa mavi olacaktır.
@media screen and (min-width: 600px) and (orientation: landscape) {
body {
color: blue;
}
}
Medya sorgularında “or” mantığı
Herhangi bir şey ile eşleşebilecek bir dizi sorguya sahipseniz, bu sorguları virgülle ayırabilirsiniz. Aşağıdaki örnekte, görüntü alanı en az 600 piksel genişliğinde VEYA cihaz yatay yöndeyse metin mavi olacaktır. Bunlardan herhangi biri doğruysa sorgu eşleşir.
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}
medya sorgularında “not” mantığı
“not” operatörünü kullanarak bir medya sorgusunun tamamını olumsuzlayabilirsiniz. Bu, tüm medya sorgusunun anlamını tersine çevirir. Bu nedenle, bir sonraki örnekte metin yalnızca yönlendirme dikey ise mavi olacaktır.
@media not all and (orientation: landscape) {
body {
color: blue;
}
}
Kesme noktaları nasıl seçilir
Duyarlı tasarımın ilk günlerinde, birçok tasarımcı çok özel ekran boyutlarını hedeflemeye çalışırdı. Popüler telefon ve tabletlerin ekran boyutlarını gösteren listeler yayınlanarak tasarımların bu görüntü alanlarına uygun şekilde oluşturulması sağlanırdı.
Artık bunu mümkün kılamayacak kadar çok sayıda ve çok çeşitli boyutlarda cihaz var. Bu, tüm tasarımlar için belirli boyutları hedeflemek yerine, içeriğin bir şekilde bozulmaya başladığı boyutta tasarımı değiştirmenin daha iyi bir yaklaşım olduğu anlamına gelir. Belki de satır uzunlukları çok fazla uzar veya kutulu bir kenar çubuğu ezilir ve okunması zorlaşır. İşte bu noktada, tasarımı elinizdeki alan için daha iyi bir tasarımla değiştirmek üzere bir medya sorgusu kullanmak istersiniz. Bu yaklaşım, kullanılan cihazın tam boyutlarının ne olduğunun önemli olmadığı, her aralığa hitap edildiği anlamına gelir. Bir medya sorgusunun tanıtıldığı noktalar kesme noktaları (breakpoints) olarak bilinir.
Firefox DevTools’taki Duyarlı Tasarım Modu, bu kesme noktalarının nereye gitmesi gerektiğini bulmak için çok kullanışlıdır. Bir medya sorgusu ekleyerek ve tasarımda ince ayar yaparak içeriğin nerede iyileştirileceğini görmek için görüntü alanını kolayca küçültüp büyütebilirsiniz.
Aktif öğrenme: mobil öncelikli duyarlı tasarım
Genel olarak, duyarlı bir tasarım için iki yaklaşım benimseyebilirsiniz. Masaüstü veya en geniş görünümle başlayabilir ve ardından görüntü alanı küçüldükçe nesneleri hareket ettirmek için kesme noktaları ekleyebilirsiniz ya da en küçük görünümle başlayabilir ve görüntü alanı büyüdükçe düzen ekleyebilirsiniz. Bu ikinci yaklaşım mobil ilk duyarlı tasarım olarak tanımlanır ve genellikle izlenecek en iyi yaklaşımdır.
En küçük cihazlar için görünüm genellikle normal akışta göründüğü gibi basit tek bir içerik sütunudur. Bu, küçük cihazlar için muhtemelen çok fazla düzen yapmanıza gerek olmadığı anlamına gelir – kaynağınızı iyi düzenlerseniz varsayılan olarak okunabilir bir düzene sahip olursunuz.
Aşağıdaki kılavuz, bu yaklaşımı çok basit bir düzenle ele almaktadır. Bir hazır sitede medya sorgularınızda ayarlamanız gereken daha fazla şey olması muhtemeldir, ancak yaklaşım tamamen aynı olacaktır.
İzlenecek yol: mobil öncelikli basit bir düzen
Başlangıç noktamız, düzenin çeşitli kısımlarına arka plan renkleri eklemek için bazı CSS’lerin uygulandığı bir HTML belgesidir.
* {
box-sizing: border-box;
}
body {
width: 90%;
margin: 2em auto;
font: 1em/1.3 Arial, Helvetica, sans-serif;
}
a:link,
a:visited {
color: #333;
}
nav ul,
aside ul {
list-style: none;
padding: 0;
}
nav a:link,
nav a:visited {
background-color: rgba(207, 232, 220, 0.2);
border: 2px solid rgb(79, 185, 227);
text-decoration: none;
display: block;
padding: 10px;
color: #333;
font-weight: bold;
}
nav a:hover {
background-color: rgba(207, 232, 220, 0.7);
}
.related {
background-color: rgba(79, 185, 227, 0.3);
border: 1px solid rgb(79, 185, 227);
padding: 10px;
}
.sidebar {
background-color: rgba(207, 232, 220, 0.5);
padding: 10px;
}
article {
margin-bottom: 1em;
}
Düzende herhangi bir değişiklik yapmadık, ancak belgenin kaynağı içeriği okunabilir kılacak şekilde sıralandı. Bu önemli bir ilk adımdır ve içeriğin bir ekran okuyucu tarafından okunması durumunda anlaşılabilir olmasını sağlar.
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Meet the team</a></li>
<li><a href="">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article>
<div class="content">
<h1>Veggies!</h1>
<p>
...
</p>
</div>
<aside class="related">
<p>
...
</p>
</aside>
</article>
<aside class="sidebar">
<h2>External vegetable-based links</h2>
<ul>
<li>
...
</li>
</ul>
</aside>
</main>
<footer><p>©2019</p></footer>
</div>
</body>
Bu basit düzen mobil cihazlarda da iyi çalışır. Düzeni DevTools’ta Duyarlı Tasarım Modunda görüntüleyecek olursak, sitenin basit bir mobil görünümü olarak oldukça iyi çalıştığını görebiliriz.
Tarayıcıda 1. adımı açın veya kaynağı görüntüleyin.
Eğer bu örneği takip etmek ve uygulamak istiyorsanız, bilgisayarınızda step1.html dosyasının yerel bir kopyasını oluşturun.
Bu noktadan itibaren, Duyarlı Tasarım Modu görünümünü, satır uzunluklarının oldukça uzadığını ve navigasyonun yatay bir çizgi halinde görüntülenmesi için yerimiz olduğunu görene kadar daha geniş olacak şekilde sürüklemeye başlayın. İlk medya sorgumuzu burada ekleyeceğiz. ems kullanacağız, çünkü bu, kullanıcı metin boyutunu artırmışsa kesme noktasının benzer bir satır uzunluğunda ancak daha küçük metin boyutuna sahip birinden daha geniş bir görüntü alanında gerçekleşeceği anlamına gelecektir.
Aşağıdaki kodu step1.html CSS dosyanızın en altına ekleyin.
@media screen and (min-width: 40em) {
article {
display: grid;
grid-template-columns: 3fr 1fr;
column-gap: 20px;
}
nav ul {
display: flex;
}
nav li {
flex: 1;
}
}
Bu CSS bize makalenin içinde, makale içeriğinin ve kenardaki öğedeki ilgili bilgilerin iki sütunlu bir düzenini verir. Ayrıca navigasyonu bir satıra yerleştirmek için flexbox kullandık.
Tarayıcıda 2. adımı açın veya kaynağı görüntüleyin.
Kenar çubuğunun da yeni bir sütun oluşturması için yeterli alan olduğunu hissedene kadar genişliği arttırmaya devam edelim. Bir medya sorgusu içinde ana öğeyi iki sütunlu bir ızgara haline getireceğiz. Ardından, iki kenar çubuğunun birbiriyle hizalanması için makaledeki margin-bottom’ı kaldırmamız gerekiyor ve altbilginin üstüne bir kenarlık ekleyeceğiz. Tipik olarak bu küçük değişiklikler, tasarımın her kesme noktasında iyi görünmesini sağlamak için yapacağınız türden şeylerdir.
Yine, step1.html CSS dosyanızın en altına aşağıdaki kodu ekleyin.
@media screen and (min-width: 70em) {
main {
display: grid;
grid-template-columns: 3fr 1fr;
column-gap: 20px;
}
article {
margin-bottom: 0;
}
footer {
border-top: 1px solid #ccc;
margin-top: 2em;
}
}
Tarayıcıda 3. adımı açın veya kaynağı görüntüleyin.
Son örneğe farklı genişliklerde bakarsanız, tasarımın mevcut genişliğe bağlı olarak tek sütun, iki sütun veya üç sütun olarak nasıl yanıt verdiğini ve çalıştığını görebilirsiniz. Bu, mobil öncelikli duyarlı tasarımın çok basit bir örneğidir.
Viewport meta etiketi
Yukarıdaki örnekte HTML kaynağına bakarsanız, belgenin baş kısmında aşağıdaki öğenin yer aldığını görürsünüz:
<meta name="viewport" content="width=device-width,initial-scale=1">
Bu viewport meta etiketidir – mobil tarayıcıların içeriği nasıl işlediğini kontrol etmenin bir yolu olarak vardır. Bu gereklidir çünkü varsayılan olarak çoğu mobil tarayıcı görünüm alanı genişliği konusunda yalan söyler. Yanıt vermeyen siteler genellikle dar bir görüntü alanında işlendiğinde gerçekten kötü görünür, bu nedenle mobil tarayıcılar genellikle siteyi varsayılan olarak gerçek cihaz genişliğinden daha geniş bir görüntü alanı genişliğiyle (genellikle 980 piksel) işler ve ardından işlenen sonucu ekrana sığacak şekilde küçültür.
Tüm bunlar iyi ve güzel, ancak duyarlı sitelerin beklendiği gibi çalışmayacağı anlamına geliyor. Görüntü alanı genişliği 980 piksel olarak bildirilirse, mobil düzenler (örneğin @media screen and (max-width: 600px) { … }) beklendiği gibi işlenmeyecektir.
Bunu düzeltmek için, sayfanıza yukarıdaki gibi bir görünüm alanı meta etiketi eklemek tarayıcıya “içeriği 980 piksel görünüm alanı ile işleme – bunun yerine gerçek cihaz genişliğini kullanarak işle ve daha iyi tutarlılık için varsayılan bir başlangıç ölçek düzeyi ayarla” der. Ardından medya sorguları beklendiği gibi devreye girecektir.
Viewport meta etiketinin içerik niteliğinin içine koyabileceğiniz bir dizi başka seçenek de vardır.
Gerçekten de bir medya sorgusuna ihtiyacınız var mı?
Flexbox, Grid ve çok sütunlu düzen, medya sorgusuna ihtiyaç duymadan esnek ve hatta duyarlı bileşenler oluşturmanın yollarını sunar. Bu düzen yöntemlerinin medya sorguları eklemeden istediğinizi elde edip edemeyeceğini düşünmek her zaman faydalı olacaktır. Örneğin, en az 200 piksel genişliğinde bir dizi kart isteyebilirsiniz ve bu 200 pikselin çoğu ana makaleye sığacaktır. Bu, hiçbir medya sorgusu kullanmadan ızgara düzeni ile elde edilebilir.
Bu, aşağıdakiler kullanılarak gerçekleştirilebilir:
<ul class="grid">
<li>
<h2>Card 1</h2>
<p>...</p>
</li>
<li>
<h2>Card 2</h2>
<p>...</p>
</li>
<li>
<h2>Card 3</h2>
<p>...</p>
</li>
<li>
<h2>Card 4</h2>
<p>...</p>
</li>
<li>
<h2>Card 5</h2>
<p>...</p>
</li>
</ul>
.grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.grid li {
border: 1px solid #666;
padding: 10px;
}
Copy to Clipboard
Izgara düzeni örneğini tarayıcıda açın veya kaynağı görüntüleyin.
Örnek tarayıcınızda açıkken, sütun izlerinin sayısının değiştiğini görmek için ekranı genişletin ve daraltın. Bu yöntemin güzel yanı, grid’in görüntü alanı genişliğine değil, bu bileşen için mevcut olan genişliğe bakmasıdır. Medya sorgularıyla ilgili bir bölümü buna hiç ihtiyacınız olmayabileceğine dair bir öneriyle tamamlamak garip görünebilir! Ancak pratikte, medya sorguları ile geliştirilmiş modern düzen yöntemlerinin iyi kullanımının en iyi sonuçları vereceğini göreceksiniz.
Özet
Bu içerikte medya sorgularını öğrendiniz ve mobil öncelikli duyarlı bir tasarım oluşturmak için bunları pratikte nasıl kullanacağınızı keşfettiniz.
Daha fazla medya sorgusu test etmek için burada oluşturduğumuz başlangıç noktasını kullanabilirsiniz. Örneğin, ziyaretçinin kaba bir işaretçiye sahip olduğunu tespit ederseniz, işaretçi medya özelliğini kullanarak navigasyonun boyutunu değiştirebilirsiniz.
Ayrıca farklı bileşenler ekleyerek ve bir medya sorgusu eklemenin ya da flexbox veya grid gibi bir düzen yöntemi kullanmanın bileşenleri duyarlı hale getirmek için en uygun yol olup olmadığını deneyebilirsiniz. Çoğu zaman doğru ya da yanlış bir yol yoktur – tasarımınız ve içeriğiniz için hangisinin en uygun olduğunu deneyerek görmelisiniz.