Att göra en hemsida responsiv betyder att man ser till att den visas på ett bra sätt oberoende på vilken bredd användaren har på sin skärm som han tittar på sidan med. Om man tittar på en hemsida via en dator så har man ofta ett ganska brett webbläsarfönster. Men om man ska titta på samma sida med mobiltelefonen så är skärmen ofta smalare än den är hög (beroende på hur du håller mobilen såkart). Så för att kunna titta på samma sida med utrustning som har olika format så måste vi anpassa sidan på lite olika sätt. Detta kan vara till exempel att man övergår från en layout där delar ligger placerade i flera kolumner till att bara visas i en kolumn. Menyer måste ofta anpassas från en horisontell till en vertikal layout.
För att anpassa oss till olika skärmbredder kan vi använda oss av något som kallas för media-queries. Dessa har egentligen många olika användningsområden som gör att man kan anpassa utseendet beroende på vilken typ av mediaenhet som användaren använder, men det vi främst ska titta på är hur sidan kan förändras beroende på hur bred skärm (Webbläsare) som användaren använder. Detta är något vi dessutom kan ange i olika steg så att då sidan är mellan 500-800 pixlar bred så har vi röd bakgrund, mellan 801-1000 pixlar så är bakgrunden gul och större än 1001 pixlar så är bakgrunden grön. Om man då ändrar på bredden på webbläsaren så kommer bakgrundsfärgen automatiskt att byta beroende på mellan vilket intervall man befinner sig.
Den vanligaste typen av förändring är dock att man förändrar en layout för att till exempel gå från en två-kolumnslayout på bred skärm, till en-kolumnslayout på en smal skärm. Eller att som nämnt tidigare byta från en horisontell till en vertikal meny när skärmen smalnar av.
CSS: I css så kan man lägga in olika formatering beroende på vilken typ av enhet som man använder för att titta på sidan. Det finns till exempel screen - för alla typer av skärmar, print - för utskrifter och speech - inställningar för text till tal (fler typer finns). Normalt är dock att man vill formatera för alla typer samtidigt så därför finns även all - Formaterar alla typer samtidigt. För den här uppgiften så vill vi begränsa olika bredder av webbläsarens så då kan vi också i media-frågan bestämma max och min bredd med max-witdh och min-width. En mediafråga i CSS kan se ut såhär:
Detta kommer att göra så att alla <div>-taggar byter bakgrundsfärg till laxrosa och alla <p>-taggar får textfärgen mörkblå om skärmen där sidan visas är mellan 501 och 1000 pixlar bred. Utanför detta område så gäller dess normala färgsättning. @media tillhör ett regelverk som har samlingsnamnet "at-rules" och det ska tolkas mer som att det är en regel (eng. statement) som ska följas (Jämför med t.ex. @charset och @import). Detta innebär att vi sätter upp en regel för vad som ska hända om ett vilkor uppnås, i detta fall en viss skärmbredd. @media regler bör alltid komma efter all normal formatering i koden för att säkerställa att formateringen blir korrekt.
Ta gärna lite tid och titta på den här sidan, och fram för allt, se till att öppna upp de färgade områdena (klicka på pilarna) som beskriver hur de olika delarna av media queryn fungerar. När vi lärt oss hur grid fungerar i CSS så kommer vi att se att media queries är väldigt användbara när vi vill planera och förändra olika layouter. Men om ni är nyfikna redan nu så ta en titt på exemplen på w3schools.
Inuti @media så kan man formatera flertalet olika element precis som man gör normalt i CSS. Se bara till att formateringen ligger inom @medias krullparanteser ( { och } ). Det går bra att använda samma selektorer som tidigare i CSS-filen, det är bara de egenskaper som får nya värden som förändras.
Ibland vill man kunna lagra text i sitt HTML-dokument som bara ska visas vid bestämda skärmbredder till exempel. För att lagra en specifik text på ett objekt (tagg) så använder man sig av attributet data-* där * är ett valfritt ord som beskriver vilken information man vill lagra.
Man kan lägga till flera data-* attribut på samma tagg.
För att visa information från ett data-*-attribut som en extra text så kan man använda sig av CSS-egenskapen content. Om HTML koden för ett element är:
Så skriver vi såhär i CSS:koden för att visa beskrivningen före och adressen efter texten:
Om man tittar lite närmare på content så ser vi att den ska innehålla en textsträng men därefter kan vi lägga till mer text genom att bara sätta ett mellanslag mellan texterna. Vi kan också hämta text från html-koden genom att använda kommandot attr(###namnet på värdet på det attribut vi vill sätta in###). Just detta kan vara användbart i vissa situationer.
Tänk på att innehållet på en hemsida ska defineras i HTML, och utseendet i CSS, så därför bör man undvika att lägga innehåll direkt i css-koden.
Ovanstående kod borde get ett resultat som ser ut ungefär som:
Notera att hela texten blir en länk, detta beror på att ::before och ::after är pseudo-element som ärver egenskaperna av a-taggen, d.v.s de räknas som barn till elementet de skapades ifrån. Färgerna valdes endast för att de olika elementen skulle bli tydliga, annars så skulle allt ha samma formatering som a-taggen.
Genom att kombinera @media, ::after, ::before och content så kan man med hjälp av de olika attributen i HTML skapa ganska tuffa effekter som beror på hur stort webbläsarfönstret är.
Uppgiften är att skapa en responsiv hemsida där utseendet på till exempel några länkar ändras beroende på hur stort webbläsarfönstert är.
Alla ovanstående kriterier ska uppfyllas.
::before och ::afterPseudo-elementen ::before och ::after skapar barnelement (children) till det element som de placeras på. Eftersom dessa element är helt tomma (då de inte genereras från HTML-kod så måste elementen ges ett innehåll innan de kan synas på skärmen. För att ge dessa element ett innehåll så måste alltid content-attributet finnas. Men det betyder inte att det måste finnas text i ett pseudo-element, man kan lämna content tomt d.v.s. content: ""; om man vill använda pseudo-elementen till något annat t.ex. en visuel effekt.
Just att använda ::before och ::after som tomma element där man lägger till grafiska effekter är ett vanligt knep i modern CSS. Man kan ofta se det i samband med effekter på knappar eller om man behöver göra någon annan typ av effekt på en bild till exempel för att få text att synas bättre.
En del av knappeffekterna som jag gjort på den här sidan använder sig av ::before och ::after pseudo-element för att skapa sina hover-effekter.
För att få en bättre förståelse för de egenskaperna som man kan använda med dessa pseudo-element så tycker jag att Den här videon och del två i den genomgången, som beskriver hur content fungerar, är mycket bra genomgångar. En tredje kort film ger tre exempel på hur man praktiskt kan använda sig av dessa metoder.
Du ska göra en alternativ markering av ett inline element så skriv en liten text där ett ord eller en mening i texten ska kapslas in i en <span>-tagg med ett passande class-namn. Markeringen ska bestå av en .png fil som du ska skapa för att göra en underline effekt under den valda texten. Använd ::before och/eller ::after för att positionera bilden under texten. Om du känner dig ambitiös så kan du försöka animera den så att effekten förstärks vid hover.
Ta insperation av sidorna och videofilmerna här ovan och gör din egen variant på effekt med hjälp av pseudo-elementen. Använd ::before och ::after för att göra någon typ av visuell effekt när man gör en :hover över ett objekt.
Objektet ska ha en text. Välj gärna ett inspirerande citat.
Undersök hur du kan använda dig av z-index eller isolation: isolate; för att texten i ditt objekt fortfarande ska visas även när du använder ::before och ::after.