CSS: Hur hittar jag det här?

Hitta rätt CSS

Att hitta rätt i stilmallar är inte alltid det lättaste för den ovana. Det finns dock ett väldigt enkelt knep som alla professionella webbutvecklare använder sig av, ett knep för att se vilka stilar som används på vilka ställen och var i koden man ändrar dem.

Webbläsarnas utvecklingsverktyg

Alla nyare webbläsare är utrustade med ett utvecklingsverktyg, eller “Verktyg för programmerare”. Med hjälp av detta verktyg kan man bland annat klicka på ett element på en webbplats och snabbt se elementets stilar och var någonstans stilarna sätts.

Beroende på webbläsare kan verktyget fungera olika — i den här artikeln kommer jag berätta hur verktyget fungerar i de fyra vanligaste webbläsarna.

Chrome och Firefox

Granska komponent

Det blir inte enklare än vad det är i Chrome och Firefox.

  1. Högerklicka på det element du vill granska.
  2. Välj “Granska komponent” (i Firefox “Inspektera element”).

Internet Explorer (8+)

Internet Explorer är nästan lika enkelt.

  1. Tryck på F12 på tangentbordet.
  2. Klicka på Välj element genom att klicka (“Välj element genom att klicka”) som ligger längst till vänster i verktyget.
  3. Klicka på det element du vill granska.

Safari

I Safari måste man först aktivera verktyget innan man kan använda det. För att aktivera verktyget gör du så här:

  1. Gå in i inställningarna.
  2. Välj “Avancerat”.
  3. Bocka för “Visa utvecklarmenyn i menyraden” och stäng inställningarna.

Sedan blir det lika enkelt som i Chrome och Firefox:

  1. Högerklicka på det element du vill granska.
  2. Välj “Granska element”.

Se enkelt vad som sker var

I utvecklingsverktyget ser du enkelt vad som sker var i koden. Om jag till exempel skulle vilja ändra färg på länkarna i menyn så ska jag gå till rad 363 i filen style.css.

Verktyg för programmerare

Om man vill testa en ändring för att se hur det kommer se ut så kan man göra det även här, då riskerar man inte att göra något galet när man uppdaterar en sida som är synlig för allmänheten.

Bilden i artikeln är tagen av Jeremy Keith.

Ivar Johansson

Skriven av

Ivar började med webbutveckling för tio år sedan och har sedan dess utvecklat breda kunskaper inom framför allt webbprestanda, sökmotorer och användarupplevelse. Idag driver han eget företag där han skapar webbplatser som är snabba, säkra och enkla att hantera.

  1. Hanna

    16 juni, 2014

    Hej! Jag använder Safari 7.0.4 och kan inte hitta ”Avancerat” eller något liknande…
    Är helt ny på mac/Safari och blir tokig på att jag inte kan granska komponent >_<

    //Hanna

  2. Ivar Johansson

    16 juni, 2014

    Hej Hanna! Uppe till höger i Safari bör du ha ett litet kugghjul, om du klickar där och sedan på ”Inställningar” så ska det poppa upp en ruta, där har du en flik som heter ”Avancerat”. :-)

Mejla mig: