Jag bloggar numera på http://blog.dileno.com ».

Prenumerera på RSS

Arkiv för CSS:

Använd länkstilar i CSS för en bättre användarupplevelse

På många webbplatser idag används inte de länkstilar som finns till hand - trots att de i allra högsta grad kan tillföra tydlighet och förbättra användarupplevelsen.

De olika länkstilarna jag talar om är följande:

  • a:link
  • a:visited
  • a:hover
  • a:active
  • a:focus

Genom att använda sig av samtliga länkstilar ovan (i den ordningen!) så kan du dels bestämma länkars beteende vid en rad olika användarfall, dels vara säker på att olika webbläsare tolkar och visar dina stilar korrekt. Dessutom slipper du lägga ner tid på att felsöka varför en viss länk får ett visst utseende vid ett visst användarfall - det finns olika bestämmelser hos webbläsare för i vilken ordning länkstilar ska läsas in - och håller man inte koll på detta så kan problem uppstå.

Så här ser en god uppsättning stilar ut för länkar:

a:link { color: #666 }
a:visited { color: #999 }
a:hover { color: #000 }
a:active,
a:focus { background: #000; color: #f1f1f1 }

3 CSS-egenskaper du har glömt

Det finns en otrolig mängd fina CSS-egenskaper att använda sig av. Här är 3 CSS-egenskaper du inte visste fanns - men som mycket väl kan hjälpa dig i din utveckling.

1. white-space

Med hjälp av white-space kan du tala om för webbläsaren hur tom yta (exempelvis mellanrum) ska renderas. Följande värden finns för white-space:

  • normal, där flera mellanslag visas som ett.
  • nowrap, för att inte radbryta text.
  • pre, för att förformatera text.

2. visibility

visibility-egenskapen kan förväxlas med display - båda kan nämligen användas för att visa eller dölja element. Skillnaden är att visibility: hidden döljer ett element, men ytan som innehåller elementet finns fortfarande kvar. display: none döljer elementet och ytan helt.

Värden för visibility:

  • visible, som visar ett element.
  • hidden, som döljer element men visar ytan de finns på.
  • collapse, som används för att plocka bort en rad eller kolumn i tabeller.

3. text-transform

Med hjälp av text-transform kan du rendera text i versaler (stora bokstäver), gemener (små bokstäver) eller helt enkelt göra första bokstaven i varje ord till versal.

Värden för text-transform:

  • uppercase, för versaler.
  • lowercase, för gemener.
  • capitalize, för att transformera första bokstaven i varje ord till versal.

Så positionerar du legend-elementet i formulär

Att positionera legend-elementet korrekt i ett formulär och få det att se likadant ut i alla webbläsare är omöjligt. Ett sätt att lösa problemet är att lägga in ett nytt element inuti legend-elementet och positionera det nya elementet - exempelvis en <span>:

<fieldset>
<legend><span>Registrera dig</span></legend>
...
</fieldset>

Med hjälp av CSS kan du sedan använda position-egenskapen för att positionera span-elementet:

fieldset { position: relative }

legend span {
position: absolute;
top: -16px;
left: 0
}

Om du inte tycker om den extra markup:en så kan du använda JavaScript för att lägga in det extra span-elementet. Du kan även skippa <legend> helt och hållet och i stället använda dig av en vanlig rubrik, exempelvis <h2>.

Så löser du problemet med knappar och padding i Internet Explorer

Internet Explorer (version 6 och 7) renderar felaktigt extra padding på knappar i formulär. Se jämförelsen mellan Internet Explorer (till vänster) och Firefox (till höger):

Exempel på rendering av knappar i Internet Explorer och Firefox

Som du ser renderar Internet Explorer extra utrymme till vänster och höger om texten i knappen.

Problemet löser du med hjälp av overflow och width i CSS, så här:

input {
overflow: visible;
width: auto
}

Fixa buggen med overflow och vertikal scrollningslist i IE

Använder man overflow: auto på ett HTML-element (exempelvis <pre>) får man alltid en vertikal scrollningslist i Internet Explorer-webbläsare (jag har testat i version 6 och 7)  - oavsett om innehållet får plats inuti HTML-elementet eller inte. Så här kan det se ut:

IE overflow scrollningslist-bugg

Vad man kan göra är att använda overflow: visible samt overflow-x och overflow-y i stället:

pre {
overflow: visible;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 18px
}

Då slipper man den vertikala scrollningslisten. Observera att man även behöver lägga till en padding-bottom som är lika hög som en scrollningslist , det vill säga 18px. Detta för att innehållet på sista raden inte ska vara dolt.

Till sidhuvudet

Clicky Web Analytics