Hjemmesider, som virker i alle browsere

Tags: html

Skrevet af Bruger #3143 @ 17.07.2008

At lave en hjemmeside, der virker i alle browsere, er ikke altid lige nemt. Her får du de basale tips og tricks til hvordan du sikrer, at alle dine besøgende kan se hjemmesiden, sådan som du vil have den til at se ud. Du vil ikke få svar på dit specifikke problem med browserkompatibilitet. Det kan der skrives flere encyklopædier om, og så langt rækker denne artikel ikke. Du vil derimod få nogle generelle værktøjer til at undgå problemer.

HTML

De fleste browsere har to måder at vise hjemmesider på. Den ene hedder Quirks Mode og er beregnet til at vise gamle hjemmesider, som ikke er skrevet efter de nuværende standarder. Den anden hedder Standard Mode og er beregnet til hjemmesider, der gerne vil virke ens i flere forskellige browsere. For at slå Quirks Mode fra og slå Standard Mode til, skal du indsætte en Doctype øverst på din hjemmeside. De to mest almindelige er:

HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For at gøre det lidt nemmere, har jeg lavet en interaktiv guide til valg af doctype og andre vigtige ting.

Når doctypen er sat på, er du færdig med at tilpasse din HTML. Det skulle ikke være nødvendigt at tilpasse hjemmesidens HTML til specifikke browsere. Hjemmesidens layout skulle jo gerne være angivet med CSS, så det er i CSS det interessante sker.

CSS

Én ting er CSS-standarden. En helt anden ting er den delmængde af CSS, der understøttes af alle browsere. Dette er en generel artikel, så jeg vil ikke komme med specifikke eksempler. Det er Google meget bedre til.

Generelt vil jeg anbefale først at teste sin hjemmeside i en browser, som har god understøttelse for standarderne, og derefter tilpasse den de browsere, som har knap så god understøttelse. Det er nemmere at finde tips på Google om tilpasninger til en browsers fejl, end at rette ens egne fejl på hjemmesiden. Altså: Lad være med at bruge Internet Explorer, når du laver sidens layout.

Undgå at lave CSS, som er specifikt til en bestemt browser. Der findes i de fleste tilfælde andre måder at lave tingene på, som virker generelt i alle browsere. Er du nødt til at lave specifik CSS til en bestemt browser, så lad være med at udnytte fejl i en bestemt browsers CSS-parser (de såkaldte CSS hacks). Det kunne jo være fejlen blev rettet i en senere version. Brug i stedet IE Conditional Comments. Giv browseren "the benefit of the doubt" - brug <!--[if lte IE 6]> frem for <!--[if IE]>. Det er nemt at rette, hvis det viser sig, at fejlen ikke blev rettet i næste version. Conditional Comments kan desværre ikke bruges i .css filer, så den browser-specifikke CSS skal placeres i hver HTML-fil, eller man kan vælge at placere den i en selvstændig CSS-fil, som man så kan inkludere i sine dokumenter med Conditional Comments. Eksempel:

HTML kode

 <!--[if lte IE 5]>
 <link rel="stylesheet" href="ie-style.css" type="text/css">
 <![endif]-->

JavaScript

Brug standardmetoderne. Med mindre du er så perfektionistisk, at du vil understøtte Internet Explorer 4 og ældre, så er der én og kun én måde til at få fat i et HTML-element via dets ID: document.getElementById("dit-id-her")

Hold øje med fejl og advarsler. Slå visning af JavaScript-fejl til i Internet Explorer, og sørg for at den lille gule advarselstrekant ikke kommer frem i venstre side af statusbaren på din hjemmeside. Sørg for at der i Firefox ikke er nogen fejl eller advarsler fra din hjemmeside i Funktioner -> Fejlkonsol.

Som ved CSS, bør man undgå browser-specifik kode. Er det nødvendigt, skal man dog være opmærksom på hvordan man aktiverer den. Brug ikke browser-detektion, men brug i stedet feature-detektion.

JScript kode

 // Dårligt eksempel
 if (document.all) {
   var range = document.selection.createRange();
   ...
 } else {
 
 
 
   var startPos = txtarea.selectionStart;
   ...
 }
 
 // Dårligt eksempel
 if (drowser.isIe) {
   var range = document.selection.createRange();
   ...
 } else if (browser.isFirefox) {
   var startPos = txtarea.selectionStart;
   ...
 }
 
 // Dårligt eksempel
 if (document.selection && document.selection.createRange) {
   var range = document.selection.createRange();
   ...
 } else if (txtarea.selectionStart || txtarea.selectionStart == "0") {
   var startPos = txtarea.selectionStart;
   ...
 } else {
   alert("Din browser stinker!!");
 }
 
 // Godt eksempel
 if (document.selection && document.selection.createRange) {
   var range = document.selection.createRange();
   ...
 } else if (txtarea.selectionStart || txtarea.selectionStart == "0") {
   var startPos = txtarea.selectionStart;
   ...
 } else {
   // gør intet eller giv alternativ
 }

