Gode grensesnitt: CSS
Del 2 i mitt sjekkliste-prosjekt tar for seg CSS: Hva er suksessfaktorene for CSS? Hvilke fallgruver finnes, hva bør med og hva bør ikke?
Webstandarder
For å følge listens form minner jeg om at vi stadig behandler temaet webstandarder, som er vårt viktigste verktøy for å oppnå interoptibilitet (si det fort fem ganger på rad). Det er vårt ansvar som "frontend-folk" å ha et bevisst forhold til webstandardene og bruke de som best vi kan.
CSS
Validering
Siste versjon av CSS er CSS 2.1. All CSS bør validere mot denne, unngå nettleser-spesifikke varianter som ikke er en del av standarden, så som CSS expressions.
Unngå hacks som utnytter nettleser-spesifikke svakheter for å filtrere CSS mot forskjellige nettlesere. Forsøk så langt det er mulig å benytte de samme løsningene i alle nettlesere. Når det ikke er mulig å komme i mål alle steder med samme kode bør det favoriseres løsninger som validerer fremfor hacks som baserer seg på grisete syntaks og andre parse-feil i nettlesere.
Et eksempel på å jobbe rundt et problem uten syntaks-hacks og annen type feil er å bruke velgere som et utvalg nettlesere ikke forstår. Dette kan være for eksempel velgere fra CSS2-standarden som ikke er implementert i alle nettleserne. Bruk slike omveier med omhu da det er vanskelig å ha full oversikt over hvilke nettlesere som blir påvirket på hvilken måte.
For Internet Explorer, som det av og til blir feil i, bør det benyttes
betingede kommentarer. Disse er gyldige HTML-kommentarer og skippes av alle nettlesere unntatt Microsoft sine. I Microsofts nettlesere er dette en kontrollert måte å filtrere HTML (og via <script/>, <link/> og <style/> også CSS og JavaScript).
Hvorfor?
- Ved å utvikle mot de samme standardene som alle moderne nettlesere utvikler sine motorer mot er du garantert størst sjanse for kompatibilitet med så mange nettlesere som mulig. Merk alikevel at ingen nettlesere desverre er feilfrie, og validerende CSS vil i så måte ikke garantere deg at alt fungerer.
- Ved å støtte standardene er du godt rustet for å støtte fremtidige klienter som også implementerer de samme standardene
Hvordan?
- W3Cs online validator
- Web developer for Firefox - med tastatursnarveier for å validere mm
- Firebug - verktøy for blant annet å undersøke hvilke CSS-regler som gjelder for enkeltelementer mm
- Dust Me - tillegg til Firefox som hjelper deg å identifisere CSS-regler som ikke er i bruk
Eksterne CSS-filer
Bruk minimalt, og aller helst ingen inline CSS. All CSS bør defineres i egne filer og lenkes inn via <link>- eller <style>-elementene. Disse filene bør inkluderes samlet i toppen av HTML-fila, ikke spredd utover. På denne måten vil du se resultater i nettleseren raskest.
Hvorfor?
- Først når CSS er ekstern får du virkelig nyttegjort deg av fordelene ved sentralisert design
-
<link>-elementer er kun tillatt i<head>(ref: gyldig HTML) - CSS i toppen av fila gjør det mulig for nettlesere å progressivt laste/vise siden.
- Ekstern CSS maksimerer effekten av caching hos brukeren
Unngå "divitis" og "classitis" (eller span-mania for den saks skyld)
Dette er tett knyttet til semantisk HTML. Divitis og classitis er feilen mange gjør når de først begynner å bruke CSS: i steden for å nyttegjøre seg av den rike konteksten som finnes i et semantisk HTML-dokument lager man klasser og ID-er for alt som skal styles.
Hvorfor?
- Overdrevent antall klasser, ID-er og generiske elementer (
span,div) forkludrer HTML-en og gir unødig komplisert CSS som kan være vanskelig å gjenbruke - CSS blir koblet tettere til HTML-en og blir som en følge mindre fleksibel
Hvordan?
- Bruk kontekstuelle velgere i CSS
- Bruk semantisk HTML til å beskrive innholdet godt - da får du flere "hooks" gratis
Mer om servering av CSS kommer når vi ser på ytelse i grensesnitt. Hva mener du er det viktigste å tenke på i forhold til CSS?
Kommentarer
Ola
(http://telenor.no/privat/)
27. mai, 13:59
Ellers ser jeg frem til å følge denne artikkelserien videre. Bra tiltak!
Christian
27. mai, 22:17
Det er vanskelig å avgrense, dette er jo temaer man kunne skrevet om i det vide og brede :) Har linket opp en til artikkel om kontekstuelle selectors, men ser ikke bort ifra at jeg lager et innlegg på dette selv også.