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 | Keine Kommentare »

QBrushes

Verfasst am 9.01.2010 von Felix de Ruiter

Wer auf der Suche nach kostenlosen, professionellen Photoshop-Brushes ist, sollte einmal bei QBrushes vorbeischauen. Die Website bietet eine große Auswahl an Brushes und Texturen, die sich wahrlich sehen lassen können.

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