CSS media-etsinnät

CSS2:ssa otettiin käyttöön media-tyypit

CSS2:ssa otettiin käyttöön @media Säännöt, jotka mahdollistavat eri median tyyppien tyyleihin määrittämisen.

Esimerkiksi: Voit olla omistuksessasi tyyliohjeita tietokoneen näytölle, yksi tulostimelle, yksi käsinpidettävälle laitteelle ja jopa yksi television käyttöön, ja niin edelleen.

Valitettavasti nämä media-lajit eivät ole saaneet suurta tukea laitteilta paitsi tulostusmedia-lajin osalta.

CSS3:n media-kyselyt tuovat mukanaan

CSS3:n media-kyselyt laajentavat CSS2:n media-lajien käsitettä: ne eivät etsi laitteistotyyppiä, vaan keskittyvät laitteiden kykyihin.

Media-kyselyjä voidaan käyttää monenlaisiin tarkoituksiin, esimerkiksi:

  • Näytön leveys ja korkeus
  • Laitteen leveys ja korkeus
  • Suunta (onko tabletin tai puhelimen asento vaakatasossa vai pystyasennossa)
  • Resoluutio

Media-kyselyjen käyttö on suosittu teknologia, joka voi tarjota räätälöityjä tyylejäyksiä työpöytäcomputereille, kannettaville tietokoneille, tabletteille ja puhelimille (esimerkiksi iPhone ja Android-puhelimet).

Selaimen tuki

Taulukossa olevat numerot osoittavat täydellisen tuen @media Säännön ensimmäinen selainversio.

Ominaisuus
@media 21.0 9.0 3.5 4.0 9.0

Media-kyselyyn liittyvä syntaksi

Media-kysely koostuu yhdestä media-lajista ja voi sisältää yhden tai useamman lausekkeen, jotka voidaan tulkita totta tai epätotta.

@media not|only mediatype and (expressions) {
  CSS-Code;
{}

Jos määritetty media-laji vastaa näytettävän dokumentin laitteistotyyppiä ja kaikki media-kyselyssä olevat lausekkeet ovat totta, kyselytulos on totta. Kun media-kysely on totta, sovelletaan vastaavaa tyylejäysiä tai tyylejäysiruleaa ja noudatetaan normaalia järjestystä.

Ellei käytä not tai only operaattoria, media-laji on valinnainen ja oletusarvo all Tyyppi.

Voit käyttää eri tyylejäyksiä eri media-lajeille:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 media-lajit

Arvo Kuvaus
all Käytetään kaikkia media-lajeja.
print Käytetään tulostinta.
screen Käytetään tietokoneen näyttöä, tabletteja, älypuhelimia ja niin edelleen.
speech Käytetään näyttöä suurten kirjainten lukemiseen.

Media-kyselyyn liittyvä yksinkertainen esimerkki

Yksi tapa käyttää media-kyselyä on lisätä vaihtoehtoinen CSS-osio tyylejäysissä.

Seuraavassa esimerkissä taustaväri muuttuu vaaleankelverdeksi, jos näytön leveys on 480 pikseliä tai laajempi (jos näytön leveys on alle 480 pikseliä, taustaväri on vaaleanpunainen):

Esimerkki

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  {}
{}

Kokeile itse

Seuraavassa esimerkissä näytetään valikko, joka liukuu sivun vasemmalle, jos näytön leveys on 480 pikseliä tai laajempi (jos näytön leveys on alle 480 pikseliä, valikko sijaitsee sisällön ylälaidassa):

Esimerkki

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
{}

Kokeile itse

Lisää media-etsintöjen esimerkkejä

Lisää media-etsintöjen esimerkkejä löytyy seuraavalta sivulta:CSS MQ-esimerkki.

CSS @media-viittaus

Kaikkien media-tyyppien ja ominaisuuksien/ytimeellisyyksien/käyttötapojen täydellinen yleiskatsaus löytyy CSS-viittauksessa oleva @media-sääntö.