Jeg har tidligere skrevet om media typer i CSS for å for eksempel kunne skille mellom layout/formatering på skjerm og utskrift. I CSS3 har vi imidlertid fått et nytt valg som gjør det enda enklere å tilpasse en side, ikke til media-typer, men til skjermoppløsning og portrett/landskapsmodus m.m.
Dette kalles Media Queries og er nøkkelen til responsiv webdesign (klikk her for en oversikt over våre kurs innen HTML5, CSS3 og responsiv webdesign).
Med media queries har vi mulighet til å lage CSS som retter seg inn mot f.eks en minimum eller maksimum skjermoppløsning. På denne måten kan vi spesifikt gjøre endringer på CSS avhengig av skjermoppløsningen. Det er altså media queries som er selve nøkkelen til responsiv webdesign.
Hvordan definere media queries, nøkkelen til responsiv webdesign?
Å opprette media queries kan vi gjøre på ulike måter.
- separate CSS-filer for hver media querie.
- inndeling i 1 CSS-fil.
- ved hjelp av @import.
Separate CSS-filer
Det er mulig å skille media queries i ulike CSS-filer slik som vist nedenfor. En fordel med dette kan være at vedlikeholdet forenkles siden koden er delt inn i ulike filer.
En ulempe ved å bruke denne metoden er at vi må koble flere CSS-filer til HTML-siden, noe som vil påvirke hastigheten på siden.
I eksempelet nedenfor ser du hvordan dette gjøres både om du velger mobile first eller desktop first.
<!---------------------------------
mobile first
---------------------------------->
<link href="mobile.css" rel="stylesheet">
<!-- nettbrett -->
<link href="tablet.css" rel="stylesheet" media="sreen and (min-width:481px)">
<!-- desktop -->
<link href="desktop.css" rel="stylesheet" media="sreen and (min-width:769px)">
<!---------------------------------
desktop first
---------------------------------->
<link href="desktop.css" rel="stylesheet">
<!-- nettbrett -->
<link href="tablet.css" rel="stylesheet" media="sreen and (max-width:769px)">
<!-- mobil -->
<link href="mobile.css" rel="stylesheet" media="sreen and (max-width:481px)">
1 CSS-fil
Det er også mulig å samle alle media queries i en og samme CSS-fil. Dette vil være fornuftig hvis vi tenker på hastighet, men kan i noen tilfeller være litt mer krevende å vedlikeholde, da filen blir større (mer kode) og potensielt vanskeligere å navigere i.
I eksempelet nedenfor ser du hvordan dette gjøres både om du velger mobile first eller desktop first.
/* Mobile first */
/* mobil - 480px og lavere */
/* Tablet - 481px - 769px. Arver stiler fra mobil */
@media screen and (min-width: 481px){
}
/* Desktop - 769px og opp til maks. Arver stiler fra mobil og tablet */
@media screen and (min-width: 769px){
}
/* Desktop first */
/* Desktop - fra f.eks maks 1200px til 769px */
/* Tablet - 768px - 481px. Arver stiler fra desktop */
@media screen and (max-width: 769px){
}
/* Mobile - 480px og lavere. Arver stiler fra desktop og tablet */
@media screen and (max-width: 481px){
}
@import
Et tredje alternativ er å bruke @import. Bruker du @import kan du ha separate CSS-filer (slik som i punkt 1), men disse importeres inn i en «hoved» CSS-fil, som så kobles til HTML-dokumentet. Denne metoden vil heller ikke være optimal hva gjelder hastighet, men i motsetning til punkt 1 (separate CSS-filer) vil du slippe flere linker i HTML-dokumentet da alt importeres i 1 CSS-fil. Dette vil potensielt være enklere å vedlikeholde.
I eksempelet nedenfor ser du hvordan dette gjøres både om du velger mobile first eller desktop first.
/* mobile first */
/* mobil - 480px og lavere */
@import url("mobile.css");
/* tablet - 481px til 768px. Arver stiler fra mobil */
@import url("tablet.css") screen and (min-width:481px);
/* desktop - 769px til maks. Arver stiler fra mobil og tablet */
@import url("desktop.css") screen and (min-width:769px);
/* desktop first */
/* desktop - fra f.eks maks 1200px til 769px */
@import url("desktop.css");
/* tablet - 768px til 481px. Arver stiler fra desktop */
@import url("tablet.css") screen and (max-width:769px);
/* mobile - 480px og lavere. Arver stiler fra desktop og tablet */
@import url("mobile.css") screen and (max-width:481px);