HTMLWorld » Webmaster Tools » CSS-Browsersupport

CSS-Browsersupport

Mit diesem HTMLWorld-Tool können Sie testen, bei welchen Browsern Ihr StyleSheet Probleme machen könnte.

Und so geht's ...

Geben Sie in das Formularfeld die URL ein unter der die CSS-Datei zu finden ist (z.B. www.meinname.de/layout.css) und drücken Sie dann auf Prüfen. Das Tool läd die genannte Datei dann herunter und prüft alle verwendeten Eigenschaften auf Kompatibilität zu bestimmten Browsern. Wird eine Eigenschaft von einem Browser unterstützt, gibt es 1 Punkt. Wird eine Eigenschaft nur teilweise unterstützt (z.B. nur bestimmte Werte), gibt es 0.5 Punkte. Wird eine Eigenschaft schließlich garnicht unterstützt oder ist unbekannt gibt es auch keinen Punkt. Die gesammelten Punkte werden zusammen addiert und durch die Anzahl der verwendeten Eigenschaften geteilt ein Prozentwert für jeden Browser ermittelt.

Zusammenfassung

Hier sehen Sie, wir Ihr StyleSheet im Vergleichstest der unterschiedlichen Browser abgeschnitten hat. Die Prozentzahl gibt an, wieviele Eigenschaften die in Ihrem StyleSheet vorkommen, der jeweilige Browser beherrscht. Hier sollten Sie eine möglichst hohe Zahl anstreben um zu gewährleisten, dass Ihre Webseite in möglichst allen Browsern nahezu gleich aussieht.

MSIE 3.x	nahezu Ok	81 % (10.5/13)
MSIE 4.x	Ok	88 % (11.5/13)
MSIE 5.x	Ok	88 % (11.5/13)
MSIE 5.5x	Ok	88 % (11.5/13)
MSIE 6.x	Ok	88 % (11.5/13)
NN 4.x	Ok	88 % (11.5/13)
NN 4.5x	Ok	88 % (11.5/13)
NN 6.x	Ok	96 % (12.5/13)
NN 7.x	Ok	96 % (12.5/13)
OP 3.5x	Ok	88 % (11.5/13)
OP 4.x	Ok	92 % (12/13)
OP 5.x	Ok	92 % (12/13)
OP 6.x	Ok	92 % (12/13)
OP 7.x	Ok	92 % (12/13)
Resultat:	Ok	90 % (164/182)

Herzlichen Glückwunsch!
Ihre Seite ist laut diesem Test zu 90% Browserkompatibel! Um Ihren Besuchern zu zeigen, dass Sie mit viel Sorgfalt eine möglichst kompatible Seite erstellt haben, dürfen Sie dieses Icon auf Ihrer Seite einblenden.

(Hier klicken um das Icon herunter zu laden)

Sie können dazu den folgenden HTML-Code verwenden und in Ihre Webseite einbinden:

Bitte achten Sie darauf, dass das Icon im gleichen Verzeichnis liegen muss, in dem sich auch die Datei befinden in die dieser Code eingefügt wurde.

Im Detail ...

Hier erhalten Sie eine Liste der Eigenschaften, die in Ihrem StyleSheet Probleme bereiten könnten. Graue Werte sind unbekannt.

list-style-type
- MSIE 3.x

Quelle

a:link {
}

a:visited {
}

a:hover {
  color:#00007F;
}

a:active {
}

body {
  background:#fffff0;
  color:#000000;
  margin-left:5px;
  margin-right:5px;
  margin-top:3px;
  margin-bottom:5px;
}

a.index {
  text-decoration:none;
  line-height:11pt;
  margin-top:0px;
  font-family:arial,verdana,helvetica;
  font-size:10pt;
}

p.inh {
  font-family:verdana,arial,helvetica;
  font-size:10pt;
  line-height:12pt;
}

a.inh {
  font-family:arial,verdana,helvetica;
  font-size:9pt;
  line-height:11pt;
  font-weight:bold;
  text-decoration:none;
}

.vinh {
  font-family:arial,verdana,helvetica;
  font-size:9pt;
  color:#8f8f8f;
  line-height:11pt;
  text-decoration:none;
  font-weight:bold;
}

