CSS-mediatyypit ja mediakyselyt
Tutustutaan mediatyyppeihin ja mediakyselyihin joilla voi kustomoida CSS-tyylejä eri ympäristöihin.
Mediatyypit
- Mediatyyppien tarkoituksena on mahdollistaa sivun ulkoasun määrittely mediakohtaisesti.
- Esimerkiksi WWW-dokumentti voidaan muotoilla erilaisilla mediatyypeillä eri tavalla paperille kuin näytölle.
- Hyötynä tästä saavutetaan, että jokaista mediaa varten voidaan tehdä omat tyylimääritykset, jotka mahdollistavat tiedon tehokkaan saamisen useamman median kautta.
Erilaisia mediatyyppejä
- all-tyyppiin voidaan määritellä asetuksia kaikille laitteille.
- print-tyyppiin voidaan määritellä asetuksia tulostusta varten.
- screen-tyyppiin voidaan määritellä asetuksia tavallista tietokoneen näyttöä varten.
- speech-tyyppiin voidaan määritellä asetuksia puhesyntetisaattoreille.
Mediatyypin määritys
Mediatyyppi voidaan määrittää link-elementillä:
<link rel="StyleSheet" href="print.css" type="text/css" media="print" />
Mediatyyppi voidaan määrätä myös CSS-tiedostossa:
@media print {
.. tähän väliin kaikki print-mediaan liittyvät tyylit
}
Muiden kuin all-median tyyppisten tyylien linkityksessä täytyy huomioida se, ettei niiden jälkeen linkitetä enää all-median tyylejä, koska muuten all-median tyylit ylikirjoittaisivat muiden mediatyyppien tyylimääritykset.
HUOM! print-mediatyypille ei kannata koskaan määrittää titleä, koska silloin se ei ole aina käytössä (persistent), jolloin selaimet eivät osaa ottaa sitä automaattisesti käyttöön valittaessa tulostuksen esikatselu.
Media Queries
Uusinta uutta ovat mediakyselyt (Media Queries), joilla voidaan tarkentaa mediatyyppiä ja siihen liittyviä ominaisuuksia.
Mediakyselyiden avulla käytettävä tyylitiedosto voidaan määritellä esimerkiksi seuraavien perusteiden mukaan:
- Näyttöalueen koko (leveys ja korkeus)
- Tulostuspaperin koko
- Median suunta (pysty tai vaaka)
- Median kuvasuhde
- Median värimäärä
- Median resoluutio
Tärkein ja eniten käytetty ominaisuus mediakyselyissä on näytön leveys. Tähän voidaan reagoida esim. seuraavilla tavoilla:
/* näytön on oltava vähintään 300 pikseliä leveä */
@media all and (min-width: 300px) {
/* tänne tulevat kaikki halutut tyylimäärittelyt */
}
/* näytön on oltava enintään 500 pikseliä leveä */
@media all and (max-width: 500px) {
/* tänne tulevat kaikki halutut tyylimäärittelyt */
}
Kapeissa näytöissä kannattaa yleensä purkaa monimutkaisia asemointeja ja sijoittaa elementtejä mieluummin peräkkäin kuin vierekkäin. Esim. poistetaan navigointipalkki näytön laidasta ja sijoitetaankin se keskelle. Sivusuuntaista skrollausta pitää aina välttää
nav {
float: right;
background-color: green;
width: 15%;
}
header, footer {
background-color: yellow;
}
/* seuraavassa on esimerkkejä asioista joita voi mediakyselyillä tehdä */
@media all and ( max-width: 500px ) {
/* Palautetaan navigointi koko sivun levyiseksi */
nav {
float: none;
width: 100%;
}
/* rajataan kuvat maksimissaan sivun levyisiksi */
img {
max-width: 100%;
}
/* piilotetaan koko yläpalkki */
header {
display: none;
}
pre {
overflow: scroll;
}
}
@media all {
p {
color: black;
background-color: white;
}
}
@media all and (min-width: 300px) {
p {
color: white;
background-color: black;
}
}
@media all and (min-width: 600px) {
p {
color: red;
background-color: yellow;
}
}
@media all and (min-width: 900px) {
p {
color: green;
background-color: silver;
}
}
Esimerkki 3, missä vaihdetaan käyttäjälle kapeille näytöille sopiva tyylitiedosto käyttöön selainikkunan leveyden mennessä riittävän kapeaksi.
Sivun ominaisuuksia
Sivun ominaisuuksilla voidaan hallita dokumenttia sivutettuna. Seuraavassa muutamia sivuttamiseen liittyviä ominaisuuksia.
- page-break-before-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen ennen lohkoa.
- page-break-after-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen lohkon jälkeen.
- page-break-inside-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen lohkon sisällä.
- Sivunvaihdon esiintyminen voidaan kieltää arvolla avoid ja sivunvaihto voidaan pakottaa arvolla always.
Esimerkkejä mediatyyppien käytöstä
- Kurssin kotisivuja tulostettaessa jätetään tulosteista pois navigointipalkit
sekä pyritään välttämään sivunvaihtoa asiakirjan eri rakenteissa. Tämä on toteutettu seuraavilla CSS-määrittelyillä.
@media print { /* auto automaattinen always sivunvaihto aina ennen elementtiä avoid sivunvaihtoa ei ennen elementtiä left pakota sivunvaihtoja niin, että seuraava sivu on vasen right pakota sivunvaihtoja niin, että seuraava sivu on oikea */ h1, h2, h3 { page-break-after: avoid; page-break-inside: avoid; } ul, ol, dl { page-break-before: avoid; } img { page-break-inside: avoid; } .navbar, .navbartop { display: none; } }
-
Tarkempi esimerkki speech-mediatyypin määrittelyistä: speech.css.
Viewport
Mobiililaitteet olettavat sivujen olevan leveämpiä kuin niiden näytöt ovat. Esim. Applen laitteet olettavat sivujen olevan 980 pikseliä leveitä ja zoomailevat ja sovittavat niitä tämän oletuksen mukaan omaan näyttöönsä. Jos sivu on kuitenkin suunniteltu responsiiviseksi niin laitteen oma arvailu vain huonontaa sivun esitystä...
Mobiililaitteissa ja muissa pieninäyttöisissä laitteissa responsiivisuutta voidaan parantaa käyttämällä viewport-määritystä:
<meta name="viewport" content="width=device-width, initial-scale=1 /">
- width tarkoittaa sivun oletuskokoa CSS-pikseleinä. Jos suinkin mahdollista niin kannattaa käyttää arvoa device-width, joka on ympäristön todellinen koko eikä jotain kiinteää kokoa.
- initial-scale asettaa sivun oletuszoomaustason
- Muita mahdollisia asetuksia ovat maximum-scale, minimum-scale ja user-scalable
- Responsive Meta Tag
Jos teet responsiivisen sivun niin käytä viewport-määritystä :<meta name="viewport" content="width=device-width, initial-scale=1" />. Jos et tee responsiivista sivua niin älä käytä mitään viewport-määrityksiä.
Mobiililaitteiden ja muiden erittäin tarkoilla näytöillä varustettujen laitteiden näytöissä pikselit voivat olla turhankin pieniä. Jos sivun ulkoasu on määritelty pikseleinä niin teksti voi olla tarkassa näytössä lukukelvottoman pientä. Tästä syystä monet selaimet skaalaavat automaattisesti tekstin kokoa tarkoissa näytöissä. Aihetta on selitetty tarkemmin artikkeleissa: A pixel is not a pixel is not a pixel
Lisätietoa
- Media Queries
- CSS media queries
- Use CSS media queries for responsiveness
- Using the viewport meta tag to control layout on mobile browsers
- Viewport META element
- Mobile Web Application Best Practices
- A tale of two viewports - part one
- A tale of two viewports - part two
- CSS Device Adaptation
- Responsive Web Design Basics
Käyttäjien kommentit