Når du køber via links på vores websted, kan vi optjene en affiliate-kommission. Sådan fungerer det.

Tilføjelse af tilpassede CSS-regler til en gengivet webside er en fantastisk måde at teste nye vælgere på, før du forpligter dig dem til en kodebase – og den bedste måde at teste vælgere i browseren er med et sæt Chrome udvidelser.

  • 33 Chrome-udvidelser til designere og udviklere

Det er fordelagtigt at teste vælgere i browseren, fordi det giver dig et øjeblikkeligt kig på, om din nye vælger eller ej har tilstrækkelig specificitet, hvordan det vil påvirke andre elementer i dokumentflowet, og hvordan det ser ud i live-konteksten af side.

Men mest af alt er test af CSS i browseren en hurtig måde at prototype og dele nye designideer.

  • 10 virkelig nyttige responsive webdesign tutorials

Sammen giver de tre gratis Chrome-plugins nedenfor os en hurtig og håndgribelig arbejdsgang til hurtige forhåndsvisning af skærmbilleder af CSS-ændringer på en side. Vi kan teste og forhåndsvise farveændringer, nye skrifttyper og justere linje- og afsnitsafstand, før vi rent faktisk ændrer hjemmesiden.

Injicer ny CSS på en side, der allerede er gengivet [klik på ikonet øverst til højre for at forstørre billedet]
Injicer ny CSS på en side, der allerede er gengivet [klik på ikonet øverst til højre for at forstørre billedet]

UserCSS giver os et vindue til at tilføje nye CSS-regler til en side, der allerede er blevet gengivet af browseren. Den største fordel ved bruger-CSS i forhold til standard-DevTools er, at vores CSS kan gemmes i et typografiark og er vedvarende mellem opdateringer. Derudover har pluginnet en skifteknap, der gør A/B-skærmbilleder til en leg.

Indstil dit browservindue til en præcis bredde og højde [klik på ikonet øverst til højre for at forstørre billedet]
Indstil dit browservindue til en præcis bredde og højde [klik på ikonet øverst til højre for at forstørre billedet]

Window Resizer giver os forudindstillinger, der præcist indstiller browservinduets dimensioner. Det er nyttigt til at lave skærmbilleder til diasshow og produktskærme og til at opretholde ensartede størrelser på tværs af mange skærmbilleder. Det er også utroligt uvurderligt, hvis du vil lave skærmbilleder af responsive designs.

Optag CSS-ændringer og gem som et billede [klik på ikonet øverst til højre for at forstørre billedet]
Optag CSS-ændringer og gem som et billede [klik på ikonet øverst til højre for at forstørre billedet]

Full Page Screen Capture laver en helsides PNG-skærmoptagelse af en webside, fra sidehoved til sidefod. Det er meget nemt at bruge: Klik på optag-knappen, og plugin'et genererer et PNG-billede og åbner det i et nyt vindue.

Mens du er her, så tjek disse relaterede artikler:

  • En introduktion til frontend-test – Hvornår og hvordan man bruger forskellige frontend-kodetestmuligheder
  • 10 bedste stykker brugertestsoftware
  • 10 trin til at skabe en engagerende brugeroplevelse