Browser detektering

For at detektere hvilken browsertype man har åbnet dokumentet i, kan man anvende betingede kommentarer der er en speciel type HTML Kommentar Der kan tolkes af Microsoft Internet Explorer i HTML koden. Betingede kommentarer kan anvendes til at lave specielle koder til Internet Explorer, samt til at skjule koder på Internet Explorer. Dette er specielt anvendeligt til CSS, hvor man sagtens kan komme ud for at skulle anvende to forskellige style-sheets.

De betingede kommetarer dukkede op første gang i Internet Explorer 5 og virker helt frem til Internet Explorer 9 I internet Explorer 10 fortsættes ikke supporten med versions-detektering, men den generelle brug af teknikken kan stadig anvendes og tolkes korrekt.

Der er også mulighed for at detektere browseren ved hjælp af javaScript, men det kræver lige at man har lidt programmerings-kendskab.

Eksempler i HTML

Her er et simpelt eksempel som illustrerer hvordan de betingende kommentarer fungerer.

<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<p>You are not using Internet Explorer.</p>
<!--<![endif]-->

Syntaks i HTML

Der er to typer "betingede kommentarer", hvor forskellen er om de bliver vist i browsere der ikke understøtter betingede kommentarer eller om de bliver skjult af kommentarfeltet. Disse to typer kaldes downlevel-revealed og downlevel-hidden

Den grundlæggende syntaks er vist i den efterfølgende tabel

Kommentar type	Syntaks eller mulig værdi
standard HTML kommentar	<!-- Kommentar indhold  -->
downlevel-hidden	<!--[if expression]> HTML <![endif]-->
downlevel-revealed	<![if expression]> HTML <![endif]>

Det HTML der vises herover i hver af de betingede kommentarblokke kan være hvilket som helst HTML indhold, også scripts som javascript. Begge typer betingede kommentarer anvender en expression eller på dansk en betingelse, som er den betingelse der gør om det der er sat inden i kommentarblokke skal vises/udføres eller om det skal ignoreres. Betingelsen kan udformes som bare en enkelt betingelse, eller som en kombination af flere betingelse, der bliver kombineret logisk med AND og OR, som det er vist i den følgende tabel:

Del	Eksempel	Kommentar
IE	[if IE]	Der kan testes bare på denne måde, for at se om det er Internet Explorer eller man kan kombinere det videre for at se hvilken version af Internet Explorer det er.
value	[if IE 7]	På denne måde kan man teste hvilken version af Internet Explorer det er. Man kan både teste hoved version 5, 6, 7 osv. men man kan også teste om det f.x. er version 5.5 altså en underversion.
WindowsEdition	[if WindowsEdition]	Internet Explorer 8 på Windows 7. Kan angive noget om hvilken "WindowsEdition" det er.
value	[if WindowsEdition 1]	Igen hvilken præcis version af windows (nærmere betydning ikke analyseret).
true	[if true]	Giver sandt - betingelsen er altid opfyldt.
false	[if false]	Giver falsk - betingelsen er aldrig opfyldt.

Efterfølgende tabel viser hvordan man kan bruge operatorer i kombinationer for at skabe betingelserne.

Del	Eksempel	Kommentar
	[if !IE]	En NOT operator. Placeres lige umiddelbart før den betingelse man vil arbejde med. Betyder at betingelsen får den modsatte betydning.
lt	[if lt IE 5.5]	Mindre end operator. Betingelsen bliver sand, hvis det testede er mindre end det angivne.
lte	[if lte IE 6]	Mindre end eller lig med operator. Betingelsen bliver sand, hvis det testede er mindre end eller lig med det angivne.
gt	[if gt IE 5]	Større end operator. Betingelsen bliver sand, hvis det testede er lig med det angivne.
gte	[if gte IE 7]	Større end eller lig med operator. Betingelsen bliver sand, hvis det testede er større end eller lig med det angivne.
( )	[if !(IE 7)]	Deludtryk. Deludtryk kan anvendes sammen med logiske operatorer, og at skabe en betingelse.
&	[if (gt IE 5)&(lt IE 7)]	AND operator. Giver sandt, hvis alle deludtryk er sande
|	[if (IE 6)|(IE 7)]	OR operator. Giver sandt, hvis bare et deludtryk er sandt

Anvendelse til at have forskellig CSS

Her er en simpel måde til at have forskellig CSS i Internet Explorer og i alle andre browsere.

