Auf http://compressor.ebiene.de/ kann man seine CSS und JavaScript Dateien einfach und smart komprimieren. Es gibt dabei zwei unterschiedliche Stufen (basic compress und powerful compress), die die Leserlichkeit des Codes unterschiedlich stark einschränken. Falls man mit der CSS-Datei danach noch weiter arbeiten möchte, empfehle ich die Basis-Kompression.
Die CSS-Datei von bennyn.de (v1) konnte von 7028 Bytes auf 3879 Bytes geschrumpft werden. Das sind gut 45%. Die erweiterte Kompression würde nochmals 7% einbringen, was aber dazu führen würde, dass ich mich als Mensch ziemlich schwer tun würde, den Code noch zu entziffern. Einem Webserver macht sowas jedoch nichts aus, im Gegenteil.
Im HTML-Sektor gibt es für das Anchor-Tag <a> folgende Attribute:
a:link für Hyperlinks von noch nicht besuchten Seiten
a:visited für Hyperlinks von bereits besuchten Seiten
a:focus für Elemente, die durch die Tabulator-Taste markiert werden
a:hover für Elemente, die durch die Maus hervorgehoben werden
a:active für gerade angeklickte Links
Alle Anchor-Tags lassen sich über CSS definieren. Die Eigenschaften focus und hover sind jedoch erst ab CSS 2.0 verfügbar.
Nach bestimmten Elementen (wie etwa einem Bild oder einer Liste), macht der Internet Explorer automatisch einen Umbruch.
Beispiel:
<img src=”bild.jpg” /> Text
Bei diesem Code würde der Text im Mozilla Firefox rechts neben dem Bild stehen. Der Internet Explorer hingegen würde nach dem Bild einen Umbruch machen und den Text darunter schreiben. Um solche Effekte zu verhindern, helfen in diesem Fall drei Div Container. Jeweils einer für das Bild und den Text mit der Eigenschaft float: left und dann noch einer, der den Textumfluss mit clear:left wieder zurücksetzt.
<div style=”float:left”><img src=”bild.jpg” /></div>
<div style=”float:left”>Text<img src=”bild.jpg” /></div>
<div style=”clear:left”></div>
Bei einer Liste würde das nicht gehen. Dort müsste man mit der Eigenschaft display: inline arbeiten, um mehrere Listen nebeneinander zu bekommen.
Beispiel:
<ul style=”display:inline”>
<li>Listenelement von Liste 1</i>
</ul>
<ul style=”display:inline”>
<li>Listenelement von Liste 2</i>
</ul>
<ul style=”display:inline”>
<li>Listenelement von Liste 3</i>
</ul>
Browsershots.org bietet die Möglichkeit an, seine Webseite in unterschiedlichen Browsern zu testen. Folgende Webbrowser sind dabei:
Linux
- Dillo 0.8
- Dillo 2.0
- Dillo 2.1
- Epiphany 2.22
- Firefox 1.0
- Firefox 2.0
- Firefox 3.0
- Firefox 3.1
- Firefox 3.5
- Flock 1.2
- Flock 2.0
- Galeon 2.0
- Iceape 1.1
- Iceweasel 2.0
- Iceweasel 3.0
- Kazehakase 0.4
- Kazehakase 0.5
- Konqueror 3.5
- Konqueror 4.2
- Minefield 3.2
- Minefield 3.6
- Navigator 9.0
- Opera 10.0
- Opera 9.50
- Opera 9.63
- Opera 9.64
- SeaMonkey 1.1
- SeaMonkey 2.0
- Shiretoko 3.1
- Shiretoko 3.5
Windows
- Avant 11.7
- Chrome 0.2
- Chrome 2.0
- Chrome 3.0
- Firefox 0.9
- Firefox 1.5
- Firefox 2.0
- Firefox 3.0
- Firefox 3.1
- Firefox 3.5
- Flock 1.2
- Flock 2.0
- Flock 2.5
- Flock 3.0
- K-Meleon 1.1
- K-Meleon 1.5
- Minefield 3.2
- Minefield 3.6
- MSIE 4.0
- MSIE 5.0
- MSIE 5.5
- MSIE 6.0
- MSIE 7.0
- MSIE 8.0
- Navigator 8.1
- Navigator 9.0
- Opera 10.0
- Opera 7.0
- Opera 7.11
- Opera 7.54
- Opera 8.0
- Opera 8.53
- Opera 8.54
- Opera 9.25
- Opera 9.26
- Opera 9.27
- Opera 9.50
- Opera 9.51
- Opera 9.52
- Opera 9.60
- Opera 9.61
- Opera 9.62
- Opera 9.63
- Opera 9.64
- Safari 3.0
- Safari 3.2
- Safari 4.0
- SeaMonkey 1.1
- SeaMonkey 2.0
- Shiretoko 3.5
Die einzelnen Internet Explorer Versionen lassen sich ganz gut mit dem IE NetRenderer von GEOTEK testen. Für Safari gibt es Browsrcamp.com. Mit dem Programm Optool kann man auch alle Browser auf seinem Rechner austesten, sofern man sie installiert hat. Ansonsten empfiehlt sich der VMware Player zur Emulation eines anderen Systems (inkl. Browser).
Es gibt zwei Möglichkeiten um eine CSS Datei mit einer HTML Datei zu verknüpfen.
Methode #1 – HTML zusammen mit CSS
<html>
<head>
<title>Beispiel</title>
<style type=”text/css”>
/* CSS Anweisungen */
</style>
</head>
<body>
<!– HTML Anweisungen –>
</body>
</html>
Methode #2 – HTML mit externem CSS
<html>
<head>
<title>Beispiel</title>
<link rel=”stylesheet” media=”screen” type=”text/css” href=”externe_css_datei.css” />
</head>
<body>
<!– HTML Anweisungen –>
</body>
</html>
0