Gå direkt till sidans huvudinnehåll

Är CSS-koden korrekt?

Är CSS-koden korrekt?

CSS är en förkortning av Cascading Style Sheets och är språket på webben för layout och visuella saker som färger, textstorlekar och liknande.

Varför CSS-koden ska följa standarden

När det gäller prestanda är det viktigt med bra skriven CSS eftersom fel kan få webbläsaren att stanna upp lite. Webbläsare är väldigt feltoleranta vilket gör att fel inte nödvändigtvis syns rent visuellt.

När det gäller tillgänglighet och användbarhet kan felaktig CSS-kod orsaka felaktig presentation och få saker att inte fungera som det är tänkt. Webbläsarna har olika renderingsmotorer vilket gör att korrekt CSS-kod är en bra garant mot dåliga överraskningar i webbläsare man inte testat mot.

Hur CSS-testet går till

Sedan januari 2021 hämtas all form av CSS ut från den undersökta webbsidan. Dels den CSS-kod som är inline, alltså inbäddad i HTML-koden på olika sätt, men också inlänkade filer. Allt detta postas sedan till W3C Nu HTML Checker & CSS Validator för utvärdering. Vi har baserat på W3C:s svar byggt en bedömning. Den bedömningen är inga hemligheter, det är rent utav open source, men kan vara kämpig läsning för dig som inte programmerar.
Läs koden för CSS-testet på Github: css_validator_w3c.py

Betyg på CSS

Fram till januari 2021 fick man heltal i betyg. Sedan dess är det mer granulärt och decimaler har introducerats för att skilja ut de olika webbplatserna mer. Som vanligt kan ingen webbplats få sämre än en etta eller bättre än en femma.

Tänket bakom betygen är följande:

  • Grundpoängen är att alla börjar med en femma
  • Betyget baseras på antalet typer av fel i CSS-materialet (grupperade fel)
  • Sekundärt påverkas betyget av antalet fel
  • Vi validerar egenskapers namn mot MDN:s CSS-referens

Det är på grund av denna variation svårt att på ett enkelt sätt beskriva betygsnivåerna. Detta har vi försökt väga upp genom total transparens i meddelandet för respektive CSS-test. Varje test börjar på en femma och så räknas det bort från det betyget ju mer problem som upptäcks.


Våra äldre CSS-test

Vårt första CSS-test användes fram till sensommaren 2020. Det använde sig av det så kallade Jigsaw-testet, vilket över tid visade sig straffa de som använde modern webbstandard ofördelaktigt mycket mer. Så det testet byttes i augusti 2020 ut mot W3C:s nyare test som är att betrakta som en pågående beta, dock mer tolerant med moderna tekniker.

CSS-test vi hade under hösten 2020 visade sig dock ha en hel del svagheter med att upptäcka uppenbara felaktigheter. Dock var det i mindre utsträckning orättvist mot de som använde modern webbstandard. Den kanske största nackdelen var att den bara kollade på inline-CSS, vilket vissa anser i sig är dålig praxis. Alltså, de som undvek inline var mindre exponerade för att få sina brister påtalade. Detta är nu fixat.

Betygsättning (fram till januari 2021)

Betygen en webbplats kan få är:

  • 5 - då får inte CSS-koden innehålla några fel.
  • 4 - om CSS-koden har 1-5 st fel.
  • 3 - för om det finns 6-10 st fel.
  • 2 - blir det om det finns 11-20 st fel i CSS-koden.
  • 1 - för de som har fler än 20 st fel.

Förtydligande jämfört med W3C:s CSS-test

Det går tyvärr inte att med W3C:s publika tester att enkelt validera exakt vad som felas en webbplats som inte får toppbetyg på Webperf. Dessvärre inte heller genom att köra grundkonfigurationen av Webperf Core som är släppt som open source och är samma tester som körs här på Webperf.se
Detta beror på att det som listas på webbplatsen Webperf.se granskar all form av CSS. Inline-CSS, det som länkas in som externa CSS-filer, samt det som importeras från externa CSS-filer.
Vi undersöker hur vi i Webperf Core ska kunna hjälpa organisationer och webbyråer att köra testerna med exakt samma inställningar som de som visas upp här på webbplatsen. Frågan har ställts av ett antal organisationer som är listade på Webperf.se, men vi som jobbar med Webperf inser också att det nog är många som inte är bekväma med att installera Webperf Core, eller köra sina egna tester, eller att man har utrymme att betala externa utvecklare att göra det åt en. Vi ska försöka fixa en premium-tjänst på Webperf för bland annat detta. Men det kommer nog dröja.

Mer om CSS (Cascading Style Sheets)

Till toppen