CSS: Hur hittar jag det här?

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

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”) 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.

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.