CSS & HTML-Tutorials auf nicogutmann.de

CSS 2.1 – Zurück in die Zukunft

Donnerstag, 8. Oktober 2009, um 15:53 Uhr in CSS-Tutorials.

Das wird hier wohl kein langer Artikel, aber es soll aufzeigen, dass viele Webentwickler sich dank der, nennen wir es einmal, langsam Vorranschreitung des Internet Explorers aus dem Hause Microsoft nicht herantrauen CSS in seinen vollen Zügen einzusetzen. Dabei spreche ich nicht von CSS 3, auf das ich mich schon sehr freue, sondern von dem im Jahre 1999 entwickelten CSS 2.1.
Ja, die offiziell aktuelle CSS-Version gibt es schon eine gefühlte Ewigkeit und trotzdem kann man sie nicht in vollen Zügen einsetzen, oder? Auf diese Frage gibt es ein eindeutiges: Jein.

Der IE6 ist noch unter uns

Fakt ist leider immer noch, dass der Internet Explorer 6 noch relevant ist, wenn es darum geht sine Website in Browsern zu testen, das wird sich wohl auch im Jahre 2010 noch nich ändern bzw. nur geringfügig. Fakt ist aber auch, dass wir uns aus diesem Grunde nicht in Richtung Zukunft orientieren sollten, ganz im Gegenteil. Es geht nur darum wie wir es machen.
Es gibt recht viele Selektoren, Pseuoklassen und Eigenschaften in CSS 2.1, die der IE6 nicht versteht, seine Nachfolger Nummer 7 und 8 hingegen schon, die Browser, wie Firefox, Safari, Chrome oder Opera natürlich allemal (Safari kann sogar schon CSS 3 in seiner neuesten Version). Diese Selektoren/Pseudoklassen können trotzdem verwendet werden, ohne die Seiten für den IE 6 auszuschließen.

Keine Gleichheit für Alle

Form follows Function, diesen Leitsatz sollte sich jeder hinter die Ohren oder noch besser vor seinen Arbeitscomputer schreiben. Eine Website muss in erster Linie funktionieren, ohne Einschränkungen, ohne Barrieren (Barrierefreiheit), über das Aussehen lässt sich bekanntlich immer streiten. Um die Kurve zu meinem Leitzsatz “Benutz CSS 2.1″ wieder zu bekommen, sage ich: Eine Website muss nicht in jedem Browser pixelgenau gleich aussehen und ein User, der mit einer alten Technik unterwegs ist, sollte nicht dafür auch noch belohnt werden. Das Wichtige ist: Die Website behält seine Grundstruktur, behält seine Idee und seine Seele.

Ich hatte früher einen Schwarz-Weiß-Fernseher, der Rest in meiner Straße und fast alle in meinem Dorf hatten einen Farbfernseher. Manche hatten einen mit 50 Zentimetern Durchmesser, andere mit 40, ich mit knappen 30 Zentimeter. Um 20:00 Uhr haben alle die Tagesschau gesehen und wir haben sie alle empfangen und den gleichen Informationsgehalt empfangen, nur ich eben nicht mit den ganzen schönen Farben und ein wenig gequetschter bzw. sehe die Moderatorin evtl. nicht ganz. Glaubst du das Erste hätte, nur weil ein paar Leute noch mit S/W-Fernseher unterwegs waren, ihre Sendungen ebenfalls in schwarz-weiß gezeigt, damit alle es genau gleich sehen und keiner bevorteilt wurde, aus gestalterischen Gesichtspunkten?

Kenne deinen Feind

Nun sollte man nicht einfach drauflos schreiben und sich nicht mehr um die User, die mit einem älteren Modell unterwegs sind, kümmern, das wäre der falsche Weg. Man muss aber seinen Feind kennen, wie man so schön sagt, und auf ihn reagieren.
Lange Rede immer sehr viel Sinn: CSS 2.1 kann man sehr gut verwenden, wenn dadurch keine Schäden in der Usability und im Informationsgehalt entstehen, die so erheblich sind, dass der User sich nicht mehr zurecht findet, wichtige Informationen nicht mehr erhalten kann oder die Seite gar nicht mehr bedienen kann.

