Sådan liveredigeres et websted med Firefox’s webudviklerværktøj

Ville dit websted se bedre ud, hvis logoet blev flyttet fem pixels til højre eller havde en blå baggrund? Ville tilføjelse af en ramme eller skygger til billederne i dine fremhævede indlæg få dem til at springe mere ud? Moderne browsere som Firefox kommer med webudviklerværktøjer, der giver dig mulighed for at inspicere et websteds indre funktioner og foretage live-redigeringer og se resultaterne i realtid.

I denne vejledning lærer du, hvordan du gør brug af Firefoxs webudviklerværktøjer til at liveredigere ethvert websted.

Bemærk: Denne vejledning gælder for de fleste browsere, inklusive Chrome, Opera og Safari.

Mød webudviklerværktøjerne

Firefox’s Web Developer Tools er et omfattende sæt værktøjer, fra at vise alle DOM-elementer til at kunne måle dens hastighed. Til denne vejledning skal du kun bruge værktøjerne “Inspektør” og “Style Editor”.

Tænd Firefox og besøg en hvilken som helst/din side. Fra Firefox’s hamburgermenu (øverst til højre som standard), vælg “Web Developer -> Style Editor” eller tryk på Flytte + F7 kombination på dit tastatur.

Firefox’s webudviklerpanel vises på den ene side af vinduet – normalt i den nederste del. Du kan ændre dens position ved at klikke på knappen med tre prikker øverst til højre på panelet og vælge “Dock til højre/venstre” eller “Separat vindue”.

Bemærk: Denne vejledning viser dig ikke, hvordan du koder HTML og CSS. Du kan lære det grundlæggende her.

Inspicering af elementet

For at kunne påvirke, hvordan et element ser ud, skal du være i stand til at identificere det. Klik på den allerførste knap på dens værktøjslinje, eller tryk på Ctrl + Flytte + C på dit tastatur for at aktivere elementvælgertilstanden.

Flyt musen rundt på webstedet for at se forskellige elementer på websiden fremhævet. Ved siden af ​​dem vil du se deres primære identifikator svæve i en pop-up.

Når du klikker på et element, vil det blive valgt på fanen Inspektør i udviklerværktøjerne.

Når du finder det element, du ønsker at justere, skal du højreklikke på dets indgang i Developer Tools Inspector og vælge fra pop op-vinduet, der vises – “Kopier -> CSS-vælger.”

Start din Live Edit

Med dit elements CSS-vælger kopieret til udklipsholderen, skal du flytte tilbage til fanen Style Editor i vinduet Udviklerværktøjer. Klik på knappen “+” øverst til venstre for at “Opret og tilføj et nyt typografiark til dokumentet.”

Indsæt din CSS-vælger i det nye, tomme typografiark. Tilføj et mellemrum efterfulgt af et sæt åbne og lukkede krøllede parenteser.

I CSS defineres et elements udseende ved først at “målrette det” ved hjælp af en identifikator som den CSS-vælger, og derefter tilføje nogle regler, der påvirker dets udseende, grupperet inden for krøllede parenteser. Alt placeret mellem de åbne og lukkede krøllede parenteser påvirker det “målrettede element”.

Hvis du f.eks. tilføjer reglen nedenfor:

display: none;

Dette vil skjule elementet, hvor det bruges. Det er nok den nemmeste måde at vide, at du målretter mod det rigtige element på din side. Hvis den forsvinder, var det faktisk den, du ønsker, og du kan slette denne regel for at prøve andre. Hvis det ikke forsvandt, er det tid til at gå tilbage til inspektøren og vælge noget andet.

Vi viser dig ikke, hvordan du koder CSS her, men du kan lege med nogle af de populære regler som:

border: 2px solid rgba(255,0,0,0.5);
color: #333;
font-size:20px;

Du vil bemærke, at webstedets element ændres, når du tilføjer regler til CSS-stilarket.

Som en afsluttende bemærkning skal du huske, at intet er gemt. Hvis du kan lide, hvordan dine tweaks ser ud, skal du kopiere din kode et sted – i en TXT-fil eller dit foretrukne noteprogram – så du eller en designer/udvikler vil være i stand til at tilføje den til dit websteds stylesheet for at gøre ændringerne permanente. Hvis du har brug for at lære om CSS, så tjek nogle onlinespil for at hjælpe dig med at mestre færdigheden.