En särskild kategori regler i CSS är vad som brukar kallas @-regler eller at-regler (snabel-a brukar utläsas som det engelska ordet "at"). Det finns flera olika typer av sådana regler som mestadels används för att göra villkorade regler i CSS, regler som bara gäller om vissa villkor är uppfyllda. Till exempel att bildskärmen som användaren tittar på är av en viss storlek (som en mobiltelefon), men det finns också en @-regel som kan användas för att låta användarens dator ladda ett speciellt typsnitt utan att ha det installerat på sin dator (@font-face).

Exempel på @-regler är till exempel @import, som importerar en CSS till en annan, @media, som villkorar regler så att de bara gäller för vissa media (till exempel mobiltelefoner) eller @font-face, som används för att man ska kunna använda typsnitt på en webbsida utan att installera dem på användarens dator.

Som du ser används @-regler till ganska så olika ändamål, men något de har gemensamt är att de ofta avviker från normal CSS-syntax på så sätt att de kan innehålla nästlade CSS-regler eller på annat sätt skrivas annorlunda än vanliga CSS-Regler. En @-regel kan alltså i sig själv innehålla flera andra CSS-regler. Lite som nästlade listor i HTML.

Du kan läsa mer om @-regler hos W3C eller på Mozilla Developer Network.

För att låta samma HTML-innehåll få olika utformning på olika typer av media, till exempel desktop eller mobiltelefon, finns det flera olika tekniker du kan använda dig av. Ett sätt är att låta programvaran på webbservern känna av vad det är för apparat som används (den informationen är något som webbläsaren skickar till servern varje gång du ansluter till en sida). Servern kan sedan skicka tillbaks en anpassad version av sidan.

Ett annat sätt är att sätta upp villkor i webbsidans egen kod, antingen HTML eller CSS. Sättet man anger villkoren för alla eller vissa CSS-regler kallas Media queries och kan göras på tre olika sätt.

En eller flera @media-regler i din CSS

Du använder @media för att lägga till villkorade regler i en existerande CSS. Som du ser är reglerna nästlade, det vill säga att det ligger regler, med väljare och allt, inuti själva @-regeln. Notera de dubblerade "}".

Den här metoden är ofta att föredra, i de flesta fall är det bara vissa nyckelegenskaper som behöver ändras. Vissa element som behöver ändra bredd, något som kanske inte ska visas och så vidare…

@media screen and (max-width: 640px) {
   body {
      background-color:red;
      background-image: url("mobilbakgrund.jpg");
   }
   main {
      width: 100%;
   }
   .meny {
      display: none;
   }
}

Länka in en CSS i en annan med hjälp av @import

Du använder @import för att länka in en CSS i en annan, och använder media queries för att bestämma vilka villkor som ska gälla vid vilka media.

Exemplet nedan importerar CSS:en "mobil.css", reglerna i denna gäller skärmar som är 640px eller smalare.

Den här metoden är bra om det är mycket som behöver ändras. Ibland är det enklare att hålla isär saker för att hålla reda på dem

@import url (mobil.css) screen and (max-width: 640px);

Villkorad CSS-länk i HTML

Du kan sätta in media queries-villkor i en vanlig <link>-tagg (alltså i HTML-dokumentet) genom att lägga till attributet media.

Exemplet nedan ger alla skärmar som är 640px eller smalare CSS:en "mobil.css".

Den här metoden har samma fördelar som den ovan, men du behöver gå in och skriva i HTML-koden.

<link type="text/css" rel="stylesheet" media="screen and (max-width: 640px)" href="mobil.css">

Media queries egna syntax

Mediatyper

Det första ledet i exemplet är mediatypen. Mediatyper är en rest från ett äldre sätt att villkora CSS som lever kvar i de moderna media queries.

I CSS2 definierades en lista på mediatyper. Här finns mediatyper som screen för bildskärmar och print för utskrift, men också handheld för handdatorer och mobiler samt tv för tv-apparater

Även om vissa av medietyperna (framför allt screen, print och all) fortfarande används är flera föråldrade. En modern mobiltelefon identifierar sig till exempel inte som handheld, utan bara som screen.

Villkoret handheld kommer alltså inte att fungera för en modern smart telefon. Istället kan du med media queries på ett mer precist sätt sätta upp relevanta villkor, antalet pixlar är i allmänhet viktigare för dig som webbutvecklare än om det är en apparat du håller i handen eller tittar på tv-program med.

Mediaegenskaper

Utöver mediatyp innehåller media queries olika mediaegenskaper. I vårt exempel ovan definieras egenskapen max-width, alltså gäller regeln för skärmar (screen) som också (and) inte är mer än 640 pixlar breda.

Egenskapen, tillsammans med sitt värde sätts inom vanlig parentes; alltså (max-width: 640px).

Fler mediaegenskaper (media features) som går att använda kan du hitta hos w3c. Tänk på att du kan lägga till max- eller min- före många av egenskapsnamnen för att ange att det rör sig om maximala eller minimala värden. I exemplet ovan har vi lagt till max- före width för att ange att det gäller skärmar som inte är större än 640px. Hade vi bara skrivit width skulle regeln bara ha gällt skärmar som är exakt 640px breda.

Logiska operatorer

Som du ser finns i exemplet ordet "and" med. I media queries kan man nämligen använda sig av logiska operatorer. Genom att använda sig av and, not, only och kommatecken kan du styra över hur de olika villkor du ställer upp i din media query förhåller sig till varandra.

Exemplet ovan: screen and (max-width: 640px), innebär att både villkoret screen och villkoret (max-width: 640px) ska vara uppfyllda för att CSS-reglerna ska gälla. Hade det i stället stått screen, (max-width: 640px), skulle kommat innebära att vilket som helst av de två villkoren behöver uppfyllas. Kommatecknet fungerar alltså som den logiska operatorn "or"

Slutligen

Media Queries för några vanliga apparater kan du, till exempel, hitta här, men apparater förändras och det kan vara vettigt att göra en webbsökning efter vad som är aktuella värden för en modern apparat av ett visst slag.

Webbdesign som på detta sätt anpassar sig efter den apparat som används är det som idag populärt kallas responsiv design. Det är till exempel vanligt att en sajt är anpassad för mobil, tablet (padda), desktop och utskrifter. I grund och botten samma sajt med samma innehåll, men med anpassningar för att fungera optimalt på flera olika medier.