CSS 2.1: Einige sinnvolle Selektoren

Wovon rede ich denn nun genau? Welche Selektoren kann ich benutzen, welche Pseuoklassen gibt es denn, die der IE 6 nicht versteht, dennoch verwendet werden könnten? Ich selbst verwende für diese Tutorial-Seite einige davon, weil sie einfach praktisch sind:

Pseudoklasse :after

Die Pseudoklasse :after versteht auch der IE 7 nicht und fügt einfach Eigenschaften, die man dafür definiert, hinzu, nachdem das Objekt geschlossen wurde ohne zusätzlichem Markup.
Hier kann man super Hintergrundbilder zusätzlich einbinden, da es bislang nicht möglich ist einem Objekt mehr als ein Hintergrundbild zuzuweisen. Das ändert sich in CSS 3 zum Glück.
.info-box:after {
content:"";
display:block;
width:224px;
height: 45px;
background: url(imgs/beitrag_fusszeile-rechts.png);
}

Pseudoklasse :before

Ähnlich verhält es sich mit :before, nur das das Definierte eben vor dem Objekt in Erscheinung tritt. Auch das habe ich auf dieser Website verwendet und zwar die Überschriften für die Codes, wie CSS-Code, etc:
code:before {
display: block;
height: 15px;
color: white;
position: absolute;
top: -10px;
left: 10px;
background: black url(imgs/bg-code.gif) 3px center no-repeat;
padding: 2px 5px 2px 20px;
content: "CSS-Code:";
}


Content-Eigenschaft

Wie vielleicht schon aufgefallen ist, verwende ich die Eigenschaft content in diesen Selektoren. Diese Eigenschaft ist auch nur dort anwendbar und mit ihr kann man dem Objekt Inhalt verpassen. Das geht von einem einzigen Punkt bishin zu einem Bild (nicht für den IE bis einschließlich 8).

Attributselektoren

Attributselektoren sind eine feine Sache und können verdammt viel Arbeit erleichtern und Markup sparen. Mit ihnen kann man Attribute wie alt,type,class,id,name,href, etc direkt per CSS ansprechen und Objekten, die diese Attribute besitzen individuell ansprechen.
Das ist sehr Sinnvoll bei Verlinkungen (Unterschdiung zwischen externen und internen Links), bei Formularen (Input-Felder für Namen und Absendebuttons) oder auch bei Sprachauswahlen (lang=”en”). Es funktioniert im Prinzip ganz einfach und ist beliebig variabel:
a[href] {
background: url(imgs/icon-externer-link.png) no-repeat;
}
a[type="submit"] {
width: 100px
}
img[alt~=Galerie] {
width: 200px /* Alle Bilder die das Wort "Galerie" enthalten */
}

Das ist alles noch innerhalb von CSS 2.1. CSS 3 bietet in dieser Richtung dann noch viel mehr und es wird alles noch individueller werden.

Nachbar-Selektoren

Eine weitere sehr schlaue Entwicklung, mit dem ihr benachbarte Objekte ansprechen könnt ohne mit IDs oder Klassen um euch zu werfen. Meist wird das dann verwendet, wenn man Abtsände definieren möchte, auch ich habe es auf dieser Website verwendet:
p+h4 {
margin-top: 15px
}
Ich verwende auf unterschiedlichen Seiten Überschriften vierter Ordnung (h4), nicht nur in reinen Textabschnitten, sondern auch in Listen. Nun möchte ich aber nur den Überschriften Luft nach oben lassen, die in Textpassagen vorkommen und das recht simpel.
Nun wurde der Artikel doch länger als befürchtet, doch es musste alles gesagt werden, was gesagt wurde .

1. Swen sagt:

   10. November 2009 um 16:45

   Ein sehr schönes Tut, der Vergleich mit der Tagesschau ist echt klasse!

   Gefällt mir sehr gut!