Medya özelliklerinin cihazlara yanıt vermenize olanak tanıdığı tüm yöntemlerin özeti tercihler.
Medya sorguları olmadan uyumlu tasarım mümkün olmaz. Medya sorgularından önce, kullanıcıların web sitenizi ziyaret etmek için ne tür cihazlar kullandığını öğrenmenin bir yolu yoktu. Tasarımcılar varsayımlarda bulunmak zorundaydı. Bu varsayımlar sabit genişlikli tasarımlar veya likit düzenler olarak kodlanıyordu.
Medya sorgularının kullanıma sunulmasıyla tüm bunlar değişti. Tasarımcılar ilk kez insanlarla yarı yarıda tanışabildi. Tasarımcılar, ekran düzenlerini kullanıcıların cihazlarına uygun şekilde ayarlayabildi.
Bir medya sorgusunun, isteğe bağlı ve zorunlu bir medya özelliğinden oluştuğunu unutmayın. Yıllar içinde medya türlerinde pek bir değişiklik olmadı. Daha sadece dört olası değer vardır:
@media all
@media screen
@media print
@media speech
Öte yandan, medya özellikleri büyük ölçüde gelişti. Tasarımcılar artık kullanıcıların karşısına yarı katın ötesinde kalarak tasarımları ekran boyutundan çok daha fazlasına uyacak şekilde uyarlayabiliyor.
Görünüm boyutları
Web'deki en popüler medya sorguları, görüntü alanı genişliğiyle ilgili olanlardır. Ancak burada bile bir seçenek sunuluyor. Belirli bir genişliğin altındaki stilleri uygulamak için max-width
medya özelliğini veya belirli bir genişliğin üzerindeki stilleri uygulamak için min-width
medya özelliğini kullanabilirsiniz.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Şahsen ben min-width
kullanmayı seviyorum. Düzen stillerini eklemeli bir şekilde uygularım. Önceki kuralları geri almak yerine her ayrılma noktasında yeni düzen kuralları uyguluyorum.
Bu ekleme yaklaşımı yükseklik için de işe yarar. Görüntü alanı yüksekliği arttıkça, min-height
sayesinde daha fazla kural girebilirsiniz. Örneğin, yeterli dikey alan varsa tarayıcı penceresinin en üstüne sabitlemek istediğiniz bir başlık öğeniz olabilir.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Ancak isterseniz max-height
medya özelliğini kullanabilirsiniz. Burada, başlık varsayılan olarak sabitlenir ancak yeterli dikey alan yoksa yapışkanlık kaldırılır.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
min-
ile max-
ön ekleri arasından seçim yapmak yalnızca width
ve height
için geçerli değildir. aspect-ratio
medya özelliği de aynı seçeneği sunar. Ayrıca, stilleri tam bir genişlik-yükseklik oranıyla uygulamak istiyorsanız öneksiz bir sürüm de sunar.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
Farklı en boy oranları için farklı stiller sağlamak, kısa sürede soruna yol açabilir. Bu kadar ayrıntılı bir kontrol düzeyine ihtiyacınız yoksa orientation
medya özelliği ihtiyaçlarınıza daha uygun olabilir. İki olası değeri vardır: portrait
veya landscape
.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
"Dikey" terimi, ve "yatay" genellikle mobil cihazların yönünü belirtmek için kullanılır. orientation
medya özelliği cihaza özel değildir. Tipik bir dizüstü bilgisayardaki tam ekran tarayıcı penceresinin orientation
değeri landscape
olur.
Ekranlar
Farklı ekranların, dpi
(inç başına nokta) cinsinden ölçülen farklı piksel yoğunlukları vardır. resolution
medya özelliğini kullanarak stillerinizi farklı piksel yoğunluklarına göre ayarlayabilirsiniz. aspect-ratio
gibi, resolution
için de üç çeşit vardır: minimum, maksimum ve tam.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
Hiçbir zaman resolution
medya sorgusu kullanmanız gerekmeyebilir. Piksel yoğunluğu genellikle yalnızca resimler için sorun teşkil eder. Duyarlı resimler ise piksel yoğunluğunu doğrudan HTML'de çözmenin bir yoludur.
Öte yandan, animasyonlarınızı ve geçişlerinizi CSS'de tanımlarsınız. update
medya özelliğini kullanarak bu animasyonları ve geçişleri farklı yenileme hızlarına yanıt verecek şekilde ayarlayabilirsiniz. Bu medya özelliği şu üç değerden birini bildirir: none
, slow
ve fast
.
update
değerinin none
olması, yenileme hızı olmadığı anlamına gelir. Örneğin, yazdırılmış bir sayfa güncellenemez.
update
değerinin slow
olması, ekranın hızlı bir şekilde yenilenemeyeceği anlamına gelir. E-mürekkep ekranı, yavaş yenileme hızına sahip ekranlara bir örnektir.
update
değerinin fast
olması, ekranın animasyonları ve geçişleri işleyecek kadar hızlı yenileneceği anlamına gelir.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Ekranın tüm yönleri donanım özellikleriyle ilgili değildir. Tema oluşturma modülünde, web uygulaması manifest dosyasında mülklerin nasıl tanımlanacağını öğrendiniz. display
adlı bu özelliklerden birine fullscreen
, standalone
, minimum-ui
veya browser
değerini verebilirsiniz. İlgili display-mode
medya özelliği, stillerinizi bu farklı seçeneklere göre uyarlamanıza olanak tanır.
Web uygulaması manifestinizde display
standalone
değerini sağladığınızı varsayalım. Birisi sitenizi ana ekranına eklerse site herhangi bir tarayıcı arayüzü olmadan başlatılır. Bu kullanıcılar için geri düğmesi göstermeye karar verebilirsiniz.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Renk
Cihazların renk özelliklerini sorgulamak için kullanılabilecek çok sayıda medya özelliği vardır. Yalnızca gri tonları üreten herhangi bir ekran için stillerinizi ayarlamak istiyorsanız monochrome
medya özelliğini herhangi bir değer olmadan kullanabilirsiniz.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Buna karşılık gelen bir color
medya özelliği vardır.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
Renkli ekranlar için sorguları color-gamut
, color-index
veya dynamic-range
medya özellikleriyle yazabilirsiniz. Hepsi, ekranın renk özellikleriyle ilgili belirli ayrıntıları bildiriyor.
Bu örnekte renk değerleri, ekranın maksimum parlaklık, renk derinliği ve kontrast oranı kombinasyonunu bildiren dynamic-range
medya özelliğine göre güncellenir. Olası değerler: standard
veya high
. dynamic-range
değerinin high
olduğunu bildiren yüksek tanımlı bir ekrana, yeni CSS color()
işlevi kullanılarak farklı bir renk alanı verilir.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
Etkileşim
Medya özellikleri, sitenizle etkileşime geçmek için kullanılan giriş mekanizması türünü de bildirebilir: hover
, any-hover
, pointer
ve any-pointer
. Daha fazla bilgi için etkileşimle ilgili modüle göz atın.
Tercihler
Kullanıcı tercihlerine yanıt vermenize olanak tanıyan çeşitli medya sorguları vardır: prefers-color-scheme
, prefers-contrast
ve prefers-reduced-motion
. Daha ayrıntılı bilgi için tema ve erişilebilirlik ile ilgili modüllere bakın.
Medya özelliklerini tek bir medya sorgusunda birleştirebilirsiniz. Animasyon stillerinizin kapsamını, yalnızca cihazın yenileme hızı yüksek olduğunda ve kullanıcı az hareketle ilgili bir tercih belirtmemişse uygulanacak şekilde ayarlayabilirsiniz.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Diğer medya özellikleri
Kullanıma sunulacak daha fazla medya özelliği var.
forced-colors
ve inverted-colors
medya özellikleri, bir cihazın kısıtlanmış veya ters çevrilmiş bir renk paleti kullanıp kullanmadığını bildirir.
scripting
medya özelliği, CSS'nizi JavaScript'in kullanılabilirliğine göre ayarlamanıza olanak tanır.
prefers-reduced-data
adlı medya özelliği, kullanıcıların sayaçlı bir bağlantı kullandığını belirtmesine olanak tanır. Böylece daha küçük veya daha az öğe gönderebilirsiniz.
Diğer teklifler hâlâ oluşturulma aşamasındadır. Bir sonraki ve son modülde, farklı ekran yapılandırmalarını işleyen bir medya özelliği teklifi hakkında bilgi edineceksiniz.
Öğrendiklerinizi sınayın
Medya özellikleri hakkındaki bilginizi test edin
Medya sorgusu, @media (width: 1024px)
gibi belirli bir genişlikteki cihaz olup olmadığını kontrol edebilir.
Medya sorgusu, @media (aspect-ratio: 4/3)
gibi belirli bir aspect-ratio
içindeki bir cihazı kontrol edebilir.
Geçerli renk medya sorguları nelerdir?
@media (color)
@media (min-color-index: 15000)
@media (color-gamut: srgb)
@media (dynamic-range: high)
@media (monochrome)
Aşağıdaki kullanıcı tercihi medya sorgularından hangileri geçerlidir?
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)
@media (prefers-colors: high-definition)
@media (prefers-color-scheme: dark)
@media (prefers-reduced-motion: reduce)