Dieses Jahr wirklich am Ende des Jahres und nicht einen halben Monat vorher die Highlights 2005 aus Film, Fernsehen und Internet.

Bester Kinofilm

  1. Batman Begins
  2. Hitch – Der Date-Doktor
  3. Hostage – Entführt
  4. Per Anhalter durch die Galaxis

Größte Enttäuschung: Star Wars Episode III – Die Rache der Sith

Beste Serien

  1. CSI:NY (VOX)
  2. Navy CIS (Sat.1)
  3. Criminal Intent (VOX)

Beste Bücher

  1. AJAX: Frische Ansätze für das Web-Design
  2. Der weiße Neger Wumbaba

Beste CDs

  1. Seeed: Next!
  2. Jack Johnson: In Between Dreams
  3. Ohrbooten: Spieltrieb
  4. Adam Green: Gemstones

Beste Webseiten

  1. 24ways
  2. 456 Berea Street
  3. A List Apart
  4. CSS Beauty
  5. Design Shack

Freud’sche Fehlleistung des Jahres: Angela Merkel

Deshalb sage ich: Rot-Grün kann unser Land nicht mehr regieren. Die PDS darf unser Land nicht regieren. CDU und CSU gemeinsam mit der SPD… Angela Merkel am 01.07.2005 im Rahmen der Diskussion um die Vertrauensfrage Schröders

Wenn sie gewusst hätte wie’s kommt…

Ganz oft steht es schon im Netz und auch dieses Jahr hat die Weihnachtsgrußwelle “Erics Weblog” erreicht. Nun finde ich ein einfaches “Fröhliche Weihnachten und einen guten Rutsch” relativ einfallslos. Vielmehr möchte ich ein wenig persönlich auf das Jahr zurückblicken und einen kleinen Ausblick auf das nächste Jahr wagen.

Das Jahr fing relativ turbulent an. Neben einer Spende für Unicef berichtete ich über die Rabatt-Aktion des Media Marktes. Daneben haben die ersten fünf Podcast-Folgen premiere gefeiert.

Der Februar wurde vor allem durch die heftige Reaktion auf die Klingeltonmafia bestimmt. Über all’ dem lagen natürlich die Abiturarbeiten und aus heutiger Sicht kann ich mich über die Häufigkeit meiner Weblogeinträge nur wundern.

Im März hatte ich dann mein Abi– endlich – wurde ja auch wirklich Zeit. Zur gleichen Zeit ging das Ladegerät meines Notebooks kaputt. Erst als ich auf meine Rechte bestand wurde es mir vom Atelco Service ausgetauscht, was sechs Wochen dauern sollte.

Im April erschien der (vorerst??) letzte Pocast. Und ich hätte die Seite beinahe eingestampft

Mai war es, als dann die Bombe der vorgezogenen Neuwahlen platzte (das Ergebnis ist ja bekannt).

Im Juni sah ich gleich drei Kinofilme und kaufte mir das Album von Jack Johnson: In Between Dreams.

Juli war der letzte Monat vor meinem Zivildienst, der von einem bunten Mix von Themen geprägt war.

Der August war der Monat der zwei kleine Microsites hierher brachte. Auch die neueste Yps-Ausgabe erschien in diesem Monat und war – gelinde gesagt – enttäuschend.

September, Oktober und November waren relativ unspektakulär. Zudem gingen die Posting-Zahlen zurück, das mag am Zivi-Job liegen. Aber auch an meinem momentanen Stimmungshoch, bei dem vieles Wichtiger ist als dieses Weblog. Beispielsweise das snookerblog und die Snooker-Reise in die Schweiz. Im November stand natürlich auch der Reboot an, der viele kontroverse Meinungen hervorrief. Genau wie gedacht.

Im Dezember gibt es nun noch sehr wenige Enträge – dies ist der zweite. Das liegt an meinen beiden Artikeln für den Webstandards- Adventskalender und daran, dass ich ein wenig auf der Suche nach meiner Zukunft bin.

