Categories
Internet

CSS-Selektoren

CSS (3) hat zwei Selektoren, um Siblings (also Elemente auf gleicher Ebene) auszuwählen. Da gibt es zum einen foo + bar und foo ~ bar. In beiden Fällen hätte ich damit den bar-Teil ausgewählt. Was ist aber, wenn ich gerne das foo hätte? Nach langem Suchen bin ich zu dem Ergebnis gekommen, daß es so etwas in CSS nicht gibt. Nichtmal in CSS 3.

Gleiches gilt übrigens auch für Parents (Elemente der höheren Ebene). Man kann nur Children (Kind-Elemente) auswählen. Turtles all the way down.

Categories
Internet Programmierung

Zebra-Tables zum dritten

Zebra-Tabellen scheinen sowas wie ein Steckenpferd von mir zu sein. (s. hier und hier) CSS3 ist leider immer noch nicht weiter vorangekommen. Aber dafür habe ich in der Zwischenzeit Prototype für mich entdeckt. Prototype ist ein Framework für Javascript, was die Programmierung von Anwendungen in Javascript erheblich vereinfacht. Ich hatte ja schon mal hier angedeutet, daß sich mit ein wenig Javascript eine Zebra-Tabelle dynamisch — ohne extra Markup — erzeugen läßt. Das ganze endete mit ca. 20 Zeilen Javascript Code. Das gleiche mit Prototype sind weniger als 10 Zeilen. (und auch nur so lang, weil ich es lesbar machen wollte)

var ZebraTable = {
  load: function() {
    $$('table.zebra tbody > tr:nth-child(2n+1)').each(function(elt) {
      elt.addClassName('rowodd');
    })
  }
}

Event.observe(window, 'load', ZebraTable.load);

Ja, das ist alles. Wer sich den Code ein wenig genauer anschaut, wird dort einen CSS3-Seketor finden. Dieser Selektor ist jedoch komplett in Javascript innerhalb von Prototype implementiert und somit Browserunabhängig. Der Browser muß also kein CSS3 beherrschen.

Wer den Code ausprobieren möchte, muß einfach nur Prototype und den Code oben in sein HTML-Dokument einbinden. Und schon werden alle ungeraden Zeilen, die sich im Tabellenrumpf (<tbody>) einer jeder Tabelle mit der Klasse zebra befinden, mit der Klasse rowodd versehen. Nun ist es nur noch eine Sache von einfachstem CSS, diese Klasse mit einer anderen Hintergrundfarbe auszustatten.

Categories
Internet

CSS-Nudisten-Tag vorbei

Wir setzen nun wieder unser gewohntes FernsehprogrammDesign fort.

Categories
Internet

Heute ist CSS-Nackt-Tag

An dem heutigen Tage wird die Seite ganz ohne CSS präsentiert.

Ich mache ja sonst nicht bei jedem Scheiß mit, aber die Idee fand ich ganz gut.

Categories
Internet Mac Software Unix Windows

Firefox Web Developer Extension

Die Web Developer Extension für Firefox und Mozilla ist vermutlich das genialste seit geschnitten Brot. Mit dieser Extension kann man die aktuelle Webseite durch einen HTML/CSS-Validator jagen, Java/JavaScript und Animationen abschalten, sich alle Block-Level Elemente hervorheben lassen sowie alle Classes und IDs anzeigen lassen. Das Killerfeature des Extension ist jedoch die Möglichkeit, die Stylesheets beliebiger Webseiten in Echtzeit zu editieren. Jede Änderung am Stylesheet wird sofort im angezeigten Dokument dargestellt. Damit kann man kinderleicht ein eigenes Stylesheet entwickeln oder auch sich einfach nur mit CSS vertraut machen. Ich möchte es nicht mehr missen.

Categories
Dokumentation Internet

CSS3 or bust!

Während heutige Browser noch oft Probleme mit CSS1 und CSS2 haben, arbeitet das W3C schon an der dritten Version von CSS. In den letzten Tagen bin ich öfters auf Probleme gestoßen, die sich mit CSS1 und 2 gar nicht oder nur relativ umständlich lösen lassen.

Als Beispiel, wie CSS3 das Leben erleichtert möchte ich hier folgendes Beispiel zeigen:

Zebra tables
Um die Lesbarkeit von Tabellen zu erhöhen, werden die Zeilen abwechselnd mit 2 Farben eingefärbt. Benutzer von iTunes werden dieses Bild sofort erkennen. Die breiten Streifen helfen dem Auge sich entlang der Zeile zu bewegen.

Traditionell werden in solchen Tabellen die Tabellenzeilen jeweils abwechselnd mit 2 Klassen eingefärbt. Der Stylesheet sieht in der Regel so aus:

