CSS-mediatyypit ja mediakyselyt

Tutustutaan mediatyyppeihin ja mediakyselyihin, joilla samasta dokumentista saadaan erilainen eri ympäristöissä: kapealla ja leveällä näytöllä, tulostettuna ja käyttäjän omien asetusten mukaan.

Tämä luento jatkaa CSS-luennon asioita. Erityisesti kaskadi ja mittayksiköt kannattaa olla mielessä.

1. Mediatyypit

Mediatyypillä kerrotaan, millaiselle laitteelle tyylit on tarkoitettu. Samasta dokumentista voidaan siis tehdä erinäköinen paperille kuin näytölle, ilman että sisältöä tarvitsee kirjoittaa kahteen kertaan.

1.1 Käytettävissä olevat mediatyypit

1.2 Mediatyypin määrittäminen

Tyylit voidaan kohdistaa kahdella tavalla. Ensimmäinen on link-elementin media-attribuutti:

<link rel="stylesheet" href="tulostus.css" media="print" />

Toinen on @media-sääntö tyylitiedoston sisällä. Tämä on nykyisin tavallisempi, koska kaikki tyylit pysyvät yhdessä tiedostossa:

@media print {
  /* tähän kaikki tulostukseen liittyvät tyylit */
}

2. Mediakyselyt

Mediakyselyllä (media query) tarkennetaan, millaisessa tilanteessa tyylejä käytetään. Kysely on ollut W3C:n suositus vuodesta 2012, ja se on nykyisin responsiivisen sivun perustyökalu.

Kyselyllä voi tarkastella muun muassa näyttöalueen leveyttä ja korkeutta, median suuntaa (pysty vai vaaka), kuvasuhdetta, resoluutiota sekä käyttäjän omia asetuksia. Ylivoimaisesti käytetyin on leveys.

2.1 Leveyteen perustuvat kyselyt

/* Voimassa, kun näkymäikkuna on vähintään 30em leveä */
@media (min-width: 30em) {
  /* tyylit tähän */
}

/* Voimassa, kun näkymäikkuna on enintään 30em leveä */
@media (max-width: 30em) {
  /* tyylit tähän */
}

Mediatyypin voi jättää pois, kun kysely koskee kaikkia laitteita. @media (min-width: 30em) on siis sama kuin @media all and (min-width: 30em), mutta lyhyempi ja luettavampi. Mediatyyppi kirjoitetaan vain silloin, kun sitä oikeasti tarvitaan, esimerkiksi @media print and (min-width: 20cm).

2.2 Mobile first

Kyselyt voi kirjoittaa kahteen suuntaan, ja suunnalla on iso merkitys tyylitiedoston rakenteeseen.

Mobile first -tapa on suositeltavampi kahdesta syystä. Yksinkertaisin versio on turvallisin oletus, ja ominaisuuksien lisääminen on helpompaa kuin niiden purkaminen. Kapealla näytöllä kannattaa muutenkin pyrkiä yksinkertaiseen esitykseen ja sijoittaa asiat mieluummin peräkkäin kuin vierekkäin.

Kapealla näytöllä on lisäksi huolehdittava siitä, ettei sivua tarvitse vierittää sivusuunnassa. Tavallisimmat syyt vaakavieritykseen ovat liian leveä kuva, taulukko tai koodilohko:

img {
  max-width: 100%;
  height: auto;
}

pre {
  overflow-x: auto;   /* vierityspalkki vain kun sitä tarvitaan */
}

2.3 Esimerkki

Muuta selainikkunan leveyttä ja katso, miten laatikon väri vaihtuu. Kokeile myös muuttaa katkaisukohtia CSS-kentässä.

2.4 Mediakyselyjen testaaminen

Kehittäjätyökaluissa on laitenäkymä, jolla sivua voi katsella eri levyisenä ilman että selainikkunaa tarvitsee raahata. Se avautuu näppäinyhdistelmällä Ctrl+Shift+M (macOS: Cmd+Shift+M) sen jälkeen, kun työkalut on avattu F12-näppäimellä. Katso HTML5-luennon luku 19.4.

Tarkista aina vähintään noin 360 pikselin leveydellä. Muista, että laitenäkymä jäljittelee vain kokoa: oikealla laitteella kannattaa kokeilla lopuksi.

3. Käyttäjän asetuksiin reagoivat kyselyt

Osa mediakyselyistä ei kysy laitteesta vaan siitä, mitä käyttäjä on käyttöjärjestelmästään valinnut. Nämä ovat helppoja toteuttaa ja parantavat saavutettavuutta selvästi.

3.1 prefers-color-scheme

