Riktlinje nr 82 Prio 2

Använd stilmallar för att separera presentationen från innehållet

Använd stilmallar (cascading style sheets, css:er), där ni samlar alla regler för webbplatsens utseende: hur textelement ska se ut, var på sidan objekt ska placeras och hur objektens utseende ska justeras.


Rekommendationer för stilmallarLänk hit

  • Samla regler för webbplatsens utseende i stilmallar.
  • Definiera stilmallarna i externa stilmallsdokument, i så stor utsträckning som möjligt. Använd inte style-attributet för att definiera stilmallar direkt i HTML-koden, eftersom ni då blandar uppmärkning för semantik och presentation, vilket kan leda till problem för vissa användare och i vissa webbläsare.

Kort introduktion till CSSLänk hit

Stilmallar används för att styra hur texter, rubriker och länkar ska se ut i den visuella presentationen. De innehåller kopplingar mellan visuell och strukturell presentation. Om vi tar rubriker som exempel så definierar du dokumentets struktur med hjälp av korrekta rubrikelement (h1, h2 och så vidare) och anger sedan rubrikernas utseende genom att definiera de olika h-elementens utseende i stilmallar. Med h-elementet skapar du den strukturella och hierarkiska rubrikindelningen, och med stilmallarna talar du om hur varje rubriktyp ska se ut. Båda delarna är lika viktiga.

Ibland behövs rubriker som i strukturell mening är h1:or men som behöver ha ett särskilt utseende rent visuellt. Det går att lösa med flera klasser för h-elementen i stilmallarna.

Stilmallar kan länkas samman i en hierarki för att bryta isär stora och komplexa definitioner till generella och återanvändbara komponenter. Då kan besökarna också lättare styra layouten efter sina önskemål och behov, genom egna skräddarsydda stilmallar – user stylesheets – till exempel för att visa en sida med hög kontrast.


ExempelLänk hit

Stilmallsbaserad layout finns bland annat hos Bolagsverket (www.bolagsverket.se) och Södersjukhuset (www.sodersjukhuset.se).


MätbarhetLänk hit

På ett generellt plan kan ni validera ert användande av stilmallar med W3C:s valideringsverktyg. För att utvärdera hur väl stilmallarna används för presentation och layout behöver ni även gå igenom stilmallskoden manuellt.


Terminologi Länk hit

Semantisk betyder ungefär meningsfull eller betydelsebärande. Ett exempel på semantiskt html-element är h1. H står för heading, alltså rubrik, och 1 står för högsta nivån. En text som märks upp med ett icke-semantiskt element som t.ex. span och formges med fetstil och stora tecken kanske ser ut som en rubrik, men om den inte kodas semantiskt med h1 vet till exempel inte ett skärmläsarprogram att det är en rubrik, vilket försvårar navigationen.



Kommetarer (0)