Hvis det ikke siger sig selv i kodeeksemplet, så er princippet, at man skal lade være med at teste hvilken browser der bruges. Du rammer alligevel ikke altid rigtigt, og du vil aldrig få helt styr på hvilke funktioner de forskellige browsere har og ikke har. Måske ved du hvad Internet Explorer og Firefox kan og ikke kan, men hvad kan Flock, Safari, Maxthon, IE9 og Firefox 4? Test i stedet om den funktion, du vil bruge, eksisterer. Det gør du ved at proppe funktionsnavnet uden de efterfølgende parenteser ind i en if-sætning.

Billeder

IE 6 og ældre understøtter ikke gennemsigtighed i PNG-billeder. Hvad gør du så? Her er ikke så meget at gøre andet end at lave dine billeder på en sådan måde, at det ikke ser helt ad helvede til ud i IE 6.

Detektion af User-Agent

Kort sagt: Lad være med at bruge det. Det er en teknik, som bliver misbrugt langt mere end den bliver brugt korrekt. Brug aldrig denne metode til at arbejde dig uden om fejl eller mangler i en browsers håndtering af CSS og JavaScript. Der findes langt bedre metoder, som allerede er beskrevet i artiklen. Man kan derimod godt bruge teknikken andre steder. Et sådant sted kunne fx være en guide til at tillade popups eller downloade en fil. Her skal guiden helst passe til brugerens browser.

Fejlhåndtering

"Denne hjemmeside er optimeret til min browser, og virker ikke med din browser. Skift browser nu."

Skriv aldrig sådan noget på din hjemmeside. Hvis du ikke har testet hjemmesiden i en bestemt browser, eller hvis du ved der er småfejl på hjemmesiden i en bestemt browser, så lad alligevel brugerne komme ind på siden. De får mere ud af at kunne bruge din hjemmeside, hvor det meste virker, end slet ikke at kunne komme ind på hjemmesiden.

Hvis en fancy funktion på din hjemmeside ikke virker i alle browsere, så giv brugerne adgang til en simpel udgave, som måske ikke er helt så elegant. Men husk at bruge feature-detection og ikke browser-detection, som beskrevet i JavaScript-afsnittet.

Dine kilder

De to bedste hjemmesider til information er MSDN (msdn.microsoft.com) og MDC (developer.mozilla.org). Begge hjemmesider har dog et problem. MSDN anbefaler visse steder metoder, som kun virker i Internet Explorer, selvom der findes bedre alternativer, der virker i alle browsere. MDC indeholder ikke kun information til webudviklere som dig og mig, men også information til udviklere af Mozilla Add-ons, og det er svært at finde ud af hvad der er brugbart, og hvad der ikke er. Man skal altså passe på, når man leder efter information på de to sider. Til mere simple ting kan hjemmesider som html.dk og w3schools.com anbefales. Deres information er langt mere pålidelig, de er nemme at forstå, men de dækker ikke lige så bredt.

Konklusion

Som du måske har fundet ud af, er det ikke helt nemt at få sin hjemmeside til at virke i alle browsere. Dels fordi browserne endnu ikke overholder alle standarderne, og dels fordi den dokumentation og de vejledninger man kan finde på google, ofte er forældede og fyldt med fejl. Jeg håber denne artikel gav dig nogle hints og ideer til hvordan du nemmere kan sørge for at gøre din hjemmeside kompatibel med så mange browsere som muligt.

Referencer

Gode værktøjer og relevant læsning om emnet:

PS

Den kvikke læser har måske bemærket, at jeg er sprunget let og elegant hen over validering. Det er selvfølgelig enormt vigtigt at ens hjemmeside validerer i forhold til W3C's standarder af flere forskellige årsager, men denne artikel er tiltænkt som en mere praktisk guide i hvordan man opnår kompatibilitet med flest mulige browsere på sin hjemmeside. Validering er vigtig fordi det giver god viden om HTML og CSS at bruge den, fordi valideringsfejl ofte kan give hints til mere alvorlige fejl, og fordi jo flere, der laver hjemmesider, der validerer og overholder standarderne, jo mindre tid skal browserproducenterne bruge på at sikre bagudkompatibilitet, og jo mere tid kan de bruge på at lave nye features. Alt dette er jo godt nok, men det vigtigste er først at få din hjemmeside til at fungere.

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:

Kommentarer (11)

Bruger #11328 @ 17.07.08 16:54

En rigtig god artikel!
Kan godt lide dine udtryksformer, og ekesmplerne er rigtig godt forklaret!
En High-Five fra mig!

