Gutes CSS = besseres HTML

Verfasst am 11.02.2010 von Felix de Ruiter

Wenn man CSS-Selektoren geschickt einsetzt, kann man viele Klassen, und IDs einsparen, was letztendlich zu einem deutlich schlankeren und besser übersichtlichen Quelltext führt. Das neue Layout meines Online-Portfolios enthält nicht eine einzige Klasse oder ID. Das Stylesheet spricht die einzelnen Bereiche (Banner, Hauptnavigation, Inhalt, Seitenfuß usw.) einzig durch das semantische Attribut role an, welches Teil der HTML5-Spezifikation ist.

Aus diesem Code …

#header { ... }

… wird ganz einfach

header[role=banner] { ... }

… was im besten Falle zu

[role=banner] { ... }

… wird.

Dies lästt das Stylesheet zwar meist etwas umfangreicher werden, verhilft allerdings der Webseite zu einem auf Semantik und Leistung reduzierten Markup.

Beispiel:

<section id="wrapper">

  <header id="banner">

    <h1 id="logo">Titel der Website</h1>

  </header>

</section>

Kann auf Folgendes reduziert werden:

<section>

  <header role="banner">

    <h1>Titel der Website</h1>

  </header>

</section>

Der Layout-Umschlag (Wrapper) kann auf mehrere Arten angesprochen werden:

  • body > section { ... }
  • body section:first-child { ... }
  • body section:nth-child(1) { ... }

Soviel dazu. ;-)

Schlagwörter: , , , , , | Kategorien: Gestaltung | Markup | 1 Kommentar »

Grenzphilosophie v5.0

Verfasst am 9.02.2010 von Felix de Ruiter

Im Jahr 2008 entwickelte ich mein erstes richtiges Online-Portfolio mit dem Titel Grenzphilosophie. 2009 nahm ich die Website wieder aus dem Netz. Nun bastele ich an einem Relaunch der guten alten Grenzphilosophie und ein erster Entwurf ist bereits unter der bekannten Adresse (http://grenzphilosophie.de/) zu finden. Die kommenden Wochen werde ich dazu nutzen, die neue Site fertigzustellen und die Inhalte einzupflegen.

Die Grenzphilosophie v5.0 basiert auf HTML5 und CSS3. Das Layout entwickelte ich auf der Grundlage meines Mini-Frameworks Gloframe. Sobald alle Inhalte fertig sind, werde ich die Site auf meine Template-Engine Glogine aufsetzen und später mit meinem CMS Globacs, welches mit Gloframe und Glogine eine Einheit bildet, pflegen.

Schlagwörter: , , , , , , , | Kategorien: In eigener Sache | Keine Kommentare »