Einzelheiten zu dem mit DFM2HTML erzeugten CSS3-Code

Beispiel-Code

Ein Abschnitt aus der mit DFM2HTML erzeugten CSS-datei sieht so aus:

Das sieht auf den ersten Blick so aus, als ob hier drei mal dasselbe ausgedrückt wird und so ist es auch:-webkit ist für Safari und Google Chrome zuständig, -moz für den Firefox. Die Anweisung ohne Präfix wird vom Opera-Browser interpretiert. In jedem Fall wird damit ein an allen Ecken gleichmäßige Rundung erzeugt - so wie sie auf dieser Webseite bei der Kopfleiste, beim Inhaltbereich und bei der Fussleiste zu sehen sind.
Wenn die Ecken eines Objektes nicht gleichmäßig abgerundet sind, so wie beispielsweise auf dieser Demonstrationsseite zu DFM2HTML beim oberen Menübutton, dann sieht der Code folgendermaßen aus:
.LN_oben_nm {
border-top-left-radius:9px;
-webkit-border-top-left-radius:9px;
-moz-border-radius-topleft:9px;
border-top-right-radius:9px;
-webkit-border-top-right-radius:9px;
-moz-border-radius-topright:9px;
}

Größenvergleich

Mit CSS3

• 3 HTML-Dateien mit 17.850 Bytes
• 1 CSS-Datei mit 3.021 Bytes
• keine Grafikdateien

Ohne CSS3

• 3 HTML-Dateien mit 44.359 Bytes - der CSS-Teil der einzelnen Dateien ist wesentlich größer.
• 1 CSS-Datei mit 2.594 Bytes - diese datei ist natürlich kleiner
• 35 kleine Grafikdateien mit 47.636 Byte

Der Vorteil liegt sicher sofort auf der Hand. Der Umfang des Codes mit CSS3-Nutzung beträgt nur ca. 20% der Größe des herkömmlichen Codes. Das ist doch ein deutlicher Unterschied.