A leckében megismerkedünk a médiatípusok hátterével, az alkalmazásukban rejlő előnyökkel, lehetőségekkel.
A stíluslapok csatolási módjáról szóló bevezetőben már megismerkedtünk a @media szabállyal, amelynek segítségével a szabályok egyszerűen csoportosíthatók médiatípusok szerint.
Lássuk, milyen médiatípusokat használhatunk:
A screen és print médiatípusra vonatkozóan más-más beállításokat tettünk. Ezért képernyőn az oldal sötétkék háttérrel és fehér betűkkel jelenik meg, nyomtatásban fehér háttérrel és fekete betűkkel. A nyomtatásra talpas betűtípust állítottunk be, és a menüt megjelenését letiltottuk, hogy ne pazarolja a tintát nyomtatásban.
A média típusok különböző szempontok szerint csoportosíthatóak is, és a stíluslap megadásánál ezen médiacsoportok nevét is megadhatnánk.
Az alábbi táblázatban ezen médiacsoportok megnevezését láthatjuk.
Media Types | Media Groups | |||
|---|---|---|---|---|
continuous/paged | visual/audio/speech/tactile | grid/bitmap | interactive/static | |
braille | continuous | tactile | grid | both |
embossed | paged | tactile | grid | static |
handheld | both | visual, audio, speech | both | both |
paged | visual | bitmap | static | |
projection | paged | visual | bitmap | interactive |
screen | continuous | visual, audio | bitmap | both |
speech | continuous | speech | N/A | both |
tty | continuous | visual | grid | both |
tv | both | visual, audio | bitmap | both |
Vagyis például az alábbi megadás is lehetséges:
@media paged { }
@media interactive { }
Érdemes arról is beszélnünk, hogy azonos médiatípusra is adhatunk alternatív stíluslapokat, és lehetővé tehetjük, hogy a felkínált stíluslapokból a felhasználó válasszon.
Például a gyengénlátó felhasználóknak szóló, magas kontrasztú, nagy betűs változat megadható alternatív stíluslapként.
Ennek módja a következő:
A stíluslap belinkelésénél szerepeltessük az alternate értéket a rel attribútumban.
<link rel="stylesheet" type="text/css" href= "normal.css" title="Normál változat" media="screen" > <link rel="alternate stylesheet" type="text/css" href="kontraszt.css" title="Magas kontrasztú változat" media="screen" >
Egyes böngészőprogramok az alternatív stíluslapok közti váltást menüpontból lehetővé teszik, de ez nem a megfelelő módja a stílus kiválasztásának, mert:
Sokkal hasznosabb, ha a fejlesztő gondoskodik arról, hogy az alternatív stíluslap könnyen kiválasztható legyen egy ikonra/menüpontra kattintással, valamint a felhasználó választása eltárolásra kerül, így a webhelyet végig látogathatja ugyanazon alternatív stíluslappal, sőt ha legközelebb betölti az oldalt, akkor is a korábban kiválasztott stílussal jelenik meg.
Ennek megvalósításához használhatunk például olyan JavaScript-kódot, amely képes erre. Ilyen például a Working With Alternate Style Sheets ˇ An A List Apart Article oldalon közölt script is.
A működésének bemutatásához készítettünk egy egyszerű demonstrációt, amely az alábbiakban letölthető.
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Stílusváltás demó</title>
<meta charset="utf-8">
<script src="styleswitcher.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="normal.css" title="Normál" media="screen">
<link rel="alternate stylesheet" type="text/css" href="kontraszt.css" title="Kontrasztos" media="screen">
</head>
<body>
<nav>
<ul>
<li><a title="Normál megjelenés" onclick="setActiveStyleSheet('Normál'); return false;" href="#">Alapértelmezett megjelenés</a></li>
<li><a title="Magas kontrasztú változat" onclick="setActiveStyleSheet('Kontrasztos'); return false;" href="#">Magas kontrasztú változat</a></li>
</ul>
</nav>
<h1>Címsor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquam tristique nibh sit amet faucibus. Ut imperdiet sagittis lobortis. Donec viverra enim sit amet nibh condimentum, quis porttitor risus fermentum. </p>
<p>Aliquam convallis aliquet sapien, vitae placerat mauris scelerisque faucibus. Phasellus mollis tincidunt dui et blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed tempus tortor sit amet dictum laoreet. Proin et nunc nibh.</p>
<p>Sed quis metus vel ante congue pharetra a at nisi. Mauris gravida rutrum urna, id gravida lectus sagittis ac. Suspendisse tempus vestibulum fermentum. Nunc eget libero non felis ullamcorper fermentum. In malesuada vestibulum lacus ut dapibus. </p>
</body>
</html>
Láthatjuk, hogy először is belinkeltük a styleswitcher.js JavaScript állományt, ezt követően pedig az alapértelmezett és az alternatív stíluslapot. Mindegyiknél kitöltöttük a title paramétert, mert ezzel fogunk hivatkozni a stíluslapra a váltásnál.
A stíluslapváltásért felelős linkeknél a href attribútumban egy # karaktert írtunk, és az onclick paramétert a következők szerint töltöttük ki: onclick="setActiveStyleSheet('Normál'); return false;"
Láthatjuk, hogy a zárójelben azt a szöveget adtuk meg, amelyet a title paraméterben korábban szerepeltettünk a stíluslap belinkelésénél.
Normál stílus forrása:
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
background-color:white;
color:black;
}
Kontrasztos stílus forrása:
body {
font-family:Arial, Helvetica, sans-serif;
font-size:200%;
background-color:black;
color:yellow
}
a:link {
color:white
}
a:visited {
color:orange
}
a:active {
color:yellow
}
Láthatjuk, hogy a kontrasztos változatban fekete hátteret állítottunk be, a szöveg színe sárga lett. Mivel a sötét háttéren az alapértelmezett linkszínek olvashatatlanok, ezért ezeket is megadtuk.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.