.odd  { background-color: inherit; }
.even { background-color: #e8f0f8; }

und die dazugehörige Tabelle sieht meist so aus:

<table>
<tr class="even"><td>foo</td></tr>
<tr class="odd" ><td>bar</td></tr>
<tr class="even"><td>baz</td></tr>
<tr class="odd" ><td>qux</td></tr>
</table>

Es ist natürlich lästig, die Classes bei jeder Zeile mitzuschleppen. In Skriptgenerierten Seiten ist das noch relativ einfach lösbar, wenn man jedoch Tabellen von Hand schreibt artet das schnell in Arbeit aus. Das Einfügen von Zeilen (bei ungeraden Anzahlen) ist bei längeren Tabellen nahezu undenkbar.

Es geht allerdings auch ohne Classes. CSS2 bietet sogenannte “adjacent sibling selectors”. Dazu muß man im HTML-Dokument überhaupt keine extra Vorkehrungen treffen. Die Tabelle könnte dann so aussehen:

<table>
<tr><td>foo </td></tr>
<tr><td>bar </td></tr>
<tr><td>baz </td></tr>
<tr><td>qux </td></tr>
<tr><td>quux</td></tr>
</table>

Damit nun die Zeilen abwechselnd eingefärbt werden, muß das dazugehörige Stylesheet so ausssehen:

tr+tr, tr+tr+tr+tr       { background-color: #e8f0f8; }
tr+tr+tr, tr+tr+tr+tr+tr { background-color: inherit; }

Natürlich hat auch diese Lösung ihre Probleme. Bei langen Tabellen werden die Stylesheets jedoch unerträglich unübersichtlich, außer man generiert das Stylesheet per Skript.

Wie Superman in seinem Strampelanzug kommt CSS3 hier zur Hilfe. Der nth-child Selektor erleichtert hier dem Designer das Leben. Die obere Tabelle läßt sich dann mit folgendem Stylesheet einfärben:

tr:nth-child(odd)  { background-color: inherit; }
tr:nth-child(even) { background-color: #e8f0f8; }

Das war’s. Keine unübersichtlichen Stylesheets, kein unnötiger Kram im HTML.

 

Border Images

Möchte man Blockelementen einen stylischen Rahmen verpassen, so muß man diese Elemente kunstvoll in Tabellen oder absolut positionierte <div>-Blöcke verpacken. (Ich verzichte hier auf Beispielcode, da dies nur zu einer HTML-Wüste führen würde) Dies bläht nur den DOM-Tree unnötig auf, ohne irgendwas zum Inhalt beizutragen.

CSS3 führt hier das Border-Module ein. Damit lassen sich für die 4 Kanten und Ecken eines Blocks Grafiken festlegen. Hierzu muß die Grafik in ihre Einzelteile zerlegt werden, sowie festlegen, wie diese Grafiken an die Größe des Blocks angepaßt werden. Als Beispiel möchte ich hier Zeigen, wie diese Rahmenteile benutzt werden könnten, um ein langweiliges Eingabefeld zu stylen. Der HTML-Code sieht erstmal völlig langweilig und unscheinbar aus:

<form method="get" action="foo.html">
<fieldset>
<label for="foo">foo:</label>
<input id="foo" name="foo" size="30" />
</fieldset>
</form>

Mit einem passenden Stylesheet wird nun diesem Eingabefeld ein modernes Design verpaßt. Die einzelnen Rahmenteile wurden nach den englischen Himmelsrichtungen benannt. (Ich habe in dem Beispiel einen möglicherweise schon vorhandenen Rahmen um das Eingabefeld außer Acht gelassen.)

input {
        border-top-left-image    : url("nw.png");
        border-top-image         : url("n.png") ;
        border-top-right-image   : url("ne.png");
        border-left-image        : url("w.png") ;
        border-right-image       : url("e.png") ;
        border-bottom-left-image : url("sw.png");
        border-bottom-image      : url("s.png") ;
        border-bottom-right-image: url("se.png");
        border-top-fit-length   : repeat;
        border-left-fit-length  : repeat;
        border-right-fit-length : repeat;
        border-bottom-fit-length: repeat;
      }


Wenn alles korrekt gelaufen ist, sollte dann das Eingabefeld von einem abgerundeten Rahmen eingefaßt sein. Da es bislang keine CSS3-fähigen Browser gibt, kann ich dieses Beispiel nicht nachprüfen. Das Bild ist nur eine Attrappe und zeigt, wie es aussehen sollte.

Ich hoffe, daß die Browser möglichst bald CSS3 unterstützen, um die Trennung von Markup und Design noch weiter voranzutreiben.