a.surf {
  font-family:arial,verdana,helvetica;
  font-size:10pt;
  line-height:15pt;
  font-weight:bold;
  text-decoration:none;
}

p.klein {
  font-family:verdana,arial,helvetica;
  font-size:9pt;
  line-height:12pt;
  text-align:justify;
}

div.fett {
  font-family:verdana,arial,helvetica;
  font-size:8pt;
  line-height:12pt;
  text-align:center;
  font-weight:bold;
}

div.text {
  font-family:verdana,arial,helvetica;
  font-size:9pt;
  line-height:12pt;
  text-align:left;
}

div.gross {
  font-family:verdana,arial,helvetica;
  font-size:13pt;
  line-height:12pt;
  text-align:justify;
  font-weight:bold;
}

p.zentriert {
  font-family:verdana,arial,helvetica;
  font-size:9pt;
  line-height:12pt;
  text-align:center;
}

div.grozent {
  font-family:verdana,arial,helvetica;
  font-size:13pt;
  line-height:12pt;
  text-align:center;
  font-weight:bold;
}

p.text2 {
  font-family:verdana,arial,helvetica;
  font-size:10pt;
  line-height:14pt;
  text-align:center;
  font-weight:bold;
}

a.books {
  font-family:arial,verdana,helvetica;
  font-size:9pt;
  line-height:11pt;
  font-weight:normal;
  text-decoration:none;
}

a.news {
  font-family:verdana,arial,helvetica;
  font-size:8pt;
  line-height:10pt;
  margin-top:0px;
  text-decoration:none;
}

div.newss {
  line-height:9pt;
  text-align:center;
}

ul.five {
  margin-top:5px;
  list-style-type:disc;
}

p.surf {
  margin-top:0px;
  margin-bottom:0px;
  line-height:9pt;
  text-decoration:none;
  font-family:arial,verdana,helvetica;
  font-size:10pt;
  text-align:center;
}

li {
  list-style-type:disc;
}

ul {
  margin-top:5px;
  margin-bottom:5px;
  list-style-type:disc;
  line-height:100%;
}

Fragen und Anregungen

Sie haben eine Frage zum Tool, haben einen Fehler gefunden oder möchten uns Ihre Ideen mitteilen? Dann nehmen Sie doch einfach mit uns Kontakt auf.

HTMLWorld Tools auf Ihrer Webseite

Einfach unten stehenden Code kopieren oder hier herunterladen, in die Webseite einbinden und allen Besuchern die HTMLWorld-Tools zur Verfügung stellen. Auf Ihrer Webseite erscheint die Toolbox dann so:

<form style="font-family:Arial; font-size:10pt;"
      enctype="multipart/form-data" method="get"
      action="http://www.html-world.de/tools/extern.php">
<input type="hidden" name="dowhat" value="url" checked="checked">
<fieldset style="width:400px; text-align:center;">
  <legend> 
   <span style="font-weight:bold;">HTMLWorld Website-Tools</span> 
  </legend>
  <br>http://
  <input style="height:25px;" type="Text" name="url"
         value="www." size="30">
  <input style="height:25px;" type="Submit" value="Prüfen"><br />
  <span style="font-weight:bold; font-size:8pt;">
   Beispiel: www.html-world.de
  </span>
  <table border="0" align="center" width="300">
   <tr>
    <td style="font-family:Arial; font-size:9pt;">
     <input type="Radio" name="typ" value="0" checked> Ladezeiten-Check
    </td>
    <td style="font-family:Arial; font-size:9pt;">
     <input type="Radio" name="typ" value="2"> HTML-Browsersupport
    </td>
   </tr>
   <tr>
    <td style="font-family:Arial; font-size:9pt;">
     <input type="Radio" name="typ" value="1"> Server-Speedtest
    </td>
    <td style="font-family:Arial; font-size:9pt;">
     <input type="Radio" name="typ" value="3"> CSS-Browsersupport
    </td>
   </tr>
  </table>
  <p style="text-align:right; margin:0px; padding:0px; padding-right:5px;
            font-size:8pt;">
   <a style="color:blue; text-decoration:none;"
      href="http://www.html-world.de">
    www.html-world.de
   </a>
  </p>
</fieldset>
</form>