Bruger #12836 @ 18.07.08 09:31

Hej Jesper,

Jeg hader at være negativ ved alle artikler ...
... super læsning. Good work - GW++.

Med venlig hilsen
Ieet

Bruger #5620 @ 19.07.08 18:48

Synes måske det er at gå lidt til yderligheder at sige alle browsere såvidt jeg kan se omtaler du da kun IE oog FF.

I øbrigt har du skrevet drowser i et af dine eksempler skulle være browser.

Det også en del sort at skrive kode med en ikke erklæret variable txtarea.

Og det er ikke vigtigt at en side overholder w3c standarder, det er vigtigt at den ser god ud i de forskellige browsere.

Bruger #714 @ 27.07.08 21:08

Jeg synes alt i alt at du er kommet rundt omkring den generelle del af emnet godt. Kunne måske godt være lidt uenig i dit valg af rækkefølgen af emnerne, men det er vel en smagssag, og pointen er jo at du har (så vidt som jeg ser det) det hele med.

@ Nørden

Jo det er vigtigt at siderne ser godt ud i de forskellige browsere - men det vil jo altid være umuligt at teste ens side i ALLE browsere, og derfor er det først og fremmest vigtigst at man overholder de standarder der er sat - gør man dette, jamen så har man overholdt "sin del af aftalen", og hvis en side så ikke virker så kan man skyde skylden på den specifikke browser. Åbenlyst er der dog tilfælde hvor man ikke kommer ret langt med dette, som med f.eks. IE 6 - og det er jo så her hvor hele denne artikel tager fat og forklarer en hvordan man kan overholde standarderne samt få sine sider til at render korrekt i IE / andre browsere. Men at starte fra et fælles begyndelsespunkt - det må da siges at være en kæmpe fordel.

Bruger #5789 @ 29.07.08 19:03

Egner sig ikke til nybegyndere, skulle jeg starte med at lave en hjemmeside, og stødte på den som en nybegynder, havde jeg nok droppet det.

Ellers nogle fine korte kommentarer, og ellers en omgang uforståeligt opsummeret ubrugtligt læsning. Mange emner hører ikke hjemme her, og ellers ALT for kort forklaret.

Ex dit JS eksempel, hvor mange nybegynder til HTML vil mon sige "AHA det var sku smart" til det.

Desuden er der også alt for mange personlige meninger, om hvordan det skal laves, frem for at undersøge hvordan andre gør - jeg er sikker på at mange de ting du IKKE anbefaler bliver brugt i stort omfang, også af professionelle.

venligst
/J

Bruger #5789 @ 29.07.08 19:05

For ikke at tale om "billeder" afsnittet.. tsk tsk, så kom sku da med et workaround

Bruger #11328 @ 29.07.08 20:44

Jokke, der er sq ingen der gider at lave workaround i forhold til transparente billeder!

Og BTW: Det er jo ikke Jesper der har bestemt at artiklen er blevet stemplet "Nybegynder". Det er jo slet ikke sikkert at denne kode er tiltænkt begyndere.

Bruger #5789 @ 01.08.08 19:03

Man bliver nød til i en artikel, som denne, at komme med løsninger, ikke bare finde problemerne.. De er lette at fange selv, så ville artiklen være unødvendig eller bare en advarsel. - som jeg bestemt ikke mener den er - bare alt for kort, og har på fornemmeren Jesper sagtens kunne skrive bedre.

Jeg aner ikke hvem der tildeler niveauet på artiklerne, konstaterede blot, at jeg ikke følte det var nybegynder læsning.

Jeg skrev mine kommentarer som konstrutiv kritik.

Venligst

Bruger #5789 @ 01.08.08 19:05

Og jo, png bliver brugt på nettet, med workarounds til IE6... Det er meget snæversynet at sige andet - fordele og ulemper kunne summeres for læseren.

Bruger #14456 @ 03.12.08 12:21

Hej Jeg ville høre om der er nogen der ved hvordan en webserver registrer om clienten er mobil bruger med internet adgang eller en pc, i form af om den viser en webside med mindre informationer til en mobilbruger?
Er det i en header information eller hvordan? er det to forskelligt programmerede sider eller virker det ved at der er noget software som koger siden ned til at fylde mindre?

Bruger #14869 @ 07.04.09 13:33

Hej Jesper,
God artikkel, men jeg er stødt på et problem. Jeg har længe brugt Doctype når jeg laver hjemmesider, men jeg har opdaget at hvis ikke jeg bruger Doctype ser koden ens ud i IE og Opera, men når jeg tilføjer en Doctype ser det anderledes ud i Opera. Det er somom den tilføjer ekstre linie afstand før overskrifter og efter div/span blokke. Er det noget du ved noget om?
Venlig hilsen Rasmus

Du skal være logget ind for at skrive en kommentar.