Oh, das hört sich jetzt ziemlich dramatisch an, dabei ist die Situation eigentlich ganz einfach: Mein angestrebtes Studium (Bachelor of Science in Informatics) kann ich erst zum Wintersemester aufnehmen. Das bedeutet, dass ich nach meinem Zivildienst (April) sechs Monate “frei” habe. Nun habe ich folgende Möglichkeiten:

  1. Jobben als “Webentwickler” im weitesten Sinne
  2. Praktika mit geringer (zivimäßigen) Bezahlung
  3. Jobben ohne Bezug zu meinem Wunschberuf
  4. Ein “Bummelsemester” bis zum Herbst

All diese Möglichkeiten muss ich mir nun nochmal durch den Kopf gehen lassen, wobei Nummer 3 und 4 eigentlich nicht in Frage kommen, da ich einerseits auf das Geld angewiesen bin und andererseits ein Job mit Bezug zum Wunschberuf im Lebenslauf besser aussieht. Auf Praktika sind immer Augen zu werfen.

Morgen ist aber nun Weihnachten und deshalb habt ihr eigentlich schon genug gelesen und deshalb entlasse ich euch in euer verdientes Weihnachtswochenende.

Hinweis: Dieser Artikel erschien im Rahmen des Webkrauts-Adventskalenders.

Meist unterschätzt und oft schwierig zu verstehen ist das, was CSS die „Kaskade“ nennt. Die Kaskade bestimmt welche Regeln auf Elemente angewandt werden oder nicht. Vieles davon nehmen wir als selbstverständlich hin, doch bei Problemen ist hier oft die Lösung zu finden.

Wer hat Vorfahrt?

Die Kaskade kann man durchaus wie die Verkehrsregelung verstehen. Wenn zwei gleichartige Anweisungen aufeinander treffen, zum Beispiel bei widersprüchliche Angaben in importieren Stylesheets, muss das „Benutzerprogramm“ (i. d. R. ein Webbrowser) entscheiden, welche der Angaben zum Zug kommt. Dafür hat das W3C in der Spezifikation zu CSS einige Festlegungen getroffen.

Neben der Frage des Ursprungs ist auch die Frage nach der Spezifikation wichtig um zu entscheiden welche Regeln letztendlich angewendet werden:

Die Ursprungsfrage

Im Straßenverkehr herrscht der Leitspruch „Rechts vor Links“, es sei denn die Vorfahrt ist anders geregelt. Und ähnlich sieht es auch bei der Kaskade aus. Zwischen folgenden Ursprungsarten wird in CSS unterschieden:

Das Benutzerprogramm
Wenn man eine (X)HTML-Datei in einen Browser lädt bekommt man trotzdem einen lesbaren Text heraus: Die Überschriften (<h1><h6>) sind nach der Wertigkeit dargestellt, Listen (<ul>) haben Listenpunkte, Absätze (<p>) einen Abstand nach der letzten Zeile und betonte Textabschnitte (<em>) werden kursiv dargestellt. Der Browser wendet also ein Standard-Stylesheet auf das Dokument an [1].
Der Benutzer
Der Benutzer (also der, auf dessen Rechner der Browser läuft) kann ein eigenes Benutzerstylesheet einrichten, in dem er beispielsweise eine größere Schrift oder eine andere Schriftart festlegen kann.
Der Autor
Der Gestalter der Seite wiederum – und das ist die häufigste Form, der wir begegnen – kann Farben, Anordnung und Schrift seiner Webseite festlegen. Diese Autorenstylesheets werden in das (X)HTML-Dokument eingebunden und dann angewandt.

Wer hat das größte Gewicht?

Nun ist natürlich die Frage noch nicht geklärt, welche Anweisungen angewendet werden. Dafür ordnet die Kaskade jeder Stilregel eine Gewichtung zu, wenn mehrere Regeln gelten setzt sich die mit der höheren Gewichtung durch.