Kysely kertoo, onko käyttäjä valinnut vaalean vai tumman tilan. Arvot ovat light ja dark.

/* Perustyyli on vaalea ja toimii aina. */
body {
  background-color: #ffffff;
  color: #23201c;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1c1a17;
    color: #f2eee7;
  }
}

Lisäksi kannattaa kertoa selaimelle, että sivu tukee molempia tiloja. Silloin myös lomakekentät, vierityspalkit ja muut selaimen omat osat mukautuvat:

:root {
  color-scheme: light dark;
}

3.2 prefers-reduced-motion

Osa käyttäjistä saa liikkuvasta kuvasta huimausta tai pahoinvointia, ja osalle liike vaikeuttaa keskittymistä. Käyttöjärjestelmissä on asetus, jolla liikettä pyydetään vähentämään, ja selain välittää sen tällä kyselyllä. Arvot ovat reduce ja no-preference.

Kirjoita animaatio kyselyn sisään, älä sen ulkopuolelle:

/* Oikein: liikettä ei ole oletuksena, vaan se lisätään
   vain jos käyttäjä ei ole pyytänyt sen vähentämistä. */
@media (prefers-reduced-motion: no-preference) {
  .kortti {
    transition: transform 0.3s ease;
  }
}

/* Väärin: animaatio on aina päällä, ja se poistetaan erikseen.
   Selaimessa, joka ei tue kyselyä, liike jää päälle. */
.kortti {
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .kortti {
    transition: none;
  }
}

Muita saman perheen kyselyjä ovat prefers-contrast ja forced-colors, joka kertoo Windowsin suurkontrastitilasta.

4. Tulostustyylit

Tulostettu sivu on eri media kuin näyttö. Navigointivalikkoja ei voi klikata paperilla, taustavärit kuluttavat mustetta ja linkkien osoitteet eivät näy mitenkään. Muutamalla säännöllä sivusta saa siistin tulosteen.

@media print {
  /* Piilotetaan se, mikä ei toimi paperilla */
  nav, footer, .mainos {
    display: none;
  }

  /* Näytetään linkin osoite sulkeissa linkkitekstin perässä */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
  }

  /* Vältetään sivunvaihtoa hankalissa kohdissa */
  h1, h2, h3 {
    break-after: avoid;
    break-inside: avoid;
  }

  ul, ol, dl, img, table {
    break-inside: avoid;
  }
}

4.1 Sivunvaihdon hallinta

5. Viewport

Mobiililaitteet olettavat oletusarvoisesti, että sivu on suunniteltu leveälle näytölle. Esimerkiksi Applen laitteet olettavat sivun olevan noin 980 pikseliä leveä ja kutistavat sen näytölleen. Jos sivu on tehty responsiiviseksi, tämä arvaus vain pilaa lopputuloksen: teksti kutistuu pieneksi eivätkä mediakyselyt osu oikein.

Sen estämiseksi dokumentin head-osaan kirjoitetaan:

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="viewport" content="width=device-width, initial-scale=1 /">

<meta name="viewport" content="width=device-width, initial-scale=1" />

Jos et tee responsiivista sivua, älä käytä viewport-määritystä lainkaan. Silloin laitteen oma sovitus on parempi kuin puolivalmis responsiivisuus. Tällä kurssilla sivut tehdään responsiivisiksi, joten määritys kuuluu jokaisen sivun head-osaan.

6. Tarkistuslista

1. Onko jokaisen sivun head-osassa oikein kirjoitettu viewport-määritys?
2. Onko zoomaus sallittu, eli puuttuvatko user-scalable ja maximum-scale?
3. Ovatko katkaisukohdat em-yksikössä pikselien sijaan?
4. Onko perustyyli kirjoitettu kapealle näytölle ja lisäykset min-width-kyselyillä?
5. Toimiiko sivu noin 360 pikselin levyisellä näytöllä ilman vaakavieritystä?
6. Onko kaikki sisältö saatavilla myös kapealla näytöllä, eli et ole piilottanut mitään display: none -määrityksellä?
7. Onko kontrasti riittävä sekä vaaleassa että tummassa tilassa?
8. Onko mahdollinen liike kirjoitettu prefers-reduced-motion: no-preference -kyselyn sisään?
9. Näyttääkö tulostuksen esikatselu järkevältä?

7. Lisätietoa

• MDN: Using media queries ja MDN: @media.
• MDN: prefers-color-scheme ja MDN: prefers-reduced-motion.
• Media Queries Level 4, varsinainen määrittely.
• MDN: viewport meta tag.
• Responsive web design basics (web.dev).
• A tale of two viewports, perusteellinen selitys siitä, mitä viewport oikeastaan tarkoittaa.