<!--[if IE]>
<link href="ie-style.css" rel="stylesheet">
<![endif]-->
<!--[if !IE]><!-->
<link href="non-ie-style.css" rel="stylesheet">
<!--<![endif]-->

Detektering i javaScript

En måde at detektere på i javaScript er ved at kigge på navigator objektet som eksemplet her fra w3schools:

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

Der er dog taget det forbehold at brugeren kan ændre i objektet og detekteringen ikke kan sikre opførslen i nye versioner og styresystemer. Man kan derfor lave detekteringen ud fra specielle objekter i de enkelte browsere som f.x.:

<script>
   if (window.opera) {...some action...}
</script>

Anvendelse af specielle objekter i javascript

Denne metode skulle være den bedste, da man tester på om objekter der er unikke for de enkelte browsere er til stede. Dette skulle være den mest valide test.

Der er dog stadig problemet med at browsere udvikler sig. Derfor kan nye versioner af browsere pludselig kommetil at optræde som en anden type, hvis en anden type har fået defineret et objekt i en ny version, der ellers har været unik for en browser-type.

Eksemplet her skulle gerne illustrere hvordan de fleste gængse browsere kan identificeres:

if (document.all) {
	document.write('Internet Explorer - document.all<br />');
}
if (/*@cc_on!@*/false) {
	document.write('Internet Explorer mindst vers 6 - document.all<br />');
}
if (window.globalStorage) {  // Denne burde virke på firefox - men det fungerer ikke i version 19.0
	document.write('Firefox - window.globalStorage<br />');
}
if (window.getComputedStyle && !!!window.chrome & !window.opera) {  // Her mangler test på Safari
	document.write('Firefox - window.getComputedStyle<br />');
}
if (window.opera) {  // ikke testet
	document.write('Opera - window.opera<br />');
}
if (!!window.chrome) {
	document.write('Google Chrome - window.chrome<br />');
}
if (window.HTMLElementConstructor) {   // ikke testet
	document.write('Safari - window.HTMLElementConstructor<br />');
}

Eksempel der anvender navigator objektet

Dette eksempel stammer fra stackoverflow.com og det kan skrive ud hvilken browser man arbejder i, ud fra navigator objektet.

//Copy and paste this into your code/text editor, and try it

//Before you use this to fix compatability bugs, it's best to try inform the browser provider that you have found a bug and there latest browser may not be up to date with the current web standards

//Since none of the browsers use the browser identification system properly you need to do something a bit like this

//Write browser identification
document.write(navigator.userAgent + "<br>")

//Detect browser and write the corresponding name
if (navigator.userAgent.search("MSIE") >= 0){
    document.write('"MS Internet Explorer ');
    var position = navigator.userAgent.search("MSIE") + 5;
    var end = navigator.userAgent.search("; Windows");
    var version = navigator.userAgent.substring(position,end);
    document.write(version + '"');
}
else if (navigator.userAgent.search("Chrome") >= 0){
document.write('"Google Chrome ');// For some reason in the browser identification Chrome contains the word "Safari" so when detecting for Safari you need to include Not Chrome
    var position = navigator.userAgent.search("Chrome") + 7;
    var end = navigator.userAgent.search(" Safari");
    var version = navigator.userAgent.substring(position,end);
    document.write(version + '"');
}
else if (navigator.userAgent.search("Firefox") >= 0){
    document.write('"Mozilla Firefox ');
    var position = navigator.userAgent.search("Firefox") + 8;
    var version = navigator.userAgent.substring(position);
    document.write(version + '"');
}
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0){//<< Here
    document.write('"Apple Safari ');
    var position = navigator.userAgent.search("Version") + 8;
    var end = navigator.userAgent.search(" Safari");
    var version = navigator.userAgent.substring(position,end);
    document.write(version + '"');
}
else if (navigator.userAgent.search("Opera") >= 0){
    document.write('"Opera ');
    var position = navigator.userAgent.search("Version") + 8;
    var version = navigator.userAgent.substring(position);
    document.write(version + '"');
}
else{
    document.write('"Other"');
}

//Use w3schools research the `search()` method as other methods are availible

Mere avanceret metode

På [1] er der gennemgået hvordan man kan lave en mere objektorienteret måde at detektere browser på, hvor der er en god forklaring til hvad der sker.

Referencer

Webdesign
CSS	Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown
HTML	<b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere