Pravila @media

Pravilo @media uporabimo, kadar želimo, da se določen del CSS uporabi samo v posebnih okoliščinah, na primer pri tiskanju, na zaslonu določene širine ali kadar uporabnik uporablja temni način. To je ena od osnov odzivnega oblikovanja spletnih strani.

Medijske poizvedbe omogočajo, da isto vsebino prilagodimo različnim napravam in uporabniškim nastavitvam. Zato so pomembne tako pri postavitvi strani kot tudi pri dostopnosti in pripravi vsebine za tisk.

Osnovna zamisel

Z @media brskalniku povemo, da naj spodnja pravila uporabi samo, če je izpolnjen določen pogoj.

@media pogoj {
   selektor {
      lastnost: vrednost;
   }
}

Pogoj je lahko zelo preprost, na primer screen, ali pa bolj natančen, na primer (max-width: 700px). Pogoje lahko tudi združujemo.

Medijski tipi

Najpogosteje uporabljeni medijski tipi so:

Večina starejših tipov, kot so handheld, projection, tty in tv, se danes praviloma ne uporablja več.

Medijske lastnosti

V praksi se danes veliko pogosteje kot tipi uporabljajo medijske lastnosti. Z njimi preverjamo lastnosti okolja, na primer širino prikaza ali uporabniške nastavitve.

Preprost primer

Spodnji primer prikaže drugačen videz odstavka na zaslonu in pri tiskanju:

<style>
   p.primer {
      color: #333;
   }

   @media screen {
      p.primer {
         font-family: Verdana, Arial, sans-serif;
         font-size: 1.1em;
      }
   }

   @media print {
      p.primer {
         font-family: "Times New Roman", serif;
         font-size: 0.95em;
      }
   }

   @media screen, print {
      p.primer {
         font-weight: bold;
      }
   }
</style>

Pojasnilo:
Na zaslonu je besedilo prikazano s pisavo Verdana, pri tiskanju pa s pisavo Times New Roman. V obeh primerih ostane krepko.

Odzivna postavitev

Ena najpogostejših uporab pravila @media je prilagajanje postavitve glede na širino okna.

<div class="vsebina">
   <div class="stolpec">Prvi stolpec</div>
   <div class="stolpec">Drugi stolpec</div>
</div>

.vsebina {
   display: flex;
   gap: 20px;
}

.stolpec {
   flex: 1;
   background-color: #fccc88;
   padding: 15px;
}

@media (max-width: 700px) {
   .vsebina {
      display: block;
   }

   .stolpec {
      margin-bottom: 15px;
   }
}

Na širokem zaslonu sta elementa drug ob drugem, na ožjem zaslonu pa ju lahko z medijsko poizvedbo postavimo enega pod drugega.

Tiskanje

Pravilo @media print je uporabno, kadar želimo stran prilagoditi za tisk. Pogosto skrijemo navigacijo, oglase in druge elemente, ki na papirju niso potrebni.

@media print {
   nav,
   aside,
   .reklama {
      display: none;
   }

   body {
      color: #000;
      background: #fff;
   }

   a {
      text-decoration: underline;
      color: #000;
   }
}

S tem izboljšamo preglednost natisnjene strani in zmanjšamo porabo črnila.

Dostopnost in uporabniške nastavitve

Medijske poizvedbe lahko upoštevajo tudi uporabniške nastavitve naprave ali sistema.

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

@media (prefers-reduced-motion: reduce) {
   * {
      animation: none;
      transition: none;
      scroll-behavior: auto;
   }
}

Prvi primer prilagodi videz temnemu načinu, drugi pa zmanjša gibanje in animacije za uporabnike, ki to želijo.

Priporočila

• Medijske poizvedbe uporabljaj za smiselne spremembe postavitve, ne za nepregledno podvajanje celotnega CSS.
• Pri odzivnem oblikovanju preveri delovanje na različnih širinah zaslona.
• Za tiskanje odstrani elemente, ki na papirju nimajo pravega smisla.
• Upoštevaj uporabniške nastavitve, na primer temni način in zmanjšano gibanje.
• Kjer je smiselno, uporabljaj pregledne prelome med manjšimi in večjimi zasloni.

Pogoste napake

• Medijske poizvedbe se uporabljajo samo za širino zaslona, druge možnosti pa se prezrejo.
• Pogoji so nepregledni ali med seboj neskladni.
• Pri tiskanju ostanejo prikazani elementi, ki na papirju niso koristni.
• Ne upoštevajo se uporabniške nastavitve, ki vplivajo na dostopnost.
• Odzivna postavitev se preveri le na eni širini zaslona.