CSS3 - Vrste medija (Media Types)

Uvod u vrste medija

Jedna od najvažnijih karakteristika stilskih tabela je ta što možete odrediti zasebne tabele stilova za različite tipove medija. Ovo je jedan od najboljih načina za izradu web stranica prilagođenih ispisa. Samo dodijelite drugačiji stil za vrstu medija za ispis. Neka CSS svojstva dizajnirana su samo za određene medije. Na primjer, svojstvo prekida stranice odnosi se samo na stranične medije.

Međutim, postoji nekoliko svojstava koja mogu dijeliti različite vrste medija, ali mogu zahtijevati različite vrijednosti za to svojstvo. Na primjer, svojstvo veličine fonta može se koristiti i za zaslon i za medije za ispis, ali možda s različitim vrijednostima. Dokumentu je obično potreban veći font na računarskom ekranu u odnosu na papir radi bolje čitljivosti, takođe se smatraju da se fontovi bez serifa lakše čitaju na ekranu, dok su fontovi sa serifima popularni za ispis. Zbog toga je potrebno navesti da se tabela stila ili skup pravila stila odnosi na određene vrste medija.


Izrada tabela stilova zavisnih od medija

Obično se koriste tri metode za određivanje zavisnosti medija za stilske listove (style sheets):


1. metod: Korištenje @media At-pravila

Pravilo @media koristi se za definisanje različitih pravila stila za različite tipove medija u jednom stilskom listu (style sheets). Obično ga slijedi lista vrsta medija odvojena zarezima i blok CSS deklaracija koja sadrži pravila stilova za ciljni medij. Deklaracija stila u sljedećem primjeru govori pretraživaču da na ekranu prikaže sadržaj tijela u Arial fontu veličine 14px, ali u slučaju ispisa biće u fontu Timesa od 12px. Međutim, vrijednost svojstva visina linije (line-height) postavljena je na 1.2 za oboje: 

@media screen{
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS vrste medija</title>
<style>
  @media screen{
        body {
            color: #32cd32;
      font-family: Arial, sans-serif;
            font-size: 14px;
        }
    }
    @media print {
        body {
            color: #ff6347;
      font-family: Times, serif;
            font-size: 12pt;
        }
    }
    @media screen, print {
        body {
            line-height: 1.2;
        }
    }
</style>
</head>
<body>
    <h1>CSS Vrsta medija</h1>
    <p><strong> Napomena:</strong> Ako ispisujete (ili pregledate 
    ispis) ovu stranicu, izlaz HTML koda prikazuje se drugačije nego na 
    ekranu.</p>
</body>
</html>

2. metod: Korištenje @import At-pravila

Pravilo @import je još jedan način postavljanja informacija o stilu za određeni ciljni medij. Samo navedite tipove medija odvojene zarezom nakon URL-a uvezenih tabela stilova. 

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS @import pravila</title>
<style>
    @import url("/examples/css/screen.css") screen;
    @import url("/examples/css/print.css") print;
    body {
        background: #f6f6f6;
        line-height: 1.2;
    }
</style>
</head>
<body>
  <h1>Tabla stilova zavisna o medijima pomoću pravila @import At</h1>
    <p>Ako pregledate ovu stranicu, izlaz HTML koda prikazuje se 
    drugačije nego na ekranu. Budući da se za različite vrste medija 
    koriste različiti stilski listovi, tj. screen.css za zaslon računala, dok 
    print.css za medije za ispis.</p>
</body>
</html>

Tip medija za ispis u izjavi @import upućuje pretraživaču da učita eksterni list stilova (print.css) i koristi njegove stilove samo za medije štampanje.


3. metod: Upotreba elementa <link>

Atribut medija na elementu <link> koristi se za specificikaciju ciljnog medija za vanjsku tabelu stilova u HTML dokumentu. 

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Primjer HTML media atributa</title>
    <link rel="stylesheet" media="all" href="/examples/css/common.css">
    <link rel="stylesheet" media="screen" href="/examples/css/screen.css">
    <link rel="stylesheet" media="print" href="/examples/css/print.css">
</head>
<body>
  <h1>Tabele stilova zavisne od medija pomoću<code><link></code> elementa</h1>
    <p>Ako pregledate ovu stranicu, izlaz HTML koda prikazuje se 
    drugačije nego na ekranu. Budući da se za različite vrste medija 
    koriste različiti stilski listovi, tj. screen.css za zaslon računala, dok 
    print.css za medije za ispis.</p>
</body>
</html>

Različite vrste medija

Sljedeća tabela navodi različite vrste medija koje se mogu koristiti za ciljanje različitih vrsta uređaja kao što su: štampači, tableti, telefoni, računarski ekrani itd.

Vrsta medija Opis
all Koristi se za sve uređaje tipa medija.
aural Koristi se za sintetizatore govora i zvuka.
braille Koristi se za dodirne uređaje za povratnu vezu na Brajevom pismu.
embossed Koristi se za stranične brajeve štampače.
handheld Koristi se za male ili ručne uređaje - obično uređaje sa malim ekranom kao što su mobilni telefoni ili PDA uređaji.
print Koristi se za štampače.
projection Koristi se za projkciju prezentacije, na primjer za projektore.
screen Koristi se prvenstveno za računarske ekrane u boji.
tty Koristi se za medije koji koriste mrežu znakova fiksnog tona, kao što su: teletipovi, terminali ili prenosni uređaji sa ograničenim mogućnostima prikaza.
tv Koristi se za uređaje televizijskog tipa - ekrani niske rezolucije, boje, ograničene mogućnosti pomeranja, dostupan zvuk.