kzkw.net

Jeg har sittet her et par dager nå og forsøkt å rense koden til kommentarskjemaet til WordPress.

Jeg har alltid syntes at koden har vært rotete, unødvendig mye markup og rett og slett stygg. Nå skal jeg være den første til å innrømme at jeg har selv vært behjelpelig med dette, og har produsert mye rart på denne fronten opp gjennom åra.

Det hele handler om å lage et oversiktlig og pent skjema. Klassikeren er bruk av <br /> for å få feltene til å ligge under hverandre.

I det siste har jeg istedet satt hvert element inne i <div>’er, for man må¹ ha dette uansett for at siden skal validere i xhtml. Men jeg har likevel syntes koden har hatt unødvendig mye markup, men har da ikke visst om noen bedre løsning.

Men så slo det meg at det er jo ikke verre enn å bruke css for å tvinge <label>² til å oppføre seg som et blokk-element³ .

#commentform label {display:block}

Dette skaper da en illusjon om at tekstene og skrivefeltene ligger under hverandre, og dermed kunne jeg strippe koden for alle <div>’ene jeg har satt inn.

Jeg satte også inn display:block for <textarea> for å unngå at “Legg til” knappen skulle havne ved siden av.

Fordelen med å strippe det helt er at hvis jeg med ett skulle ønske at teksten skal stå ved siden av skrivefeltet i stedet, så trenger jeg bare å gjøre endringer i css fila, i stedet for å måtte kode hele kommentarskjemaet på nytt og eventuelt legge inn css klasser for <div> elementene, noe som igjen skaper enda mer markup og div-suppe.

For de som ønsker et kommentarskjema med mindre markup, så har jeg laget .txt fil med både css’en og html’en som de kan kopiere og lime fra: kommentarskjema.txt

1. Det går også an å bruke <p>, <ins> m.fl.
2. Jeg bruker <label> på alle mine skjemaer, for å knytte informasjonsteksten til riktig skrivefelt. Se også WCAG 1.0 12.4 og 10.2
3. Både <label> , <input /> og de fleste andre html elementer som hører sammen med skjemaer er såkalte inline elementer, hvilket betyr at de vil legge seg på samme linje som resten av teksten. Kjente inline elementer er <strong> og <em>.