Es gilt: Regeln in Autorenstylesheets haben ein größeres Gewicht als Benutzerregeln und beide sind gewichtiger als das Browserstylesheet. Ein Ausnahmefall bilden sogenannte „!important-Regeln“. Es gilt folgende Reihenfolge:

  1. Benutzerstylesheet mit !important *
  2. Autorstylesheet mit !important *
  3. Autorstylesheet
  4. Benutzerstylesheet
  5. Browserstylesheet

(*) Diese Reihenfolge wurde in CSS Level 2 geändert, um beispielsweise vergrößerte Schrift wirken zu lassen (Siehe Beispiel 2). Vorher war die Reihenfolge noch umgekehrt – Browser, die über eine CSS-Implementation nach Level 1 verfügen, bevorzugen also Autorenstylesheets generell vor Benutzerstylesheets.

Beispiel 1: Betrachten wir folgendes Browserstylesheet (entnommen aus der html.css von Firefox):

blockquote {
display: block;
margin: 1em 40px;
}

Der Benutzer des Browsers hat sich ein Benutzerstylesheet angelegt, in dem er Zitate (blockquote) besser hervorheben will. Er setzt also einen roten, 2 Pixel breiten Rahmen um das Zitat und setzt den Außenabstand (margin) überall auf 1em:

blockquote {
margin: 1em;
border: 2px solid red;
}

Der Autor der Seite hat sich nicht viele Gedanken über Zitate gemacht. Er möchte, dass ein breiter grauer Balken links des Zitats erscheint und dass der Text einen Innenabstand (padding) von 0.5em besitzt. In seinem Stylesheet steht nun:

blockquote {
padding: 0.5em;
border-left: 2.4em solid silver;
}

Was aber nun beim Benutzer angezeigt wird ist nichts von alle dem. Es wird viel mehr als ein Gemisch aus all diesen Formen interpretiert:

blockquote {
display: block;
margin: 1em;
padding: 0.5em;
border: 2px solid red;
border-left: 2.4em solid silver;
}

Und das sieht dann so aus:

Sein oder nicht sein. Das ist hier die Frage.

Beispiel 2: Schriftgrößenveränderung durch ein Benutzerstylesheet

Im Browser ist eine Standardschriftgröße von 16 Pixel eingestellt. Der Benutzer hat allerdings eine Sehschwäche und erhöht diese durch folgende Anweisungen auf 20 Pixel, damit diese Einstellung nicht durch den Seitenautor überschrieben werden kann kennzeichnet er die Anweisung als !important:


body {font-size: 20px !important;}

Falls der Webseitenautor die Schriftgrößen durchgängig relativ (durch em– oder %-Angaben) angegeben hat, skalieren diese automatisch mit:

Bei 16 Pixel Basisschriftgröße:
h1 {font-size: 220%}: 35px
h2 {font-size: 1.8em}: 29px

Bei 20 Pixel Basisschriftgröße:
h1 {font-size: 220%}: 44px
h2 {font-size: 1.8em}: 36px

Die Spezifität

Die Spezifität regelt die Anwendung von Regeln nach dem Prinzip „Je spezifischer, desto wichtiger“. Beispiel:

p {color: green;}
p.wichtig {color: red;}
p#quer1 {color: orange;}

Die Frage ist nun: „Welche Regel ist spezifischer?“ Wie wird folgender Code angezeigt:

<p class="wichtig" id="quer1">Dies ist ein wichtiger Absatz.</p>

Die Antwort ist nicht so schwierig, es ist nämlich eine orangene Farbe.

Dies ist ein wichtiger Absatz.

Weshalb kommt der Browser zu diesem Ergebnis? Er wendet folgende Konventionen beim Berechnen der Spezifität an:

  • Zuerst werden die ID-Angaben des Selektors gezählt, diese ergeben eine Zahl a,
  • dann werden alle Attribute gezählt (dazu gehören Klassen, Pseudoklassen, Attribut- und Pseudoselektoren) und b zugewiesen.
  • Schließlich werden alle Elemente (und Pseudoelemente) im Selektor gezählt und einer Zahl c zugewiesen.

Die Reihenfolge a, b und c ergibt dann die Spezifität, wobei zuerst a, dann b und schließlich c verglichen werden. Wenn sich die Selektoren bereits bei a unterscheiden (z.B. 0 und 1) wird der Spezifischere (also der mit der 1) angewendet.

Das bedeutet für unser obiges Beispiel folgende Spezifitäten:

Selektor a b c Gesamt
p 0 0 1 3. Platz
p.wichtig 0 1 1 2. Platz
p#quer1 1 0 1 1. Platz

Ein Sonderfall ist die Zuweisung von Styleangaben im (X)HTML-Quelltext durch das style=""-Attribut. Diese Anweisung ist immer gewichtiger ist als die im Stylesheet angegebenen Definitionen.

Schauen wir uns nun folgende Deklarationen an:

div#test1 p { color: green;}
div p#test2 { color: maroon;}

Die Spezifität beider Werte ist gleich (1,0,2). Nun wendet der Browser immer die letzte Regel an, die im Stylesheet steht, in der Annahme diese sei die erwünschte. Bei folgendem (X)HTML-Schnipsel…


<div id="test1">
<p id="test2">Dies ist ein Satz in rotbraun.</p>
</div>

…entsteht also ein Satz in rotbraun.

Dies ist ein Satz in rotbraun.

Nun ist es nicht verwunderlich, dass man manchmal Probleme mit der Kaskade hat. Oft kommt es vor, dass man einen Rahmen breiter zeichnen möchte und man den entsprechenden Wert im Stylesheet ändert. Doch nichts passiert. Die Begründung dafür kann in der Kaskade zu finden sein, entweder wird die Einstellung durch eine Angabe höherer Spezifität überschrieben oder es folgt eine Angabe mit gleicher Spezifität. Dagegen helfen nur gut kommentierte Stylesheets sowie die Anwendung von sogenannten Pfadangaben, d.h., dass statt einfachen Angaben wie p.wichtig kompliziertere Angaben im Stylesheet vorkommen: div#container div#inhalt p.wichtig.

Weitere Beispiele für Spezifitäten:

Selektor ID-Angaben (a) Attribute (b) Elemente (c)
* 0 0 0
blockquote 0 0 1
blockquote.pullquote 0 1 1
p:lang(en) 0 1 1
#special 1 0 0
blockquote#special 1 0 1
body div#inhalt blockquote 1 0 3
blockquote#special.pullquote 1 1 1

Weiterführende Links

…ein Webstandardsadventskalendertürchen ist offen :)

Im ersten Beitrag geht es um das Thema Webstandards allgemein. Wozu Webstandards? fragt der erste Artikel und gibt gleich die Antworten:

Am Anfang stand die Idee, Informationen auf der ganzen Welt für Jedermann zugänglich zu machen. Es wurden Grundregeln entwickelt, nach denen Endgeräte die aufbereiteten Texte interpretieren sollten. Es wurden also Standards gesetzt. Standards sind die Regelwerke, auf denen die Entwicklung des Web fußt: HTML, CSS, ECMA-Script (Javascript), XML. […] Modernes Webdesign mit Webstandards wendet sich von den traditionellen Layouttabellen ab und trennt Struktur und Layout. So war es bei der Erschaffung von HTML gedacht. HTML gibt dem Inhalt eine Struktur. Die Tags zeichnen Textteile danach aus, was sie sind, nicht wie sie aussehen sollen. […] Die Trennung von Inhalt und Layout wird gerne synonym für Webstandards genommen. Webstandardadventskalendertürchen Nummer 1 (Jens Grochtdreis)

Meine Artikel erscheinen am zwölften und zwanzigsten Dezember.