Denne guide er tiltænkt udviklere der står overfor at skulle udvikle eller opdatere løsninger, der er integreret i Skat TastSelv.
Guiden behandler både de overordnede designprincipper men også formatteringen af enkelte HTML-elementer.
Formålet med guiden er at sikre en ensartet brugeroplevelse på skat.dk og især TastSelv. Guiden har dog ligeldes det vigtige formål at sikre, at siderne kan vises tilfredstillende på alle skærmstørrelser, herunder også smartphones og tablets via nogle responsive design principper.
I guidens tekster formatteres teknisk indhold, hovedsageligt CSS-klassenavne og HTML-tags således: css-klassenavn.
Længere kodestumper vil være formatterede i blokke:
Penge tilbage: 1000
Guiden bruger TastSelvMain.css som stylesheet og alle ændringer til dette stylesheet reflekteres direkte i denne guide.
Det er ikke tilladt at ændre på det grundlæggede layout og typografier, som de er angivet i guiden.
Eventuelle tilpasninger kan tilføjes i tilfælde, hvor der ønskes funktionalitet, som ikke er understøttet af guiden. Tilpasninger skal visuelt have samme look and feel, som de øvrige elementer.
Tilpasninger skal laves i et separat stylesheet.
Denne guide understøtter de fleste moderne browsere, dvs. IE9+, Firefox20+, Chrome20+.
Specielt for Chrome: Hvis guiden ikke hostes på en decideret webserver men køres direkte fra en local maskine skal man starte browseren således: chrome.exe –allow-file-access-from-files
HTML-kode skal være valid html og være velformet og semantisk korrekt.
I det omfang det er muligt og giver mening er det dog tilladt at berige integrationer med Javascript, så længe det ikke indvirker negativt på brugeroplevelsen og guidens øvrige principper.
JQuery indeholder en række komponenter og javascriptbibliotekter, der er kompartible out of the box, hvorfor det er hensigtsmæssigt at tage udgangspunkt i disse.
Javascript skal inkluderes i eksterne filer, og inkluderes i bunden af HTML siden.
Løsninger skal overholde principperne for WCAG 2.0 level AA.
Understøttelse af browsere findes under GDG dokumentet
Guiden indeholder i vid udstrækning elementer fra HTML5 og CSS3, der ikke er fuldt understøttede i alle browsere. Det er tilladt at benytte sådanne elementer progressivt, så længe de ikke er nødvendige for funktioner eller ødelægger look and feel.
Denne version af guiden bruger HTML5 specifikationen. For at bruge denne specifikation skal html elementet udfyldes således:
<!DOCTYPE html> <html lang="da"> ... </html>
For alle størrelser der angives i stylesheets skal dette angives med em eller ved procent
Der skal såvidt muligt bruges simpel markup, med primær brug af allerede understøttede html elementer. Div og span tags skal såvidt muligt undgås og skal kun bruges til layout formål (positionering på siden og/eller i forhold til andre elemeneter på siden). Hvis der bruges div tags skal disse så vidt muligt undgås at indlejres i hinanden.
Der må ikke bruges inline styling eller javascript, alt styling og javascript skal angives i eksterne css og js filer.
Tables skal kun bruges til tabulær data og må ikke bruges til at positionere elementer på siden.
CSS3 background-image optioner inholder background-clip, background-origin og background-size. Disse kan bruges, dog skal der for IE8, hvor disse egenskaber ikke er supporterede bruges en fallback farve da den ikke kan fortolke dem.
Denne CSS egenskab kan for det meste bruges af alle browsere uden et prefix. Hvis ikke det understøttes af en browser vil den rendere kantede hjørner. Note: ved brug på større elementer kan der opleves en degradering af performance
Er understøttet af de fleste browsere, med foranstillede fallbacks: -moz-box-sizing: border-box; for Firefox. IE8 understøtter ikke box-sizing: border-box; med min-width/max-width og min-height/max-height.
data-* attributter kan bruges i alle browsere, i ældre browsere kan man bruge elem.getAttribute('data-blabla') istedet for elem.dataset.blabla for at tilgå dem.
Understøttes af alle browsere
Understøttes kun af de mest moderne browsere. JQuery form validation kan bruges i stedet.
Brugen af gradients skal altid prefixes med -o-, -webkit-, -moz- når gradients bruges som background. Brug en fallback farve hvis en browser ikke kan rendere en gradient. Brug gerne linear-gradient, eksempel:
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));
Alle nuværende (moderne) browsere understøtter: <aside>, <header>, <footer>, <nav>, <main>, <article>, <section>. For IE8 kan modernizr.jz polyfill bruges til at understøtte disse elementer.
Dette input vil falde tilbage til tekstuel input hvis det ikke understøttes.
Dette input vil falde tilbage til tekstuel input hvis det ikke understøttes.
Dette input vil falde tilbage til tekstuel input hvis det ikke understøttes.
Understøttes af de fleste moderne browsere, hvis ikke de understøttes ignoreres de.
Understøttes ikke af IE8
Understøttes af alle browsere.
Understøttes af alle browsere indtil IE8, for denne browser kan filter (som er MS specifik) bruges.
Understøttes af alle browsere indtil IE8, for mobile browsere skal der findes en anden løsning, da de ikke understøtter dette så godt.
CSS3 specificerer at der skal bruges et dobbelt kolon "::" ved brug af pseudo elementer. CSS specifikationen kræver at browsere understøtter både enkelt og dobbelt kolon. IE8 understøtter ikke dobbelt kolon, brug derfor altid enkelt, eksempelvis: :first-line, :first-letter, :before og :after
IE8 har ingen understøttelse af disse selectors, et alternativ er at enumerere således element sub-element:first-child + sub-element + sub-element + sub-element, et eksempel kunne være at finde den tredje td i en table: table td:first-child + td + td
For at gøre renderingen af elementer på siden mere konsistent bruges et såkaldt reset stylesheet. Der er valgt et reset stylesheet som kaldes normalize.css. Dette stylesheet gør at alle elementer på siden nulstilles til en standard værdi uafhængigt af hvilken browser der bruges. Derudover kan man i mange tilfælde undgå at lave specielle styles til specifikke browsere.
Denne fil skal inkluderes i head elementet på siden som det første stylesheet der refereres.