CSS – Übersicht
Hier geht es zu folgenden Unterkapiteln:
- CSS einbinden (intern)
- CSS einbinden (extern)
- Tabellen formatieren
- Elemente zentrieren
- Inputfelder formatieren
- Textlinks formatieren
- Elemente umfließen
- Seitenränder verhindern
- Mauszeiger formatieren
- Internet Explorer
Es geht hier um CSS, die ergänzende Layoutsprache zu HTML.
HTML und CSS bilden das perfekte Gespann, um Inhalte nicht nur zu übermitteln (HTML), sondern auch noch schön zu gestalten (CSS).
CSS-Layout gegen Tabellenlayout
Früher mußte komplexes Layout (z. B. mehrspaltige Darstellung) mit HTML durch
Verwendung von Tabellen umgesetzt werden. Tabellen dienen eigentlich aber nur
der Darstellung komplexer, mehrdimensionaler Datenstrukturen (Fahrpläne,
Kalender, Telephonrechnungen etc.), ebenso, wie das Element h1
nur für eine Überschrift steht – und zwar für die oberste, nach der z. B.
die Unter-Überschriften h2, h3 ... h6
folgen können). Tabellen sind in einer Welt von reinem HTML die einzigen
Elemente, die Spalten erzeugen können.
Mittlerweile aber ist die Browserunterstützung von CSS so gut, daß man auf Tabellen als Layoutmittel verzichten kann. HTML-Tabellen dienen endlich nur noch dazu, wofür sie geschaffen wurden: der Darstellung tabellarischer, d.h. mehrdimensionaler, Daten.
CSS-Unterstützung der verschiedenen Browser
Leider unterscheiden sich die verschiedenen Browser noch stark in ihrer CSS-Unterstützung, so daß es nicht immer ganz leicht ist, ein ähnliches Aussehen zu gewährleisten. Gute aktuelle Browser sind derzeit die auf der Gecko-Technologie beruhenden Browser Mozilla (wird leider nicht mehr weiterentwickelt; ein Nachfolger namens SeaMonkey soll aber seinen Platz einnehmen) und Firefox (sowie Netscape, brauchbar ab etwa Version 7), dann der sehr benutzerfreundliche Browser Opera (ebenfalls ab etwa Version 7) sowie die Browser der KHTML-Familie: Konqueror (Linux, ab etwa Version 3) und Safari (Apple Macintosh OSX, ab etwa Version 1). Diese Browser unterstützen bereits weitgehend bis nahezu vollständig CSS 2.1 (wurde 1998(!) verabschiedet) sowie Teile des noch nicht fertigen Entwurfs von CSS 3.
Spitzenreiter sind hier Mozilla und Firefox mit ausgezeichneter CSS-Unterstützung.
Opera – benutzerfreundlich und gut
Opera ist ebenfalls sehr gut, orientiert sich aber häufig an gewissen Fehlverhalten des Internet Explorer (IE), damit möglichst viele Seiten ähnlich wie im IE angezeigt werden. Somit fällt dem Benutzer der Umstieg zu Opera nicht so schwer. Apropos Opera: Kein Browser ist von Hause aus so benutzerfreundlich. Alles läßt sich den eigenen Wünschen anpassen, außerdem ist er schnell – sowohl beim Starten, als auch bei der Anzeige von Seiten. Kein Wunder, daß Opera, obwohl er eigentlich nicht kostenlos zu haben ist (es wird bei der kostenlosen Testversion relativ unauffällige Werbung eingeblendet), treue Freunde hat. Der Kauf lohnt sich für jene, denen Mozilla und Firefox noch nicht genug entgegenkommen – speziell für Sehbehinderte und anderweitig eingeschränkte Nutzer; aber jeder sollte einmal das Internet durch die Augen eines Opera gesehen haben.
Die KHTML-Familie: Konqueror und Safari
Konqueror und Safari, deren gemeinsamer Kern KHTML heißt, sind ebenfalls moderne Browser, zeichnen sich aber häufiger noch als Opera durch unvorhergesehenes Verhalten aus, was es teilweise schwierig macht, eigene Seiten auch an diese Browser anzupassen. Diese Browser liegen – ähnlich wie der Internet Explorer – ihrem Betriebssystem bei; Konqueror findet sich häufig unter Linux; Safari, der auf Konqueror basiert, ist der Standardbrowser bei neueren Apple-Macintosh-Systemen. Über einen Mac verfüge ich nicht, deswegen kann ich nur von Konqueror sprechen: Ältere Versionen ließen mich die Haare raufen – ab Version 3.3 allerdings versteht er CSS so ausgezeichnet, daß ich ihm kaum noch etwas schlechtes nachsagen kann. Er verdient es, in die Liga der oberen drei – Gecko, Opera und KHTML – aufgenommen zu werden.
Konqueror auf einem Windows-PC testen
Übrigens hindert Dich nichts daran, Konqueror einmal zu testen – gerade auch, um die eigenen Seiten mal mit ihm anzuschauen. Einen Safari bekommt man unter Windows nicht so einfach installiert, Linux allerdings läuft auch von CD ohne Installation auf dem eigenen Rechner. Da Linux zudem kostenlos ist, kannst Du es Dir einfach herunterladen und testen, ohne dafür ins Gefängnis gehen zu müssen (was bestimmt ein Traum von Microsoft ist – sicherlich wäre es Microsoft aber noch lieber, wenn für jede illegale Windows-Kopie einmalig nur zehn Euro gezahlt werden würden; da kommen auch schnell einige Milliarden zusammen...).
Wo gibt’s Linux? Linux für die CD gibt’s beim gutsortierten Fachhandel: Ich empfehle Kanotix, das auf Knoppix basiert. Einfach herunterladen (Achtung! Breitband erforderlich! Frage ggf. gute Freunde oder lade es Dir im Büro herunter, wenn Dein Arbeitsplatz dann nicht in Gefahr gerät...), gemäß Anleitung brennen und dann den Rechner mit der eingelegten CD starten; schon kannst Du mit Konqueror Deine Festplatte erkunden (nicht nur Deine Festplatte: Ein Apache-Server ist vorinstalliert, auch sonst ist alles dabei, was Du für das Netzwerk brauchen könntest). Diese CDs eignen sich auch hervorragend zur Datenrettung, wenn Windows mal wieder nicht mehr arbeiten will...
Tip: Sowohl Kanotix als auch Knoppix lassen sich sehr einfach auf der Festplatte installieren (Kanotix ist dafür etwas besser geeignet), so daß dann permanent ein Debian-Linux (auf dem beide basieren) zur Verfügung steht. Ich bin übrigens Anfang 2004 auch diesen Weg gegangen und verwende seither (ohne Vorkenntnisse!) nur noch mein Debian-Linux; Windows ist ein überflüssiges und zudem zu teures Betriebssystem.
Das Schlußlicht: Der Internet Explorer
Der mit derzeit noch über 80% Anteil verbreitetste Browser, der Marktführer Internet Explorer aus dem Hause Microsoft, wurde zuletzt im Jahre 2001 aktualisiert (als IE 6). Zwar wurden mit dem Service Pack 2 (SP2) für Windows XP und Windows 2000 im Jahre 2004 auch Teile des IE neu geschrieben, allerdings nur in Hinblick auf die gravierenden Sicherheitslücken, die diesen Browser zum beliebten Angriffsziel von Hackern werden lassen. Davon abgesehen gibt es SP2 nicht für ältere Windows-Versionen; Service Packs nach Version 2 gibt es auch nur für Windows XP, nicht aber für Windows 2000 und älter.
Die CSS-Unterstützung wurde leider nicht mehr überarbeitet, der IE unterstützt mit starken Einschränkungen einen Teil von CSS 2.1 – Microsoft erwähnt stolz, der IE 6 würde CSS 1 unterstützen... Das macht ihn zum eigentlichen Problemkind der Web-Entwicklung. Mit einiger Mühe lassen sich aber auch saubere und zukunftssichere Seiten so anpassen, daß sie diesem Urgestein der Browserwelt ein gutes Aussehen präsentieren. Der für Mitte 2005 angekündigte IE 7 soll laut Microsoft vor allem Verbesserungen im Bereich der Sicherheit bringen; von verbesserter CSS-Unterstützung ist zunächst leider nicht die Rede. Das ist bedauerlich und wird hoffentlich noch mehr Nutzer dazu verleiten, andere Browser zu verwenden.
Noch ältere Browser
Was ist mit noch älteren Browsern als dem Internet Explorer 6? Gut, seine beiden Vorgänger IE 5 und IE 5.5 unterscheiden sich nicht so gravierend von ihm (was nicht gerade dafür spricht, daß er grundlegend verbessert wurde...); mit einigen Tricks läßt sich auch für diese Browser ein anständiges Aussehen der eigenen Seiten erzielen. Und noch ältere? IE 4 und Netscape 4.x? Diese Browser Verstehen CSS so schlecht, daß sie es gar nicht erst zu sehen bekommen sollten; wie das geht und was die Ergebnisse davon sind, werde ich später in einem eigenen Artikel beschreiben. Hast Du einen so alten Browser zur Hand, dann schaue Dir ruhig einmal diese FAQ damit an: Sie ist zwar benutzbar – aber sie sieht ganz anders aus. Viele moderne Seiten schließen ältere Browser vom CSS aus: Der HTML-Code wird ja immer noch korrekt interpretiert, dem Besucher entgeht also nichts. Vergleiche z. B. die Seiten des Stern oder auch von GMX.
Liebe Grüße,