Det är ju fantastiskt när man lär sig nya saker. Här för leden upptäckte jag att man i CSS kan ange för vilken max- eller minimibredd - för en visningsyta - ett mediedirektiv ska gälla. Mediedirektiv i CSS anger för vilken typ av visingsläge CSS-koden ska gälla. T ex all gäller för alla typer, screen för skärmar, print för utskrifter o s v. Men i o m att CSS3 är på frammarsch så kan man också ange för vilken bredd på visningsytan CSS-koden ska gälla. Detta är ju framför allt användbart för att anpassa layouten för t ex mobiltelefoner som generellt har en lägre upplösning än vanliga datorer, och dessutom tittar man ofta i telefonen i stående utsnitt till skillnad från en vanlig datorskärm som är liggande.

Men det slog mig att man lika gärna kan använda mediadirektiven för att flöda om layouten beroende på hur brett webbläsarfönstret är även för en vanlig webbläsare på en vanlig dator.

Mediadirektiv

Hur ser då ett mediadirektiv ut? Nedan är ett förkortat exempel för att illustrera principen

15 rader Cascading Stylesheet
  1. /* Standard-CSS */  
  2. body { font: 80%/1.4 sans-serif; }  
  3. #wrapper { width: 870px; margin: 0 auto; }  
  4.  
  5. /* CSS om visningsbredden är lägre än 940px */  
  6. @media screen and (max-width: 940px) {  
  7. /* Minska bredden på #wrapper */  
  8. #wrapper { width: 600px; }  
  9. }  
  10.  
  11. /* CSS om visningsbredden är lägre än 660px */  
  12. @media screen and (max-width: 660px) {  
  13. /* Sätt flödande bredd på #wrapper */  
  14. #wrapper { width: auto; }  
  15. } 

Detta innebär att om fönsterbredden är större än 940px kommer #wrapper vara 870px bred. Om fönsterbredden är mellan 940px och 660px kommer #wrapper vara 600px. Är fönsterbredden lägre än 660px kommer bredden på #wrapper följa bredden på fönstret.

Denna teknik funkar dock inte i Internet Explorer före version 9. Men eftersom detta främst är användbart för mobiltelefoner så går det utmärkt att använda för det ändamålet eftersom det inte finns några smartphones med webbläsare som inte stödjer denna teknik.

Filmen nedan illustrerar exemplet ovan. De avlånga "länk-knapparna" och antal spalter för brödtexten flödar om beroende på bredden på webbläsarfönstret.


Kommentarer Skriv en kommentar   Prenumerera

  1. Anders Johansson skrev
    januari 2012     Permalänk

    Lägg till respond.js så kommer det att fungera i lte IE 8 också. Eventuellt måste ordningen vändas så att det blir "mobile first" också.

  2. Pontus Östlund skrev
    januari 2012     Permalänk

    Absolut Anders, i en riktig webbpryl får man ju se till att lösa det med Javascript även för IE. Det positiva är ju att man nu kan se att vi år på väg mot en tid då vi webbpulare slipper hålla på med en massa fulhack till höger och vänster för att få saker och ting att funka i olika klienter. Blir vi bara av med IE7 och IE8 har vi ju kommit riktigt långt :)

    Och egentligen är det nog bäst att skriva koden för lägst/sämst stöd först och sedan lägga till varefter stödet ökar. Det borde bli minst extrakod den vägen.