Cross-browswer compatibel

Browser compatibilitet har lige så meget med din css, at gøre som din (X)HTML

Du skal vælge den doctype der passer til den type HTML du vil skrive - og den skal defineres på alle sider. Jeg bruger selv html5 til alt nu til dags. Det er også den eneste jeg stadig kan huske ;-) HTML5 doctypen er faktisk også så "bred" at du kan smide den på det meste uden at få problemer - så hvis du er i tvivl smid den på. Selfclosing-tags (<br/> fx) er også ok i html5).

Nu skriver du at du godt vil bruge de nye "smarte" tags - jeg går ud fra at du mener nav, article, header osv - i html5 - og det kan du sagtens. De understøttes bare ikke i oldIE, men det kan du løse ved at bruge html5shiv - code.google.com/p/html5shiv/

Helt generelt, så skal du ikke være bange for at bruge nyere funktioner, i både CSS og HTML. Hvis det er kritisk funktionalitet for din side, så kan du finde et polyfill der gør browserne i stand til at håndtere det (html5shiv er en slags polyfill for html5 tags). På https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills kan du finde en liste over forskellige polyfills for både nye HTML5, JS og CSS ting.

Men det er ikke altid at det er nødvendigt. For eksempel, så er afrundede hjørner ikke en kritisk detalje - og hvis folk alligevel bruger IE6 er de nok ligeglade med om det er firkantede eller runde hjørner.

I moderne webdesign snakker man om begræber som Progressive Enhancement og Graceful Degradation. I og for sig er det to sider af samme sag. Det handler om at sørge for, at folk kan nå dit indhold selvom deres browser ikke understøtter de funktioner som din side bruger.

Browsere ignorerer kode som de ikke forstår. Så hvis du fx vil have en gradient som baggrund for din side, så kan du gøre det sådan her:

 body {
   background: #bada55; /* fallback bg-color */
   background: -vendorprefix-linear-gradient();
   background: -linear-gradient();
 }

Browserne parser de tre background properties - og bruger den nederste af dem den forstår. Det vil sige, at selvom chrome forstår både background med en hex color og en linear-gradient, så bruger den gradienten. IE6, 7 og 8 vil derimod bruge den farve som du specificerede øverst.

Hjemmesider behøves ikke at se ens ud i alle browsere - det er okay at give folk i gamle browsere en dårligere oplevelse. De sidder generelt også på ældre hardware, og vil også være mindre interesserede/påvirkelige i den fulde grafiske oplevelse...

Så - hvis du tænker dig om når du skriver din CSS og sprøjter lidt JS på de hårde hjørner, så skal det nok gå alt sammen.

Modsat @scootergrisen, så vil jeg ikke anbefale validation - specielt ikke af CSS. W3C's validatorer er ikke en krone værd. Hvis du laver syntaks fejl i din HTML kode, så vil du selv opdage det - og HTML5 er så tilgivende, at hvis det renderer rigtigt i browseren, så er det nok også valid. CSS validatoren er håbløs og du får meget mere ud af at bruge http://CSSLint.net . Din Javascript kode kan du også med fordel køre gennem http://JSHint.com (eller http://JSLint.com - den er skrevet af Douglas Crockford (JS-grand old man) og er lidt mere striks end JSH) .

...og så kan du starte med at udvikle din side til een brower, derefter den næste, og så den næste...
Udgangspunktet skal altid være den browser der viser det mest rigtige resultat ifht. din CSS og HTML kode. Efter hvad jeg ved er det dd. Chrome og Firefox der holder den stafetpind. Derefter finder man løsninger til de andre browserer og versioner.

Jeg ville foretrække, hvis jeg kunne benytte mig af HTML5, da dette har nogle særlige smarte tags, som alligevel spare en del på javascript arbejdet, bl.a. attributen maxlength og attribtten email

Men tiltrods for at jeg har specificeret doctype som HTML5, (dog bruger jeg selv <br /> for nylinie, ved ikke helt om det er imod html standarden, men indtil videre virker lige den detalje helt fint.
Men mit problem er at jeg i øjeblikke ikke har mulighed for at indtaste data i mine input felter i chrome, og i IE giver den et helt andet layout end jeg har i Firefox og Chrome.

Er der noget specielt man kan gøre, for at gøre sit css browser compatibelt... har forsøgt at benytte mig af css validation fra http://jigsaw.w3.org/css-validator/
Men den giver nogle lidt mærkelige fejl

Jeg mener så at det er en bedre ide at starte med at skrive kode der virker i alle de nyere browsere.
Det der med at udvikle til én browser for derefter at rette det i de andre browsere det er kedeligt.
Men kommer også an på hvor ny kode du ønsker at bruge.

Du må gerne bruge både <br> og <br/> i HTML.

Du holder dig bare til standarderne og lader være med at bruge alle de nye ting som ikke er helt på plads endnu.
Drop alt det CSS kode der starter med -moz-, -o-, -webkit-, -ms- osv.

Lær at brug de forskellige validatorer.
Hvis du ikke forstår det den fortælle dig og bare kalder det "lidt mærkelige fejl" så læs noget mere om det.
Det er ikke en mærkelig fejl, den fortælle dig hvad der er i vejen også er det op til dig at rette det.

Men du må jo gøre op med dig selv om du vil bruge de nyeste koder som om du vil have en ren kode der validere også må du bare droppe at bruge de nyeste koder der ikke er standard endnu.

Men kom med link til dine sider så kan vi se hvad problemet er hvis du ikke forstår det.

@Gustv - Jeg fatter ikke du orker skrive alt det... Men +1 for det er godt det du har skrevet. Syntes især man skal nævne modernizer til udvikling af crossbrowser compatible hjemmesider. Det kan ihvertfald hjælpe en med, at finde ud af hvilke polyfills man skal loade.

Af polyfills der er værd, at loade kan nævnes et html5shim ... Hvilket du bruger er lige meget, men det gør det muligt at bruge HTML5 specifikke tags i alle browsere.

@dan - Jeg lider af en sygdom der gør at jeg altid har lidt for meget at sige - heldigvis har det også gjort at det ikke tager så lang tid at få det skrevet. Men tak

html5shiv/html5shim (der er lidt uenighed om navnet - det er vidst et shim men bliver kaldt shiv) nævner jeg også - men glemte vidst modernizr i farten :-)

Tak for hjælpen alle sammen, nu virker forms i chrome igen og IE ligner faktisk de andre browsere

Det der gjorde udslaget, var at jeg var kommet til at lave hele css filer inline i html koden, og det hjalp da jeg flyttede dem tilbage til headeren, hvor de hører til

Det gør du ved at følge standarderne.

Du må selvom hvad doctype du vil bruge. Både HTML5 og HTML4 er fine.

Lad os sige du har tænkte dig at bruge nye tags som <video> og <audio> på din hjemmeside så skal du bruge HTML5 doctype.

Så skal du også vælge om du vil bruge HTML eller XHTML, der er lidt forskel på slut tags og om man må skrive med stort og småt og sådan.

Du skal have en doctype på alle dine sider.
Det er ikke nok kun på din forside.

Personligt bruger jeg HTML5 doctype. Den er fin og kort.
Jeg bruger HTML i stedet for XHTML fordi XHTML giver bare en masse unødig kode.

I XHTML skal man skrive <br/> og loop="loop".
I HTML kan man bare man nøjes med at skrive <br> og loop.

Så hvis du går op i at det skal være kort/let så brug HTML5.

Eksempel : http://scootergrisen.dk/htmlgrisen/kode_skabeloner.php