Webbteknik 1

Laboration 9B

Interaktivitet med CSS

I denna laboration ska rutor (div- eller span-element) visas och döljas på olika sätt. Interaktionen kommer vara på lite olika sätt och vi ska se hur vi kan hantera det med hjälp av CSS.

I exemplen används huvudsakligen visibility för att visa och dölja. Elementen är placerade med absolut positionering inom ett annat element med relativ positionerning. De rutor som visas hamnar då framför övrigt innahåll på sidan. Man kan också ta bort denna positionering och istället använda display med värdena block och none, för att visa och dölja, om man vill att rutorna ska visas som en del av övrigt innehåll på sidan.

Förberedelser

  • Öppna mappen L9b i Visual Studio Code (VSC).
  • Öppna filen index.html och style.css i VSC samt öppna sidan i Live Server.
  • Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.
    • Du kommer sedan göra tillägg i CSS-koden, för att skapa interaktiviteten.

1 :hover

  • Lägg till en regel för #one li div med visibility: hidden;
  • Lägg till ytterligare en regel för #one li:hover div med visibility: visible;
  • Prova i webbläsaren, genom att föra muspekaren över orden HTML och CSS i den första listan.

2 :active

  • Lägg till en regel för #two li div med visibility: hidden;

  • Lägg till ytterligare en regel för #two li:active div med visibility: visible;

  • Prova i webbläsaren, genom att klicka på orden HTML och CSS i den andra listan.

    • Rutan dyker upp och visas, så länge man håller musknappen nere.
    • Om man rubbar lite på musen, kan man råka markera den text man pekar på. För att förhindra det kan följande CSS-kod läggas till:
      • En regel för #two med user-select: none;

3 :checked

  • Studera HTML-koden för den tredje listan och notera att det nu finns ett label-element med texten man ska klicka på och en input-tagg för "checkbox". Observera också att input-taggen ligger som ett "syskon" före div-elementet som ska visas/döljas.

  • I CSS-koden lägger du in en regel för #three li input med display: none;

    • Detta gör att kryssrutorna döljs, men de kan fortfarande markeras, då man klickar på texten i label-elementen.

  • Lägg till en regel för #three li div med visibility: hidden;

  • Lägg till ytterligare en regel för #three li input:checked + div med visibility: visible;

  • Prova i webbläsaren, genom att klicka på orden HTML och CSS i listan.

    • Rutorna visas/döljs omväxlande vid klick. Båda rutorna kan också vara synliga samtidigt.
    • Detta är den teknik som vi redan använt, då vi skulle visa eller dölja navigeringsmenyn i laboration L5d.

4 :target

  • Studera HTML-koden för den fjärde listan och notera att det nu finns länkar för de ord man ska klicka på. I länkarna refereras det till de id som finns i div-elementen.

  • Lägg till en regel för #four li div med visibility: hidden;

  • Lägg till ytterligare en regel för #four li div:target med visibility: visible;

  • Prova i webbläsaren, genom att klicka på orden HTML och CSS i listan.

    • Då man klickar på en länk går webbläsaren till div-elementet, som är destinationen, dvs målet (target) för länken. Detta känner vi av i CSS-koden och visar rutan.
    • Det kan endast vara ett element som är "target", så därför kan endast en ruta i taget visas. Men vill man dölja den sista, måste vi se till att "target" blir något annat och det görs med länken under listan.
    • Tekniken fungerar inte så bra, om man scrollat i sidan, eftersom länken scrollar fram till det element som blir "target". Prova att göra fönstret mindre, scrolla ner till länkarna och klicka på dem.

5 :focus

  • Studera HTML-koden. Det är nu en del av ett formulär med två textfält. Denna gång är det span-elementen som ska visas/döljas.
  • Lägg till visibility: hidden; i regeln för #five span i CSS-koden.
  • Lägg till en regel för #five input:focus med background-color: #8E8; (eller annan valfri färg).
  • Lägg också till en regel för #five input:focus + span med visibility: visible;
  • Prova i webbläsaren, genom att klicka i textfälten.
    • Bakgrundsfärgen byts och texten till höger dyker upp, så länge fältet är i "fokus".

6 :focus

  • Studera HTML-koden. Det är nu samma struktur som då vi använde "checkbox", fast i detta fall är det istället textfält.

  • Lägg till en regel för #six li input med margin-left: -9999px;

    • Då hamnar textfälten långt till vänster och är inte synliga på sidan.

  • Lägg till en regel för #six li div med visibility: hidden;

  • Lägg till ytterligare en regel för #six li input:focus + div med visibility: visible;

  • Prova i webbläsaren, genom att klicka på texterna HTML och CSS i listan.

    • Klickar man på en text, hamnar motsvarande textfält i fokus och div-elementet visas.
    • Endast ett fält i taget kan vara i fokus, så endast en ruta kan visas.
    • Klickar man utanför listan, är inget fält i fokus, och därmed visas ingen ruta.

7 :checked — visa flera element, som specificeras av en class

  • Studera HTML-koden och CSS-koden.
  • Lägg till display: none; i regeln för .answer
  • Lägg till en regel för #seven input:checked ~ .answer med display: block;
    • Med operatorn ~ blir refererar man till alla element med klassen "answer" som är sykon med input-taggen och ligger efter den i HTML-koden.
  • Lägg också till en regel för #seven input:checked + label med background-color: #8EC;
    • Vi kan på detta sätt referera till label-elementet, eftersom det ligger efter input-taggen i HTML-koden.
  • Prova i webbläsaren, genom att klicka på "knappen".
    • Denna teknik för att visa och dölja flera textrutor används i veckoplanen på kursens webbplats. Den används också på en del laborationssidor, för att visa(dölja lösningsförslag.

Klar