Sådan bruger jeg AI til at udvikle CSS til min hjemmeside
AI kan være en praktisk hjælp, når man arbejder med CSS på en hjemmeside. På HandikapINFO bruger jeg blandt andet ChatGPT til at udvikle, tilpasse og fejlfinde min egen CSS. Det foregår som et samarbejde, hvor jeg bestemmer, hvordan hjemmesiden skal fungere og se ud, mens AI hjælper med selve koden og med at finde tekniske løsninger.
CSS styrer meget mere end farver
CSS bruges til at bestemme hjemmesidens udseende, men det handler om meget mere end farver og skrifttyper. CSS kan blandt andet styre placering, afstande, størrelser, bokse, menuer, knapper, mobilvisning og hvordan elementer reagerer, når musen føres hen over dem.
På HandikapINFO har jeg samlet mine egne tilpasninger i en særskilt CSS-fil. Den indeholder blandt andet hjemmesidens farveprofil, tilpasninger til mobilmenuen, informationsbokse, JUX News Wall Pro, cookie-banneret og den flydende knap til cookieindstillinger.
Jeg fortæller AI, hvad jeg vil opnå
Når jeg bruger AI til CSS, begynder arbejdet normalt ikke med et spørgsmål om en bestemt CSS-egenskab. Jeg beskriver i stedet det resultat, jeg ønsker på hjemmesiden.
Det kan eksempelvis være, at en titel altid skal være synlig, at en knap skal placeres et bestemt sted på skærmen, eller at et element skal fungere anderledes på en mobiltelefon end på en computer.
AI kan derefter hjælpe med at omsætte ønsket til den CSS, der skal bruges.
Den eksisterende CSS er vigtig
En hjemmeside består sjældent af CSS, der står helt alene. På HandikapINFO arbejder min egen CSS sammen med blandt andet Joomla, Astroid Framework og JUX News Wall Pro.
Derfor kan det være vigtigt, at AI får mulighed for at se den eksisterende CSS. En ny regel kan ellers komme i konflikt med noget, der allerede findes, eller løse et problem ét sted og samtidig skabe et nyt problem et andet sted.
Når AI kender den eksisterende kode, kan nye ændringer i stedet tilpasses den struktur og de regler, der allerede bruges.
Et konkret eksempel fra HandikapINFO
JUX News Wall Pro bruges på HandikapINFO til de fliser, der fungerer som en del af navigationen mellem kategorier, emner og artikler. Derfor er det vigtigt, at fliserne opfører sig på den måde, jeg ønsker.
I min CSS findes der derfor særlige regler til JUX News Wall Pro. Blandt andet er artikeltitlerne tvunget til altid at være synlige. De må ikke forsvinde eller først blive vist som en effekt, når musen føres hen over flisen.
Her kan AI hjælpe med at undersøge den eksisterende CSS og udarbejde de nødvendige regler, men det er stadig mig, der definerer kravet: Titlen skal være synlig.
Afprøvning er en del af arbejdet
At AI har skrevet noget CSS betyder ikke automatisk, at arbejdet er færdigt. Koden skal afprøves på den rigtige hjemmeside.
Hvis resultatet ikke er som forventet, kan jeg vise AI et skærmbillede, beskrive fejlen eller vise den relevante del af koden. Derefter kan vi undersøge, hvorfor resultatet blev anderledes end forventet og rette løsningen.
Beskriv problemet → vis den eksisterende CSS → få et forslag → indsæt koden → test på hjemmesiden → vis resultatet → ret koden hvis det er nødvendigt.
AI kan også hjælpe med at finde fejl
AI er ikke kun nyttig, når der skal skrives ny kode. Det kan også bruges til fejlfinding.
Hvis en CSS-regel pludselig ikke virker, kan problemet eksempelvis skyldes en anden regel, en mere specifik selector eller noget i hjemmesidens template eller en installeret udvidelse.
Ved at vise AI både problemet og den relevante kode kan man bruge dialogen til systematisk at lede efter årsagen i stedet for blot at ændre tilfældige CSS-regler og håbe, at problemet forsvinder.
CSS-filen bliver samtidig dokumentation
Min CSS til HandikapINFO er opdelt i tydelige sektioner med kommentarer. Der er blandt andet særskilte områder til farveprofil, footer, mobilmenu, informationsbokse, JUX News Wall Pro, cookie-banner, responsiv visning og den flydende cookieknap.
Det gør det lettere både for mig og AI at finde tilbage til den relevante del af koden senere. Hvis der skal ændres noget ved cookie-banneret, behøver vi eksempelvis ikke begynde med at gennemgå hele filen uden at vide, hvor vi skal lede.
AI skriver kode – men jeg bestemmer løsningen
Det vigtigste i denne arbejdsform er, at AI ikke overtager udviklingen af hjemmesiden. Jeg beslutter, hvad der skal ændres, hvordan siden skal fungere, og om resultatet er det rigtige.
AI gør det til gengæld muligt at arbejde med tekniske løsninger, få forklaret kode og komme hurtigere frem til mulige løsninger, når noget ikke fungerer som forventet.
Det gør AI til et programmeringsværktøj og en teknisk sparringspartner frem for en automatisk hjemmesidebygger.
