Codecourse

Daşıyıcıların tipi

Müxtəlif platforma və qurğuların geniş inkişafı tərtibatçılardan saytların müxtəlif versiyalarını hazırlamağı tələb edir ki, bu da kifayət qədər zəhmət tələb edən və problemli bir məsələdir. Zaman və tələblər dəyişdikcə müxtəlif qurğular üçün saytların yaradılması zərurətə çevrilir. Buna görə CSS-ə daşıyıcı tipi anlayışı daxil edilib, yəni stil yalnız müəyyən qurğu üçün tətbiq olunur. Aşağıdakı cədvəldə bəzi daşıyıcı tipləri göstərilib:


Tip Təsvir
all Bütün tiplər. Bu qiymət başlanğıc ayar kimi istifadə olunur.
aural Məsələn, səsli brauzerləri bu tipə aid etmək olar.
braille Görmə məhdudiyyəti olan insanlar üçün Brayl sisteminə əsaslanan qurğular.
handheld Cib qurğuları üçün nəzərdə tutulub.
print Printer
projection Proyektor
screen Monitor
tv Televizor

CSS-də daşıyıcı tipini göstərmək üçün @import@media komandalarından istifadə olunur.

@import komandası vasitəsilə stilin importu zamanı daşıyıcının tipi faylın ünvanından sonra göstərilir. Həmçinin bir neçə daşıyıcı tipini göstərmək olar, bunun üçün sadəcə onları bir-birindən vergüllə ayırmaq lazımdır.

<!DOCTYPE HTML>
<html>
 <head>
  <title>Stilin importu</title>
  <meta charset="utf-8">
  <style>
    @import "/style/main.css" screen; /* Nəticəni monitora çıxarmaq üçün stil faylı */
    @import "/style/smart.css" print, handheld; /* Smartfon və printer üçün stil faylı */
  </style>
 </head>
 <body>
   <p>...</p>
 </body>
</html>

Yuxarıdakı nümunədə iki stil faylı import olunur: main.css səhifəyə kompüterin ekranına baxdıqda, smart.css isə səhifənin çap edilməsi və smartfonda göstərilməsi üçün nəzərdə tutulub.

@media komandası qlobal və kənar stillər üçün daşıyıcının tipini göstərməyə imkan verir və sintaksisi aşağıdakı kimidir:

@media birinci daşıyıcı tipi {
  Birinci daşıyıcı tipi üçün daşıyıcının təsviri
}
@media ikinci daşıyıcı tipi {
  İkinci daşıyıcı tipi üçün daşıyıcının təsviri
}

Çox vaxt @media komandası vasitəsilə yaradılan stil faylı qurğuların tipi üzrə bloklara bölünür. Bəzən isə bir neçə müxtəlif stil faylı (çap və ya monitor üçün) yaratmaq və onları səhifəyə qoşmaq gərəkdir. Bu halda <link> teqi və onun media parametrindən istifadə etmək lazımdır.

<!DOCTYPE HTML>
<html>
 <head>
  <title>Müxtəlif daşıyıcılar</title>
  <meta charset="utf-8">
  <link media="print, handheld" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main.css">
 </head>
 <body>
   <p>...</p>
 </body>
</html>

Yuxarıdakı nümunədə istifadə edilmiş iki kənar stil faylından biri səhifənin ekranda göstərilməsinə, digəri isə çap edilməsi və smartfonda göstərilməsinə xidmət edir. Səhifəyə eyni anda iki müxtəlif stil faylının yüklənməsinə baxmayaraq, onlar yalnız müəyyən qurğular üçün tətbiq olunur.

Növbəti dərsi seçib keçid düyməsinə sıxın: