HTML <style> medya özelliği

HTML <style> etiketi

Tanım ve kullanım

media Bu özellik, CSS stillerinin hedeflediği (optimize edilen) medya / cihazı belirler.

Bu özellik, stillerin belirli cihazlar (örneğin, iPhone) veya ses veya baskı medyalarına uygun olmasını sağlar.

İpucu:Bu özellik birden fazla değeri kabul edebilir.

Örnek

Örnek 1

Baskı için tanınan stilleri belirleyin:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Kişisel olarak deneyin

Örnek 2

media özelliğinin width özelliği ile iki grup stili arasındaki farkı ayırın:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Kişisel olarak deneyin

Açıklama:Bilgisayar ekranı genişliği 500 pikselden küçük olduğunda kullanılan ilk grup stilleri, 500 pikselden büyük olduğunda ise ikinci grup stilleri kullanılır.

Gramer

<style media="değer">

Olası işlevler

İşlev tanım
and Belirleme AND işlevi.
not Belirleme NOT işlevi.
, Belirleme OR işlevi.

Stilin kullanım koşulları çok ince tasarlanabilir. Öncelikle belirlenmesi gerekenler, hedeflenen cihaz türüdür. Aşağıdaki tablo, tüm tanınan değerleri özetler:

Cihaz

Cihaz tanım
all Varsayılan. Tüm cihazlar için uygundur.
aural Ses sentezleyici.
braille Braille geri bildirim cihazı.
handheld El cihazı (küçük ekran, sınırlı bant genişliği).
projection Proje cihazı.
print Baskı önizleme modu / baskı sayfası.
screen Bilgisayar ekranı.
tty Sabit aralık karakter ağırlıklı telgraf makinesi ve benzer medyalar.
tv Televizyon türü cihazlar (düşük çözünürlük, sınırlı kaydırma yeteneği).

Tarayıcı, cihaz türlerini açıklamaktan sorumludur. Bazı cihaz türleri (örneğin, screen ve print) çeşitli tarayıcılar üzerinde benzer şekilde açıklanır, ancak bazı cihazlar (örneğin, handheld) açıklamaları daha serbest olabilir. Bu nedenle, hedeflenen tarayıcının belirli cihazların açıklamaları ile kendi açıklamalarınızın uyumlu olup olmadığını doğrulamak çok önemlidir.

özellik

özellik tanım
width

hedef gösterim alanının genişliğini belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (min-width:500px)"
height

hedef gösterim alanının yüksekliğini belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (max-height:700px)"
device-width

hedef ekran/papuğun genişliğini belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (device-width:500px)"
device-height

hedef ekran/papuğun yüksekliğini belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (device-height:500px)"
orientation

hedef ekran/papuğun yönünü belirler.

desteklenen değerler: portrait veya landscape'dir.

Bu özellik kısıtlama kelimesi içermemektedir.

örneğin: media="all and (orientation: landscape)"
aspect-ratio

hedef gösterim alanının genişliği/yüksekliği oranını belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

hedef ekran/papuğun cihaz genişliği/cihaz yüksekliği oranını belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (aspect-ratio:16/9)"
color

hedef ekranın her rengin bit sayısını belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (color:3)"
color-index

hedef ekranın işleyebileceği renk sayısını belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (min-color-index:256)"
monochrome

monokrom çerçeve buffer'ında her pikselin bit sayısını belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="screen and (monochrome:2)"
resolution

hedef ekran/papuğun piksel yoğunluğunu (dpi veya dpcm) belirler.

"min-" ve "max-" öneklerini kullanabilirsiniz.

örneğin: media="print and (resolution:300dpi)"
scan

televizyonun tarayım modunu belirler.

desteklenen değerler progressive ve interlace'dir.

Bu özellik kısıtlama kelimesi içermemektedir.

örneğin: media="tv and (scan:interlace)"
grid

Çıktı cihazının ağlı olup olmadığını belirler.

Ağlı cihazlar, içerikleri sabit bir ağ üzerinde gösterir, örneğin karakter tabanlı terminal ve tek satırlı gösterge cihazları.

Desteklenen değerler 0 ve 1'dir (1, ağlı cihazları temsil eder).

Bu özellik kısıtlama kelimesi içermemektedir.

örneğin: media="handheld and (grid:1)"

width gibi özellikler genellikle min ve max kelimeleriyle birlikte kullanılır. Bu kelimeler kullanılmazsa, stillerin kullanımı çok kesin bir pencere boyutuna bağlı olabilir, ancak bu kelimeler eklenirse koşullar daha esnek hale gelir.

Yukarıdaki tablo, kullanılabilir çeşitli özellikleri listeler ve açıklar. Aksi belirtilmediği takdirde, bu özellikler min- ve max- ile değiştirilebilir ve bu da eşiğe değil, kesin bir değere işaret eder.

Tarayıcılar, bu özelliklerin ne olduğunu ve bu özelliklerin ne zaman var olduğunu ve kullanılabileceğini anlamak ve tanımlamakla sorumludur. Bu özelliklere stil uygulamak için tamamen kapsamlı testler yapmak ve beklenmeyen özelliklerin kullanılamadığı durumlarda alternatif stiller hazırlamak gerekir.

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek

HTML <style> etiketi