Övningar i CSS för anpassning till lika enheter Hittills har vi i föregående labratiner tittat på hur man med CSS utfrmar en presentatin för bildskärm på en vanlig datr. Men det finns fler presentatiner sm vi behöver ta hänsyn till ch utfrma med CSS. Då sidan skrivs ut på papper ska den kanske inte se exakt likadan ut sm på bildskärmen, så man kan skapa en speciell stilmall för utskrift. I mbila enheter (läsplatta eller mbiltelefn) varierar skärmstrleken en hel del. Vi behöver därför kunna anpassa webbsidan, så att den fungerar både på en liten ch en str skärm. Detta är ett mråde sm utvecklas mer ch mer ch brukar kallas respnsiv eller adaptiv webbdesign. Det finns i princip två sätt att gå tillväga antingen utvecklar man först för den mindre, enklare enheten ch gör sedan tillägg för den större, mer avancerade enheten ("mbile first" eller "prgressive enhancement") eller så gör man tvärtm ("graceful degredatin"). Ibland blir det en mix av de båda angreppssätten. I dessa övningar ska vi utgå från en layut sm skapades i slutet av förra labratinen, fast den är lite vidareutvecklad. Bl.a. har den nu kd för "sticky fter", så att sidften alltid visas längst ner på sidan eller längst ner i fönstret. Då sidans innehåll inte fyller hela fönstrets så ska sidften ändå visas längst ner i fönstret. Layuten har nu ckså fått lite andra färger ch CSS3-effekter i frm av rundade hörn, skuggr ch gradient fyllningsfärg. 1. Studera kden i dkumenten På labratinens webbsida kan du ladda ner en mapp med de webbsidr du ska utgå ifrån. Så m du inte redan gjrt det laddar du ner zip-filen ch packar upp den. Du får då en mapp med ett antal webbsidr. Öppna startsidan i webbläsaren Öppna filen index.htm i webbläsaren ch bläddra runt bland de tre sidrna, så att du ser hur de ser ut. Ha sedan filen index.htm öppen, så att du efter varje steg kan ladda m sidan ch studera resultatet. HTML- kden Öppna filen index.htm i editrn ch studera HTML-kden. Det är i strt sett samma kd sm i föregående labratin, fast div-elementet för "fter" är nu flyttat, så att det ligger utanför wrapper. Detta är dels för att kden för "sticky fter" ska fungera ch dels för att kunna göra så att sidften fyller hela fönstrets bredd. CSS- kden Öppna filen sticky_fter.css i editrn ch studera kden. Filen sticky_fter.css imprteras till style.css. Kden i sticky_fter.css kmmer från ett exempel på webben, http://www.cssstickyfter.cm, ch förklaras där. Du behöver dck inte gå igenm det i detalj just nu, för att kunna göra resten av dessa övningar. Så just nu kan vi nöja ss med att det fungerar, så kan du titta på den kden vid ett senare tillfälle. Öppna filen style.css i din editr. Ha sedan filen öppen. I style.css är bredden för wrapper nu satt till 1000 pixlar. Bakgrundsfärgerna för de lika bxarna är nu antingen brttagna (så att bdys vita färg lyser igenm) eller utbytta till andra färger. Det är ckså en del kd för att ge sidhuvudets rubrik rundade hörn, skugga ch gradient bakgrundsfärg. Navigeringslänkarna har ckså rundade hörn. I övrigt är det samma CSS-kd sm i den sista övningen i föregående labratin. 2012-08-22 Rune Körnefrs (rune.krnefrs@lnu.se) 1
2. Stilmall för utskrift Medieteknik De stilmallar sm du hittills skapat används för presentatin på alla enheter, bl.a. både för skärmen ch för utskrift, eftersm vi satte media="all" i HTML-dkumentens link-tagg. Vill man ha två helt lika stilmallar för skärmen ch utskrift, kan man ändra till media="screen", så används den stilmallen endast för skärmen. Sedan kan man skapa en ny stilmall för utskrift ch länka in den med ytterligare en link-tagg, men där skriver man media="print". Du ska nu delvis göra detta, men vi behåller media="all" i den link-tagg du har. Sedan skapar vi en ny stilmall där vi endast tar med de ändringar vi vill ha i stilen för utskrift jämfört med stilen för skärmen. Denna stilmall länkas sedan in med en link-tagg där vi har media="print". Då kmmer båda stilmallarna att användas för utskriften. Skapa ett nytt CSS- dkument för utskrift Skapa ett nytt dkument i din editr ch spara det med namnet style_print.css. Skriv in följande kd i det nya CSS-dkumentet: bdy {backgrund:#fff; fnt-family:"times New Rman", Times, serif; #wrapper {max-width:nne; width:aut; margin-left:60px; #header h1 {backgrund:#fff; clr:#000; bx-shadw:0 0; brder-bttm:2px slid #000; #nav {display:nne; #fter {backgrund-clr:#fff; clr:#000; brder-tp:1px slid #000; Detta är de ändringar sm vi vill ska gälla vid utskrift. Vi byter bakgrundsfärgen till vit färg. Vi ändrar ckså typsnittet till Times New Rman, ett typsnitt med seriffer, eftersm det är lättare att läsa på papper. Vi begränsar inte bredden, utan sätter width till aut, så att papprets bredd utnyttjas. Samtidigt kan det vara bra att ha en liten marginal i vänsterkanten, ifall man vill slå hål i pappret ch sätta in det i en pärm. Så vi sätter vänstermarginalen till 60 pixlar. Vi ändrar även färgerna i sidhuvudet till vit bakgrund ch svart text. Vi tar ckså brt skuggan, eftersm en del webbläsare inte hanterar den snyggt vid utskrift. Istället lägger vi på en tjckare kantlinje under rubriken. Navigeringslänkarna ska inte skrivas ut, så för nav sätter vi display till nne. Slutligen ändrar vi stilen för fter genm att ta brt den blå bakgrundsfärgen ch istället ha en övre kantlinje. Länka till CSS- dkumentet från HTML- dkumenten Öppna HTML-filerna index.htm, schema.htm ch uppgifter.htm ch skriv in ytterligare en linktagg under den gamla. Du ska alltså ha två link-taggar enligt: <link href="style.css" rel="stylesheet" type="text/css" media="all"> <link href="style_print.css" rel="stylesheet" type="text/css" media="print"> Vid presentatin på skärmen används då endast den första stilmallen. Vid presentatin på skrivare används först den första stilmallen ch sedan den andra. Öppna index.htm i webbläsaren ch prva att skriva ut sidan, så ser du hur utskriften skiljer sig från presentatinen på skärmen. Har du inte tillgång till skrivare, så kan du välja pdf i utskriften. 2012-08-22 Rune Körnefrs (rune.krnefrs@lnu.se) 2
3. Stilmall för mbila enheter Medieteknik Det sm skiljer mellan en vanlig datr ch mbila enheter är framför allt skärmens strlek. Så att skapa en stilmall för mbila enheter handlar fta m att anpassa layuten, så att den passar i den mbila enheten. Viss flexibilitet finns redan i den layut sm vi har på webbplatsen i övningarna. Istället för en fast bredd har mi satt en maximal bredd ch sett till att sidan anpassar sig till ett smalare fönster. Men då fönstret börjar bli riktigt smalt, så blir det lite för trängt med flera klumner. Då ska vi se till att förändra layuten till en klumn, där "klumnerna" istället visas vanför varandra. Det är även andra saker sm skiljer mellan vanliga datrer ch mbila enheter, t.ex. att hastigheten på nätet fta är långsammare (det är inte alla sm har 4G-nätverk). Då kan en anpassning vara att dölja "nödig" infrmatin sm t.ex. bilder, för att därmed få sidan att laddas snabbare. Link- tagg med media="handheld" I link-taggen har vi använt attributet media="all" ch media="print", för att ange när stilmallen ska användas. Ett annat värde för media är "handheld", så då skulle vi kunna skapa ytterligare en stilmall för handhållna, mbila enheter ch länka in den med media="handheld". Tyvärr bryr sig inte alla mbiltelefner m det attributvärdet, utan istället visar de en förminskad bild av den vanliga webbsidan. Det gör det svårt att se innehållet ch att klicka på länkar. Så vi ska inte använda detta, utan istället en annan teknik. Media queries I CSS3 infördes någt sm kallas media queries, vilket innebär att man kan sätta upp villkr för när en stilmall eller del av den ska användas. En media query kan t.ex. vara "screen and (max-width:640px)", vilket innebär att den ska användas för presentatin på skärmen ch då den maximala bredden på fönstret är 640 pixlar. Detta kan läggas in i media-attributet i link-taggen, för att avgöra m stilmallen ska inkluderas eller ej. Man kan ckså lägga in det sm ett direktiv direkt i CSS-kden ch det är så vi ska göra i dessa övningar. Vanliga bredder på skärmar i mbiler är 240, 320, 480, 640 ch 960 pixlar. Förutm vilken mbil det är berr det ckså på m man håller den stående eller liggande. Det kan naturligtvis ckså förekmma andra strlekar, så man brukar få prva sig fram för att se när man behöver göra en förändring i layuten. Det behöver ju inte vara vid alla dessa strlekar. Den webbplats sm vi har i övningarna är gjrd för 100 pixlar ch är flexibel, så att bredden kan minskas. Det finns därför inget behv av någn förändring redan vid 960 pixlar. I nedanstående övningar kmmer vi att lägga in media queries för 640, 480 ch 320 pixlar. Den kd du ska lägga till ska vara i filen style.css. För att testa det i mbiltelefnen, måste sidrna publiceras på nätet. Men till att börja med kan man testa i webbläsaren genm att göra fönstret smalare, så det ska du göra i övningarna. I en del webbläsare går det dck inte göra fönstret så smalt sm 320 pixlar, men i Opera fungerar det. Så testa resultatet i Opera. Kd för skärmar mindre än 640 pixlar Lägg till följande i CSS-kden: @media screen and (max-width:640px) { #clumns, #nav, #cntent {display:blck; width:aut; Detta gör m clumns, nav ch cntent till egna blck, dvs de kmmer inte att vara klumner intill varandra. Istället kmmer först navigeringslänkarna ch sedan sidans innehåll under dem. Vi sätter ckså width till aut, så att hela fönstrets bredd utnyttjas. Öppna sidan index.htm i webbläsaren ch prva att göra fönstret smalare. Då du kmmer ner i en strlek under 640 pixlar bör du se att layuten förändras. 2012-08-22 Rune Körnefrs (rune.krnefrs@lnu.se) 3
Lägg ckså till följande kd för navigeringslänkarna: @media screen and (max-width:640px) { #clumns, #nav, #cntent {display:blck; width:aut; #nav {text-align:center; #nav li {display:inline; #nav a:link,#nav a:visited {display:inline; Detta centrerar länkarna ch ändrar dem till inline, så att de ligger intill varandra på en rad. Det är egentligen endast li-taggen sm nrmalt är en blck-tagg ch behöver ändras till inline. A-taggen är nrmalt redan inline, men i stilen högre upp i dkumentet har vi ändrat a-taggen till blck, så därför måste vi nu ändra den till inline igen. Slutligen ska vi för denna media query ckså ta brt marginalerna på sidhuvudets rubrik. Lägg till följande kd: @media screen and (max-width:640px) { #clumns, #nav, #cntent {display:blck; width:aut; #nav {text-align:center; #nav li {display:inline; #nav a:link,#nav a:visited {display:inline; #header h1 {margin:0; Marginalen runt rubriken sätts till 0, så tar den lite mindre plats när vi nu har ett mindre fönster. Kd för skärmar mindre än 480 pixlar Lägg till följande i CSS-kden: @media screen and (max-width:480px) { #header h1 {fnt-size:medium; padding:4px; bx-shadw:0 0; img {display:nne; När fönstret är mindre än 480 pixlar gör vi rubriken ännu mindre, genm att sätta strleken till medium. Vi minskar ckså värdet för padding ch tar brt skuggan. Observera att det ska vara två 0:r med ett blanktecken efter bx-shadw. Det första värdet är för den hrisntella skuggan ch det andra för den vertikala skuggan. Vi tar ckså brt bilderna. Stilen är för img, så detta tar brt alla bilder på sidan. Vill vi endast ta brt en del bilder, så skulle vi kunna införa en särskild class, t.ex. canbedeleted, ch lägga in den sm ett attribut i de img-taggar sm kan tas brt. Sedan gör vi stilen för.canbedeleted istället för img. Gör nu fönstret ännu smalare, så ser du förändringen. Kd för skärmar mindre än 400 pixlar Lägg till följande i CSS-kden: @media screen and (max-width:400px) { #nav li {display:blck; #nav a:link,#nav a:visited {display:blck; h1,h2,h3,h4 {fnt-size:medium; h3:befre,h3:after {cntent: ""; 2012-08-22 Rune Körnefrs (rune.krnefrs@lnu.se) 4
Observera att det här står 400px. I texten innan vi km in på övningarna skrev jag att gränsen skulle vara vid 320px, men efter lite test visade det sig att navigeringsmenyn på en rad blev för str redan vid en lite större bredd, så därför införs denna förändring vid 400 pixlar. Den gäller ju då även när fönstret är 320 pixlar. Navigeringen görs m till blck igen, så att länkarna ligger under varandra. Vi gör ckså samtliga rubriker mindre, så att de bättre får plats. I filen style_general.css hade vi lagt på några tecken före ch efter h3-rubriker. Detta tar vi nu brt. Gör fönstret ännu smalare. 4. Testa i en mbiltelefn Nu är det dags att testa ch se hur det ser ut i en mbiltelefn. Men först måste du dels lägga till en meta-tagg i HTML-filerna ch dels publicera sidrna på webben. Du behöver ju ckså en smartphne ch testa i. Har du ingen egen sådan, så kanske du känner någn annan sm har en, så att du kan låna den ch titta på sidrna i. Du kan ckså använda en emulatr i din webbläsare, t.ex. följande för att emulera en iphne: http://www.testiphne.cm/ (med knappen längst ner till höger i telefnen kan du rtera den.) Meta- tagg för viewprt i HTML- dkumenten Öppna index.htm, schema.htm ch uppgifter.htm i editrn ch lägg till följande meta-tagg i headdelen, under den meta-tagg sm redan finns där: <meta name="viewprt" cntent="width=device-width; initial-scale=1.0"> Denna tagg gör att mbiltelefnen inte försöker förminska webbsidan, utan visar vad sm ryms i enhetens fönster utan skalning. Publicera webbsidrna på webben Lägg upp hela mappen i ditt webbutrymme. Se labratin 1, ifall du behöver repetera hur du gör det. Testa i mbilen Skriv in url:en till dina publicerade sidr i mbilen (eller emulatrn sm nämndes van) ch testa hur det ser ut i stående respektive liggande läge. 5. Tabellen på sidan med schemat Om du tittar på sidan med schemat, så ser du att det inte riktigt får plats. Berende på vad du har för telefn ch hur strt fönstret är, så kanske schemat får plats i liggande läge, men inte stående. Tabellen är för bred. Detta är ett av prblemen med mbilanpassning av webbsidr. Det räcker inte med att bara göra m layuten, utan ibland behöver ckså innehållet förändras. En lösning av prblemet kan vara att ändra i HTML-kden ch presentera schemat på ett annat sätt. Men m man vill ha det sm en tabell, då den får plats, så är det ingen bra lösning. Då får vi istället ändra tabellen till någt annat med hjälp av display i CSS. Vi ska här se hur vi kan ändra den till en klumn. 2012-08-22 Rune Körnefrs (rune.krnefrs@lnu.se) 5
Ändring av schemat Schemat har redan fått en stil med färger, skugga, etc. i filen style_general.css (titta gärna på den kden), så vi inför här de förändringar eller tillägg sm ska göras. Börja med att lägga in följande i CSS-kden: @media screen and (max-width:700px) { #schema {fnt-size:small; Vid 700 pixlar gör vi texten i schemat mindre. Vi behåller det dck sm en tabell ch gör inga fler ändringar här. Ändra till en klumn Lägg in följande i CSS-kden: @media screen and (max-width:600px) { #schema {bx-shadw:0 0; #schema tr {display:blck; #schema td {display:blck; brder:0; backgrund-clr:#fff; clr:#000; Tabellen får kanske plats ända ner till 450 pixlars bredd eller ännu mindre, men för att vara på den säkra sidan inför vi förändringen vid 600 pixlar. Vi tar brt skuggan från tabellen. Vi ändrar varje tabellrad ch tabellcell till blck, så visas de på varsin rad. Vi tar ckså brt kantlinjerna ch ändrar bakgrundsfärgen till vitt ch textfärgen till svart. I style_general.css finns det dck ckså en inställning för #schema tr td:first-child, dvs den första td-taggen i varje rad, där bakgrunden är blå ch texten är vit. Detta ändras inte här, så det kmmer att vara kvar. Lägg till följande rad i CSS-kden: #schema tr:first-child {display:nne; Detta tar brt den första raden med rubrikerna. Nu ser det lite bättre ut, men vi vet ju inte vad siffrrna betyder eller vilka veckdagar sm de lika raderna gäller för, så vi behöver lägga till lite text i de lika raderna. Lägg in förklarande text Vi ska nu lägga till lite text i början av varje rad, sm förklarar vad de avser. Lägg till följande i CSS-kden: #schema tr td:first-child:befre {cntent: "Vecka "; Då lägger vi till rdet Vecka i början av den första td-taggen i varje tr, dvs de sm innehåller vecknumren. 2012-08-22 Rune Körnefrs (rune.krnefrs@lnu.se) 6
Lägg till följande i CSS-kden: #schema tr td:nth-child(2):befre {cntent: "Må: "; #schema tr td:nth-child(3):befre {cntent: "Ti: "; #schema tr td:nth-child(4):befre {cntent: "On: "; #schema tr td:nth-child(5):befre {cntent: "T: "; #schema tr td:nth-child(6):befre {cntent: "Fr: "; Detta lägger till Må: i den andra td-taggen, Ti: i den tredje td-taggen, etc. Nu fick vi med även de tmma td-taggarna. Lägg till följande i CSS-kden: #schema tr td:empty {display:nne; Därmed visas inte de td-taggar sm är tmma. 6. Slut Därmed är övningarna slut för den här gången. Du har sett hur man i link-taggen kan använda mediaattributet för att referera till lika stilmallar för lika ändamål. Du har ckså sett hur vi kan skriva media queries i stilmallen för att skriva kd för lika skärmstrlekar. För att det ska fungera i mbilen, får du inte glömma brt meta-taggen med viewprt i HTML-dkumenten. 2012-08-22 Rune Körnefrs (rune.krnefrs@lnu.se) 7