Responsive Design med Sass för alla webbläsare

Publicerad tisdag den 13 Dec 2011 20:50

När man använder CSS3 Media Queries för att bygga en Responsive Design så vill man alltid börja med den smalaste layouten och skala uppåt. Media Queries skall alltså ha villkoret min-width och rikta sig till bredare och bredare skärmar. Man lägger till kolumner när det finns plats för det.

Alternativet — att först bygga en bred layout och använda Media Queries för att skala neråt innebär två dåliga saker:

  • Du måste först sätta float på siddelar som skall vara kolumner och sedan ta bort det för smalare skärmar. Det är inte särskilt effektivt och går emot hur CSS är tänkt att användas.
  • När Media Queries inte fungerar så är det den breda layouten man får. Det är alltså dåligt för omoderna telefoner som saknar stöd för Media Queries.

Problemet som uppstår när man bygger med den smalaste layouten som grund och bygger på uppåt är att webbläsare som saknar stöd för Media Queries alltid får den smala layouten. Det är främst Internet Explorer 7 & 8 som blir ett problem. Mobiltelefoner utan stöd för media queries får smal layout precis som det ska vara.

Ett sätt att lösa problemet med IE 7 & 8 är att använda Respond.js. Jag undviker helst att min CSS skall vara beroende av JavaScript, det räcker med att vi behöver html5shiv för att HTML5-taggarna skall fungera. Framförallt känns det som att man straffar användarna av IE 7 & 8 genom att göra sidrenderingen extra långsam. Respond.js måste läsa CSS:en en gång till och webbläsaren måste rita om sidan efter att den egentligen är klar. Jag har inget emot Respond.js men tycker att jag har hittat ett bättre sätt att lösa problemet.

Min lösning är att istället använda en kombination av Conditional Comments och Sass (jag kör SCSS).

När jag använder OS X så föredrar jag CodeKit. Den innehåller allt som behövs för att kompilera SCSS till vanlig CSS (och massor av andra bra saker). På Windows finns olika lösningar, men jag tycker att det är smidigt att installera Ruby och Sass och sedan sätta upp en --watch på mappen som innehåller SCSS-filerna. Om du inte är bekant med Sass så finns allt du behöver veta i en tutorial på sass-lang.com.

När du har fått igång kompilering av SCSS till CSS så har du allt som behövs.

Dela upp din style i olika filer, en för varje block av Media Queries. I mitt exempel har jag en smal layout (en kolumn) för skärmar upp till 480px bredd och en layout med två kolumner för bredare skärmar. Jag har därför skapat dessa två filer:

scss/_narrow.scss
scss/_wide.scss

Dela upp i så många filer som du behöver.

Gör sedan en SCSS-fil som innehåller dina Media Queries och som inkluderar _narrow.scss och _wide.scss. Jag har kallat denna fil för main.scss

@import "_narrow.scss";

@media all and (min-width: 480px) {
    @import "_wide.scss";
}

Gör en till SCSS-fil som inkluderar exakt samma filer fast utan Media Queries:

@import "_narrow.scss";

@import "_wide.scss";

Denna fil har jag kallat för main-ie.scss. Jag har alltså två filer som jag jobbar i och två filer som inte innehåller style utan bara inkluderar andra filer:

scss/_narrow.scss
scss/_wide.scss
scss/main.scss
scss/main-ie.scss

När jag sparar SCSS-filerna genereras vanliga CSS-filer. Jag får två stycken sådana, en med och en utan Media Queries:

css/main.css
css/main-ie.css

Använd sedan Conditional Comments i din HTML för att inkludera den första filen (main.css) i alla webbläsare som inte är Internet Explorer 8 eller äldre och den andra filen (main-ie.css) i enbart Internet Explorer 8 och äldre:

<!--[if (gte IE 9)|!(IE)]><!-->
    <link rel="stylesheet" href="css/main.css">
<!--<![endif]-->

<!--[if (lte IE 8)]>
    <link rel="stylesheet" href="css/main-ie.css">
<![endif]-->

Du har nu alltså en enda uppsättning SCSS-filer att jobba i som kompileras till två olika versioner, en med och en utan Media Queries. Gamla och nya telefoner kommer att få en smal layout, moderna webbläsare kommer att få en layout som anpassar sig till fönstrets bredd och Internet Explorer 7 & 8 kommer att få en bred layout.

Här hittar du en demosida som visar slutresultatet.

Kort adress till sidan: http://eklf.se/rd