Jakten på de perfekta knapparna

Att göra knappar som är snygga och fungerar bra är inte så lätt i nuvarande versionen av HTML.

Använda vanliga bilder

Man kan ju göra knapparna som vanliga bilder i t ex Photoshop, men nackdelen är att texten inte går att förstora eller förminska i webbläsarna. Villl man byta färg på dem eller ändra utseendet är det bara till att göra om dem igen.

Input submit

Eller så kan man göra input-varianten men dessa är nästan omöjliga att styla om med CSS. Och standardutseendet varierar ju i de olika webbläsarna vilket inte är så roligt om man vill att designen ska se samma ut oberoende av system.

HTML button

Button-taggen är lite trevligare eftersom den går att ändra design på och även lägga egna ikoner eller extra markup inom. ParticleTree har en bra genomgång av detta.

Filament Group testar vidare och visar upp en knapp som använder sliding-doors tekniken.

En stor nackdel med Button är dock att IE inte hanterar dem så bra. IE tar emot innerHTML istället för value när man postar formuläret.

Länkar som ser ut som knappar

På denna bloggen använder vi länkar som knappar eftersom då får man större frihet på utseendet. De är dock inte speciellt fancy.

Roger Johansson har gjort ett riktigt ambitiöst försök att göra om länkar till knappar med hjälp av extra markup och giffar. Ser snyggt ut men lite väl mycket extra kod.

Sen är ju faktiskt länkar till för navigation och inte för att posta formulär så denna lösningen brister lite ut semantisk synpunkt.

Vad är bäst?

Valet är inte självklart utan man får se vad som passar bäst för varje enskilt projekt. Ibland kanske de vanliga standardknapprna duger eller i andra fall kan vanliga bilder vara det enda rätta.

Skönt är i alla fall att det finns så många duktiga utvecklare där ute som gör sitt bästa för att hitta den där perfekta knappen.

By Jesper Lind

Radbryt och paragrafer

Robert Nyman skriver ett inlägg om i vilka lägen man bör använda <br />-taggen. Med de för tillfället 32 stycken kommentarerna fortsätter det hela till en intressant diskussion ur många synvinklar.

Tänkte passa på att ta skriva om en ganska massiv manöver jag nyligen genomförde på den här bloggen. Innan denna så avgränsades alla textstycken av dubbla radbryt och jag skrev all text för hand – inklusive taggarna. Inte en enda <p>-tagg på långt ögat nådde. Även alla länkar hårdkodade jag vilket blev väldigt jobbigt i längden, som ni kan förstå.

Så jag beslutade mig för att leta upp en WYSIWYG-editor och installera i vårt egenutvecklade bloggverktyg. Senast jag letade efter en sådan var för några år sen och då kunde jag aldrig hitta en som fungerade på alla marknadsledande webbläsare. Nu hittade jag äntligen en, nämligen den förträffliga TinyMCE, som för övrigt även används i Wordpress.

Sedan plöjde jag igenom alla inläggen med editorn och formaterade paragraferna som de bör göras. Rätt jobbigt kan jag lova eftersom vi precis som bloggen Reklamchock!!! nyligen firade 200-inläggs-jubileum.

Men nu är alla inlägg mer semantiskt korrekta och jag är en mycket gladare bloggare.

By Jesper Lind
1