Webbteknik 1

Laboration 8B-1 - Olika bilder baserat på enhetens upplösning och storlek

Vi börjar med att se hur vi kan specificera olika bildfiler, beroende på vilken pixeltäthet det finns på den enhet som användaren har.

Förberedelser

• Öppna mappen L8b i Visual Studio Code (VSC).
• Öppna filerna lab8b-1.html och style.css i VSC och öppna sidan i Live Server.
  • Du kommer endast göra ändringar i HTML-filen, men studera både HTML- och CSS-koden, så du förstår alla delar.
• I mappen img finns filerna cows300.jpg, cows600.jpg och cows900.jpg, som är samma bild i tre olika upplösningar.

Olika pixeltäthet

• I den första img-taggen (den inom det första section-elementet) lägger du till följande attribut

      srcset = "img/cows300.jpg 1x,
                img/cows600.jpg 2x,
                imgcows900.jpg 3x"
  

  • Dela gärna upp det på varsin rad, dvs radbrytning efter kommatecknen, för att öka läsbarheten och stilen på koden.

• Ta fram Följsamt designläge i Firefox. Prova att ändra pixelförhållande mellan DPR: 1, DPR: 2 och DPR: 3 i menyn högst upp, för att se att olika bilder används.

  • DPR = Device Pixel Ratio

Olika bredd på enhetens skärm (fönster) och användning av bilden

• I den andra img-taggen (den inom det andra section-elementet) lägger du till följande attribut

      srcset = "img/cows300.jpg 300w,
                img/cows600.jpg 600w,
                imgcows900.jpg 900w"
  

  • Detta talar om för webbläsaren vilken bredd (width) bilderna har.

• Ta fram Följsamt designläge i Firefox. Prova att ändra sidans bredd. Notera att olika bilder används. Vid en bredd över 700px används bilden cows900.jpg, vilket är onödigt i den layout som sidan då har. Sidans innehåll är max 1000px och bilden fyller endast halva denna bredd.

  • Se till att DPR: 1 nu är valt i Följsamt designläge.

• I img-taggen lägger du till följande attribut

      sizes = "(max-width: 700px) 100vw,
               (max-width: 1000px) 50vw,
               500px"
  

  • Den första gränsen på 700px är densamma som används i media queryn i CSS-koden, som ändrar layouten till en kolumn. För ett fönster som är mindre än 700px ska bilden fylla hela bredden (100vw).
  • Den andra gränsen på 1000px är den som satts med max-width för body i CSS-koden. För ett fönster mellan 700px och 1000px är det en layout med två kolumner, där bilden upptar halva bredden och därmed halva fönstrets bredd (50vw).
  • För fönster som är bredare än 1000px läggs det till marginaler enligt stilinställningen för margin i regeln för body. Bilden blir då inte bredare, utan kommer vara halva bredden, dvs 500px.

• Ta fram Följsamt designläge i Firefox. Prova att ändra fönstrets bredd. Nu används ingen större bild än vad som behövs.

Laboration 8B-2 — Olika bilder baserat på layout

I denna del ska vi studera picture-elementet, som används för att välja olika bildfiler för olika situationer.

Förberedelser

• Öppna mappen L8b i Visual Studio Code (VSC), om du inte redan har den öppen.
• Öppna filerna lab8b-2.html och style.css i VSC och öppna sidan i Live Server.
  • Du kommer endast göra ändringar i HTML-filen, men studera både HTML- och CSS-koden, så du förstår alla delar.
• I mappen img finns filerna cows-small.jpg, cows-narrow.jpg och cows-wide.jpg, som är bilden på korna fast beskuren på olika sätt och i olika storlek.

Val av olika bilder

• Lägg in start- och sluttagg för ett picture-element före och efter img-taggen.
• Ovanför img-taggen lägger du till ett source-element med attributen media="(max-width: 600px)" och srcsset="img/cows-wide.jpg".
• Ta fram Följsamt designläge i Firefox och prova att ändra fönstrets bredd, för att se att bilden byts ut i de båda layouterna.
• Lägg till ytterligare ett source-element ovanför det förra med attributen media="(max-width: 400px)" srcset="img/cows-small.jpg".
  • Det är viktigt att source-elementen (dvs deras media queries) kommer i denna ordning och att img-taggen ligger sist, för att valet av bild ska bli rätt.
• Ta fram Följsamt designläge i Firefox och prova att ändra fönstrets bredd. Det ska nu ske en växling mellan tre bilder vid de gränser du angett i media-attributen.

Laboration 8B-3 — Flera bilder i samma bildfil

Har man flera små bilder, t.ex. ikoner som används för knappar, kan det ta tid att läsa in alla filer, om bilderna sparas i varsin fil. Då kan man istället lägga alla bilder i en enda fil och därmed endast behöva hämta en bildfil från servern. Sedan lägger man in bilden som bakgrundsbild med CSS-koden och specificerar storlek och placering, så att endast önskad bild visas.

Förberedelser

• Öppna mappen L8b i Visual Studio Code (VSC), om du inte redan har den öppen.
• Öppna filerna lab8b-3.html och style.css i VSC och öppna sidan i Live Server.
  • Denna gång kommer du endast göra ändringar i CSS-filen, men studera både HTML- och CSS-koden, så du förstår alla delar.
• I mappen img finns filerna box.png och fruit-icons.png, som innehåller några små bilder. Öppna dessa, så du ser att varje fil innehåller flera bilder.

Boxen

• Skriv en regel för #boxBtn med följande egenskaper:

      display: inline-block; width: 290px; height: 120px;
      background: url(../img/box.png); background-repeat: no-repeat;
  

  • Hela bilden bör då visas i webbläsaren.

• Lägg till background-position: -145px 0px; i regeln för #boxBtn

  • Då förskjuts bilden, så att endast den andra halvan visas.

• Visa endast första halvan:

  • Ändra width till 145px.
  • Ändra första värdet i background-position till 0px. hela värdet ska alltså vara 0px 0px.

• Lägg till en regel för #boxBtn:hover med background-position: -145px 0px;

• Prova att föra muspekaren över boxen i webbläsaren.

En annan visuell effekt

• Lägg till transition: background-position 1s; i regeln för #boxBtn.
• Prova att föra muspekaren över boxen i webbläsaren.
  • I detta fall växlar man mellan de två bilderna med en glidande rörelse. Det passar ju inte direkt för de bilder på boxen som vi har i detta fall, men för andra bilder kanske man vill ha denna effekt.

Bilderna på frukter

• Lägg till följande egenskaper i regeln för #fruitlist a

      background-image: url(../img/fruit-icons.png);
      background-repeat: no-repeat;
      color: transparent;
  

  • Med en transparent färg på texten, görs texten i länkarna osynlig. Nu ska ju istället bilderna visas. Samtidigt finns texterna kvar i HTML-koden, för de som inte kan se bilderna, vilket ökar tillgängligheten.

• Skriv en regel för #fruitlist li:nth-of-type(1) a med background-position: 0px 0px;

• Skriv ytterligare fyra likadana regler, fast med ordningsnumren 2 till 5 inom nth-of-type och värdet -60px 0px, -120px 0px, etc. i background-position.

• Kontrollera i webbläsaren att bilderna är fördelade till de olika rutorna.