Teil 2: Modernes Webdesign mit CSS3 – ein Überblick über die Kernfeatures

Web-App Tutorial: die Kernfeatures von CSS3
Keine Kommentare

Das Ziel dieser Serie ist es, Sie mit den aktuellen Techniken moderner Webanwendungen vertraut zu machen. Diesmal geht es um die Gestaltung des Inhalts mit Cascading Style Sheets (CSS). Die Gestaltungsoptionen haben mit der Version CSS3 erheblich zugenommen. Wir stellen hier die wichtigsten Möglichkeiten vor, die Sie für das Erstellen von Webanwendungen brauchen.

Moderne Webprogrammierung, gleichgültig welche Technik Sie letztendlich einsetzen, basiert immer auf dem Zusammenspiel von HTML, CSS und JavaScript. Insofern erzählen wir Ihnen hier nichts Neues, und dennoch nehmen wir die zahlreichen erweiterten Möglichkeiten der neuen Versionen dieser Technologien zum Anlass, systematisch mit den Grundlagen zu beginnen. Die Neuerungen und die strikte Verwendung von HTML5 als Seitenbeschreibungssprache haben wir Ihnen bereits im ersten Teil der Artikelserie vorgestellt. Das Fazit aus dieser einführenden Darstellung lautet „HTML5 definiert die Bedeutung, d. h. die Semantik einer Webseite – nicht deren Aussehen bzw. Design“. Mit anderen Worten: Die früher noch üblichen Formatanweisungen, die direkt in die HTML-Tags notiert wurden, lassen Sie bitte unter allen Umständen bleiben! Für die Darstellung (Design) des Inhalts ist ausschließlich die Style-Sheet-Sprache CSS verantwortlich. Auf CSS gehen wir jetzt in kompakter Art und Weise ein und schaffen damit das Fundament für solide und moderne Webapplikationen. Abbildung 1 zeigt die Lernpyramide der Technologien, wie wir sie in diesem Kurs durchlaufen.

Abb. 1: Die Pyramide der Technologien für eine moderne Webapplikation

Abb. 1: Die Pyramide der Technologien für eine moderne Webapplikation

Artikelserie

  • Teil 1: Motivation – Vom Fat-Client zur modernen Web-App mit HTML5
  • Teil 2: Modernes Webdesign mit CSS3 – ein Überblick über die Kernfeatures
  • Teil 3: Funktionalität realisieren: von JavaScript zu TypeScript
  • Teil 4: Durchstarten: Eine Angular-App: Data Binding, Kommunikation mit REST API
  • Teil 5: Design: UI-Gestaltung, z. B. Ionic
  • Teil 6: App-Arten: Mobiles mit Cordova, Desktop mit Electron

Das Zusammenspiel

Das Zusammenspiel zwischen HTML und CSS haben wir gerade schon erläutert: Die zentrale Rolle spielt das jeweilige HTML-Element. In ihm wird der Inhalt definiert, also welche Textbestandteile die Überschrift sind, welche Elemente die Navigation bilden und welche Texte für den eigentlichen Inhalt zuständig sind. Wie die einzelnen Elemente letztendlich dargestellt werden, wird über CSS festgelegt. Die Einbettung von Skripten (JavaScript) führt zur Interaktionsfähigkeit der Webapplikation auf Seiten des Clients. CSS und JavaScript lagert man aus Gründen einer guten Anwendungsarchitektur aus den HTML-Dokumenten in eigene Dateien aus. Komplettiert wird eine Webseite schließlich durch weitere Elemente (Medien), wie zum Beispiel Bilder oder Videos. Wir werden jetzt das eine oder andere Beispiel erstellen, dazu brauchen wir immer etwas Content in Form von Text. Webdesigner nutzen dazu so genannte Blindtexte.

Blindtexte erstellen: Lorem Ipsum

Ein Arbeitstipp: Um Prototypen mit HTML und CSS zu erstellen, braucht man Texte, die man testweise formatieren kann. Auch bei der Gestaltung der Webseite (Positionierung, Layout) arbeitet man in der Praxis gern mit Platzhaltern bzw. Blindtexten. Unter Designern hat sich der Einsatz von Lorem-Ipsum-Texten etabliert. Diese Texte lenken nicht von der eigentlichen Aufgabe ab und können später durch die korrekten Textinhalte ersetzt werden. Solche Generatoren, um schnell ein paar Zeilen Blindtext zu erzeugen, finden sich schnell im Internet. Probieren Sie es aus!

Einbindung von CSS

CSS liegt aktuell in Version 3, d. h. CSS3 vor. CSS3 ist modular aufgebaut, befindet sich fortlaufend in der Weiterentwicklung, und ebenso sind noch nicht alle Module durch das W3C-Konsortium standardisiert. Dennoch können Sie davon ausgehen, dass bereits ein Großteil der Features durch die aktuellen Browser unterstützt wird. Im Einzelfall muss man aber tatsächlich nachsehen, ob eine ausgewählte Funktion im verwendeten Browser funktioniert. Über die Webseite „Can I use?“ bekommen Sie dazu ausführliche Informationen über jedes Feature von CSS. Grundsätzlich gibt es drei Möglichkeiten, CSS in HTML einzubinden:

  • Inline Style: Dabei notieren Sie die CSS-Style-Angaben direkt im HTML-Element. Das ist bezüglich der Struktur die schlechteste Möglichkeit. Es sieht vom Prinzip wie folgt aus: <h1 style=“font-family: Courier;“>Das Web-Blog</h1>. Nach dem öffnenden Tag, hier h1 für die Überschrift der Ebene eins, erfolgt die Angabe der Schriftart. Eine solche Style-Angabe innerhalb eines HTML-Tags gilt nur für das betreffende HTML-Element, in dem diese Anweisung notiert wurde. Für eine weitere Überschrift der Ebene eins muss diese Anweisung wiederholt werden. Es gibt nahezu keine Gründe, den Inline Style zu verwenden, ggf. zum Testen der Wirkung bestimmter CSS-Anweisungen.
  • Internes Style Sheet: Hier sammeln Sie alle Style-Anweisungen einer Webseite und geben sie gebündelt im Kopfbereich der Seite (header) an. Der Vorteil: Alle Style-Anweisungen liegen an zentraler Stelle im betreffenden Dokument. Für gleiche Elemente, zum Beispiel für alle Überschriften der Ebene h1 des Dokuments, braucht es jetzt auch nur noch eine Style-Angabe. Der Nachteil besteht darin, dass die Style-Anweisungen nur für das betreffende Dokument gelten, d. h. Überschriften der Ebene eins anderer HTML-Dokumente sind von den Anweisungen nicht betroffen. Hier muss die Style-Anweisung wiederholt werden. In Listing 1 sehen Sie ein Beispiel. Innerhalb von <head> wird der Abschnitt für die Styles mit <style> Dazu muss zusätzlich der so genannte MIME Type der Stylesheet-Sprache (type=“text/css“) angegeben werden. Die Angabe ist ab HTML5 nicht mehr nötig, weil hier CSS als Standardwert genommen wird. Danach folgen der Selektor (p) und die konkreten Style-Anweisungen (font-size: 120%). Auch das interne Style Sheet ist für größere Projekte nicht zu empfehlen.
  • Externes Style Sheet: Die Angaben zu Styles werden in separaten CSS-Dateien abgelegt. Aus dem HTML-Dokument wird dann auf die CSS-Datei verwiesen, d. h. sie wird über <link> eingebunden. Das link-Attribut wird im head-Bereich platziert, zum Beispiel: <link rel=“stylesheet“ type=“text/css“ href=“style.css“>.

Die CSS-Datei heißt in diesem Fall style.css und enthält dann alle relevanten Style-Angaben (Listing 2). Ein weiterer Vorteil: Man kann die Styles über mehrere HTML-Dokumente verwenden.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>My Website</title>
  <style type="text/css">
    p 
    {
      font-size: 120%}
  </style>
</head>
<body>
  <h1>Herzlich Willkommen </h1>
  <p>Zum zweiten Teil der neuen Serie zur Webprogrammierung</p>
  <P> Es geht um die folgenden Themen
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript</li>
    </ul>
  </P>
</body>
</html>
h1 {
  color: white;
  background: #add8e6;
  padding: 2px;
  text-align: center;
  }

Konkurrieren mehrere Style-Anweisungen untereinander, wird zum Beispiel die Schriftgröße für alle Überschriften zentral in der Datei style.css festgelegt und zusätzlich gibt es noch eine Inline-Style-Anweisung in einem konkreten h1-Tag, stellt sich die Frage, welche Regel gilt. Das ist einfach: Die konkretere Style-Anweisung wird bevorzugt berücksichtigt, also: Inline-Style vor internem und externem Style Sheet. Werden mehrere CSS-Dateien über den link-Tag eingebunden und ergeben sich daraus konkurrierende Anweisungen, überschreibt das später eingebundene Style Sheet die Angabe des vorher eingebundenen.

Selektoren

Ein Selektor dient dazu, die CSS-Eigenschaften zu bestimmten HTML-Elementen zuzuweisen. Der Aufbau sieht wie folgt aus:

Selektor {
CSSEigenschaft1: Wert1;
CSSEigenschaft2: Wert2;
…
}

Oder konkret (Beispiel):

h1 {
  color: white;
  background: #add8e6;
  padding: 2px;
  text-align: center;
  }

Das ist die einfachste Version eines Selektors. Im Beispiel werden Elemente vom Typ h1 ausgewählt. CSS bietet eine Reihe von unterschiedlichen Selektoren, die wir nun etwas genauer betrachten. Man unterscheidet zwei Arten von Selektoren:

  • Einfache Selektoren wählen die Elemente direkt über ein bestimmtes Merkmal aus, zum Beispiel der Typ– oder der ID-Selektor
  • Kombinatoren: Hier werden zwei Selektoren miteinander kombiniert, zum Beispiel über eine Bedingung untereinander verbunden.

Die wichtigsten Selektoren sehen wir uns jetzt kurz an. Beginnen wir mit dem Typselektor. Die Elemente werden über den Typnamen, zum Beispiel h1, footer, p usw. ausgewählt. Der Typselektor wählt alle Elemente des angesprochenen Typs aus, gleichgültig, an welcher Stelle sie im betreffenden Dokument stehen. Definieren wir beispielsweise den CSS-Style für Überschriften der ersten Ordnung (h1) wie oben gezeigt, dann gilt diese Festlegung (weiße Schrift, zentriert usw.) für alle Überschriften, in denen die betreffende CSS-Datei als Style referenziert wird.

JavaScript Days 2019

JavaScript Testing in der Praxis (Teil 1 + 2)

mit Dominik Ehrenberg (Crosscan) und Sebastian Springer (MaibornWolff)

Fortgeschrittene schwarze Magie in TypeScript

mit Peter Kröner (‚Webtechnologie-Erklärbär‘)

Weitere wichtige Selektoren sind die Auswahl über eine Klasse bzw. über eine ID. Wollen Sie beispielsweise nicht alle Absätze (p) eines Dokuments mit Hilfe der gleichen Style-Anweisung formatieren, müssen Sie zwischen verschiedenen Verwendungen dieses Tags unterscheiden. Hierzu können Sie Klassen definieren. Das kann wie folgt aussehen:

<p class=“Definition“> Hier kommt der Text</p>

Innerhalb der CSS-Datei können Sie dann die Style-Anweisungen wie folgt festlegen:

p.Definition
{
  color:red;
}

Auf diese Weise können Sie viel spezifischer vorgehen. Es ist sogar möglich, dass Sie in der CSS-Datei auf die Angabe des Typs verzichten, d. h. statt

p.Definition
{
  color:red;
}

schreiben Sie einfach

.Definition
{
   color:red;
}

In diesem Fall bezieht sich die Style-Anweisung zur Festlegung der Farbe auf alle HTML-Elemente, die den Klassennamen class=“Definition“ haben, egal ob es sich um ein <p>– oder um ein <h1>-Element handelt. Man kann Klassen auch miteinander kombinieren, zum Beispiel:

<p class=“Mengentext Definition“> Hier kommt der Text</p>

Sofern Style-Festlegungen für die Klassen Mengentext und Definition existieren, werden diese in diesem Beispiel beide gleichzeitig angewendet. Betrachten wir folgende Style-Anweisungen:

p.Hinweise
{
  font-familiy: Verdana
}
.Definition
{
  font-style: italic;
}

Für alle Absätze (p) mit dem Klassennamen class=“Hinweis“ wird die Schriftart Verdana festgelegt. Klassen mit dem Namen Definition – gleichgültig für welches Tag – werden kursiv formatiert. Im HTML-Text <p class=““Mengentext“>Hier kommt der Text</p> werden beide Styles gleichzeitig angewandt.

Noch spezifischer kann ein Element über den ID-Selektor ausgewählt werden. Über das allgemeine id-Attribut können Sie jedes HTML-Element adressieren, dazu müssen Sie einen eindeutigen Namen vergeben, zum Beispiel <p id=“Mengentext“>Hier kommt der Text</p>. Der betreffende Textabschnitt ist jetzt über id=“Mengentext“ gekennzeichnet. Einen zugehörigen Style definieren Sie dann wie folgt:

p#Mengentext
{
    font-familiy: Verdana
}

Eine ID muss innerhalb des Dokuments eindeutig sein! Daher können Sie den Style auch noch einfacher wie folgt definieren:

#Mengentext
{
  font-familiy: Verdana
}

Sie können also den Typselektor davor weglassen. Im Übrigen wird bei Selektoren nicht zwischen Groß- und Kleinschreibung unterschieden. Ein weiterer einfacher Selektor ist der Universalselektor (*). Mit diesen Selektoren können Sie alle Elemente auf einmal auswählen – zum Beispiel:

* {
  font-familiy: Verdana
}

Für alle Elemente im Dokument wird die Schriftart Verdana festgelegt. Das festgelegte Styling wird dann auf alle Elemente unterhalb von main angewandt, wenn Sie den Universalselektor in Kombination verwenden, zum Beispiel folgendermaßen:

main * {
  font-familiy: Verdana
}

Mit diesen Selektoren können Sie schon einen Großteil der Elemente innerhalb eines Dokuments erreichen.

Weitere einfache Selektoren sind die sogenannten Attributsselektoren. Mit deren Hilfe kann man Elemente innerhalb eines Dokuments auswählen, die bestimmte Teilwerte innerhalb des betreffenden Attributs aufweisen. Der Selektor [title] wählt zum Beispiel alle Elemente eines Dokuments, die das Attribut title enthalten. Das können Sie weiter einschränken, zum Beispiel mittels p [title]. Es schränkt die Auswahl auf Elemente vom Typ p ein, die ein Attribut title verwenden. Ergänzend kann man sogar noch angeben, dass der Wert von title einen bestimmten Teilwert enthalten soll.

Interessanter und häufiger im Einsatz sind Selektoren für so genannte Pseudoklassen. Das betrifft Elemente, die Sie nicht direkt adressieren können, beispielsweise Elemente, über denen sich gerade der Mauszeiger befindet (a:link {color: blue}) oder Hyperlinks, die schon besucht wurden (a:visited {color: blue}). CSS kennt die folgenden Pseudoklassen:

  • :link: Pseudoklasse für noch nicht besuchte Hyperlinks
  • :visited: Pseudoklasse für schon besuchte Hyperlinks
  • :hover: Pseudoklasse für Elemente, über denen sich der Mauszeiger befindet
  • :active: Pseudoklasse für Elemente, die aktuell angeklickt werden
  • :focus: Pseudoklasse für Elemente, die den Fokus erhalten
  • :target: Pseudoklasse für Elemente, die als Elemente einen Verweis (etwa einen Downloadlink) haben.

Ab CSS3 gibt es Struktur-Pseudoklassen, um Elemente anhand ihrer Position in einem HTML-Dokument auszuwählen. Dabei handelt es sich um die folgenden:

  • :root: wählt die Wurzel eines Dokuments aus. Damit wird das gesamte Dokument ausgewählt.
  • :empty: Auswahl von leeren Elementen. Beispielsweise kann man über p:empty alle Absätze adressieren, die keinen Inhalt aufweisen. Damit könnte man beispielsweise diese Absätze mit einer bestimmten Hintergrundfarbe formatieren, also zum Beispiel: p:empty {background-color: grey}

Ebenso gibt es Selektoren, die das erste (:first-child), das letzte (:last-child) oder ein bestimmtes (:nth-last-child) der Elemente eines Elternelements auswählt. Man kann sogar noch genauer werden und das erste, letzte oder ein bestimmtes Element eines Typs auswählen (:first-of-type, :last-of-type, nth-of-type). Mit deren Hilfe kann man beispielsweise immer das erste Element in einem Absatz (p) auswählen, das als Artikel (article) definiert wurde.

Statt hier noch weiterer Spezialselektoren vorzustellen, möchten wir lieber noch auf die Möglichkeit eingehen, Selektoren miteinander zu verketten (Kombinatoren). Das Prinzip lautet wie folgt: Der erste Selektor (E) ist die Bedingung und der zweite (F) ist das Ziel. Diese Kombinatoren haben in der Praxis eine größere Bedeutung. Hier gibt es die folgenden Optionen:

  • Nachfahrenselektor (E F): Das Element vom Typ F wird nur selektiert, wenn es ein Nachfahre eines Elements vom Typ E
  • Kindselektor (E > F): Das Element vom Typ F wird nur selektiert, wenn es ein direkter Nachfahre (Kind, kein Enkelkind!) eines Elements vom Typ E
  • Nachbarselektor (E + F): Es muss sich um unmittelbare Nachbarn auf gleicher Ebene handeln.
  • Geschwisterselektor (E ~ F): Die Elemente müssen auf derselben Ebene liegen, jedoch nicht direkt aufeinander folgen.

Zum besseren Verständnis stellt Abbildung 2 die Struktur eines beliebigen HTML-Dokuments dar (linker Teil der Abbildung). Darauf folgen die unterschiedlichen Arten der Kombinatoren, die stets eine Kombination der Selektoren aus den Elementen <main/> und <p/> darstellen.

Abb. 2: Die Wirkung der Kombinatoren bei der Auswahl von HTML-Elementen

Abb. 2: Die Wirkung der Kombinatoren bei der Auswahl von HTML-Elementen

Vererbung

CSS beherrscht die Vererbung! Erst diese wichtige Eigenschaft von CSS macht es möglich, dass man Style-Elemente, also Farben, Schriftgrößen usw., an einer zentralen Stelle für das gesamte Webprojekt und nur einmalig definieren muss. Die Vererbung der Style-Angaben setzt direkt auf der Struktur eines HTML-Dokuments auf. Definiert man einen Style für das body-Element, gelten die dort getroffenen Festlegungen für alle Elemente, die sich innerhalb des body-Tags befinden. Mit Selektoren für in der Hierarchie tiefer platzierter Elemente können Sie die Festlegungen zum Style gewissermaßen überschreiben. Auf diese Weise können Sie übergeordnete Style-Eigenschaften wie eine zentrale Schriftart auf oberster Ebene festlegen. Alle nachfolgenden Inhalte der Webseite übernehmen dann diese Schriftart. Ist es im Einzelfall notwendig, können Sie für bestimmte Elemente einzeln oder in der Gruppe diese zentrale Schriftart überschreiben. Ein simples Beispiel:

body{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: red;
}

p{
    color: black;
}

Wir definieren auf Ebene des body-Tags die Schriftart und die Farbe des Dokuments. Für Elemente von p (innerhalb von body) gelten auch die Festlegungen zur Schriftart, aber der Wert für die Farbe (color) wird von Rot auf Schwarz geändert (überschrieben).

Wird kein Wert für eine CSS-Eigenschaft festgelegt, wird durch den Browser der Standardwert verwendet und vererbt, allerdings werden nicht alle CSS-Eigenschaften vererbt. Bei einer Farbdefinition (außer dem Hintergrund) oder einer Festlegung der Schriftart ist die Vererbung sinnvoll. Bei CSS-Eigenschaften zu den Rändern oder Größenangaben, zum Beispiel width oder border, wird standardmäßig keine Vererbung durchgeführt. Im Zweifelsfall müssen Sie nachsehen, ob sich eine CSS-Eigenschaft vererbt. Mit inherit können Sie das Vererben erzwingen und via initial eine durch Vererbung veränderte Eigenschaft wieder auf den Standardwert zurücksetzen.

Im Zusammenhang mit der Vererbung von CSS-Eigenschaften muss man auch über Kaskaden reden. Damit ist gemeint, dass ein HTML-Dokument nicht nur von einem Style Sheet, sondern von mehreren Style Sheets beeinflusst werden kann. Auf diese Weise können Style Sheets aufeinander aufbauen. Idealerweise ergänzen sich die Angaben und jede Definition erfolgt auf oberster Ebene nur genau einmal. Jedoch kann es auch zu Widersprüchen kommen, die aufgelöst werden müssen. Ein Style Sheet wird mit folgender Priorität – je nach seiner Quelle – angewandt:

  • Niedrigste Priorität – Browser-Style-Sheet: Das Style Sheet stellt die Grundformatierung dar, die der Browser definiert. Jeder Browser stellt das Dokument etwas anders dar.
  • Mittlere Priorität – Benutzer-Style-Sheet: Nutzer können bei einigen Browsern eigene Style Sheets definieren.
  • Höchste Priorität – Autoren-Style-Sheet: Hier handelt es sich um die Angaben, die sie als Designer für die Webseite festlegen.

Mit dem Zusatz !important können Sie die Priorität eines Style Sheets erhöhen:

p{
  color: black !important;
}

Unter Einzug dieses Zusatzes gilt dann folgende Reihenfolge bei der Auswertung:

  1. Benutzer-Style-Sheet mit !important
  2. Autoren-Style-Sheet mit !important
  3. Autoren-Style-Sheet
  4. Benutzer-Style-Sheet
  5. Browser-Style-Sheet

Das Benutzer-Style-Sheet mit !important rückt nun ganz nach oben in der Prioritätenliste, damit man beispielsweise ein spezielles Style-Sheet für Personen mit einer Sehbehinderung definieren kann und dieses auch bevorzugt angewandt wird.

Adressieren mehrere Selektoren ein HTML-Element, gibt es auch hier eine Gewichtung. Konkret berechnet man dazu die Spezifizität eines Selektors. Dabei gilt grundsätzlich folgende Reihenfolge der Gewichtung: Style-Attribute, ID-Attribute, Klasse, Pseudoklasse und Elemente. Bei einer konkurrierenden Angabe zum Style muss man also genau prüfen, welche Style-Angabe letztendlich zum Zug kommt. Besser: Entwerfen Sie möglichst ein durchgängiges Style Sheet mit wenigen Widersprüchen!

Boxing

Als Grundlage für das Layout mit CSS dient das Box-Modell. Dieses Modell gibt es in einer klassischen Variante und einer Version für CSS3. Boxen fassen ausgewählte Inhalte des Dokuments zusammen und können dann später als Ausgangspunkt für das Layout dienen, d. h. sie werden platziert. Das Element article kann zum Beispiel als Box aufgefasst werden. Zu einer Box gehören die folgenden Elemente:

  • Der Inhaltsbereich (Text, Bilder) mit einer Breiten- (width) und Höhenangabe (height)
  • Der Innenabstand (padding)
  • Der Rahmen (border)
  • Der Außenabstand (margin)

Damit ist das Box-Modell auch schon ausreichend beschrieben. Ein einfaches Beispiel zeigen Listing 3 und Abbildung 3, darin werden die eben genannten Eigenschaften für eine Box definiert.

Abb. 3: Boxen in CSS – hier am Beispiel der Formatierung eines Artikels

Abb. 3: Boxen in CSS – hier am Beispiel der Formatierung eines Artikels

#article01{
  width: 500px;
  background-color: antiquewhite;
}
#article02{
  margin-top: 30px;
  width: 600px;
  background-color:aquamarine;
}

!DOCTYPE html>
  <head>
    …
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    
    <article id="article01">
      Lorem ipsum …
    </article>
    <article id="article02">
      Lorem ipsum …
    </article>
  </body>
</html>

Bei der Anwendung des Box-Modells ist es immer wieder schwierig, mehrere Boxen auf einer Seite in der gleichen Größe – oder besser gesagt Breite (width) – zu platzieren. Die Gesamtbreite einer Box setzt sich aus den Bestandteilen width, padding-left, padding-right, border-left, border-right, maring-left und margin-right zusammen. Jetzt könnte man einwenden, dass man die Größenangaben nur addieren muss, und schon hat man die Gesamtbreite. Das ist grundsätzlich richtig. Komplizierter wird es jedoch, wenn man nicht bei allen Werten absolute Angaben (etwa 10 Pixel), sondern auch relative Angaben (10 %) zum Einsatz kommen bzw. beide Varianten miteinander vermischt werden. Besser kann man dieses Problem mit dem Box-Modell, das ab CSS3 verfügbar ist, lösen. Bei diesem Modell wird mit border-box die gesamte Breite und Höhe der Box definiert. Bei der Verwendung von box-sizing definieren Sie eine Box, wie in Listing 4 zu sehen. Es werden unterschiedliche Angaben zu padding und border definiert; aber gleiche Werte zur Eigenschaft width. Beide Boxen sind im Ergebnis dennoch von gleicher Breite (Abb. 4).

Abb. 4: Eine Box mit „box-sizing: border-box“

Abb. 4: Eine Box mit „box-sizing: border-box“

#article01{
  box-sizing: border-box;
  width: 60%;
  padding: 5px;
  border: 4px solid black;
  background-color: antiquewhite;

}
#article02{
  margin-top: 30px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid black;
  width: 60%;
  background-color:aquamarine;
}

Das Boxing-Modell ist Voraussetzung für die Gestaltung des Layouts einer Webseite. Dieses Thema gehen wir jetzt an.

Positionierung und Layout

In diesem Abschnitt geht es um die Positionierung von HTML-Elementen und die grundlegende Vorgehensweise beim Layout. Diese Aufgaben sollen auch mit CSS erledigt werden. Beginnen wir mit der Positionierung. Für die Position eines Elements ist die CSS-Eigenschaft position zuständig. Hier hat man die folgenden Optionen:

  • static ist die Standardeinstellung, daher können wir die Angabe auch weglassen
  • relative: Hier wird das Element von der aktuellen Position verschoben. Alle anderen Elemente sind davon nicht in ihrer Position betroffen, d. h. sie ordnen sich so an, als ob das Element noch an der ursprünglichen Position wäre.
  • absolute: Das Element wird aus dem Fluss herausgezogen und an der neuen Position angeordnet. Die anderen Elemente reagieren jetzt bei der Ausrichtung ihrer eigenen Position so, als ob das neu positionierte Element nicht vorhanden wäre, d. h. die Lücke wird aufgefüllt.
  • fixed: Die Wirkung ist ähnlich wie die von absolute. Der Unterschied besteht darin, dass das betreffende Element starr an einer bestimmten Position des Fensters ausgerichtet wird.

Bei der relativen und absoluten Positionierung kann es sein, dass die betreffenden Elemente sich gegenseitig überlappen. Dabei gilt: Das zuletzt eingefügte Element liegt oben. Um das zu ändern, gibt es die CSS-Eigenschaft z-index. Je größer dieser Wert ist, desto weiter oben liegen die Elemente. Auch das möchten wir an einem kleinen Beispiel zeigen. Listing 5 zeigt den Code zunächst ohne und dann mit der z-index-Eigenschaft. Die Wirkung sehen Sie in Abbildung 5.

#article01{
  box-sizing: border-box;
  position: relative;
  width: 60%;
  padding: 5px;
  border: 4px solid black;
  background-color: antiquewhite;

}
#article02{
  position: relative;
  top: -30px;
  left: 50px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid black;
  width: 60%;
  background-color:aquamarine;
}

#article01{
  box-sizing: border-box;
  position: relative;
  width: 60%;
  padding: 5px;
  border: 4px solid black;
  background-color: antiquewhite;
  z-index: 2;

}
#article02{
  position: relative;
  top: -30px;
  left: 50px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid black;
  width: 60%;
  background-color:aquamarine;
  z-index: 1;
}
Abb. 5: Die Wirkung von „z-Index“

Abb. 5: Die Wirkung von „z-Index“

Eine weitere wichtige CSS-Eigenschaft ist float. Mit deren Hilfe können Sie ein Element aus dem Dokumentenfluss herausnehmen und am Rand (links oder rechts) platzieren. Eine typische Anwendung ist das Anordnen eines Bilds (image) und Text, der das Bild umfließt.

Ab CSS3 ist beim Thema Positionierung das Flexbox-Modell hinzugekommen – ein neues Feature, das, wie alle anderen CSS3-Features, erst nach und nach durch die aktuellen Browser unterstützt wird. Konkret für das Flexbox-Modell stellt sich der Browsersupport dar (Abb. 6).

Abb. 6: Browserunterstützung für das Flexbox-Modell [3]

Abb. 6: Browserunterstützung für das Flexbox-Modell

Der Internet Explorer kann das Flexbox-Modell erst ab Version 10 mit dem Präfix ms darstellen, und für einige ältere Android- und Safari-Browser ist das Präfix webkit-flex erforderlich. Für die Zukunft ist davon auszugehen, dass die Unterstützung ohne Zusätze erfolgt. Um das Flexbox-Modell anzuwenden, muss man ein HTML-Element als Container definieren. Das geschieht über die CSS-Eigenschaft display: flex. Innerhalb dieses Containers werden dann die Elemente nach den Vorgaben ausgerichtet. Die Ausrichtung kann entweder horizontal (Zeile: row) oder vertikal (Spalte: column) erfolgen. Dazu muss man die CSS-Eigenschaft flex-direction verwenden. Wir sehen uns das an einem Beispiel an. Listing 6 zeigt ein Flexbox-Modell einmal in horizontaler und einmal in vertikaler Ausrichtung. Das Ergebnis sehen Sie in Abbildung 7.

article{
  width: 300px;
  padding: 10px;
  margin: 5px;
  border: 1px solid black;
  background-color: bisque;
}

main{
  width: 90%;
  padding: 10px;
  display: flex;
  flex-direction: row;
}

article{
  width: 300px;
  padding: 10px;
  margin: 5px;
  border: 1px solid black;
  background-color: bisque;
}

main{
  width: 90%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
Abb. 7: Die Wirkung des Flexbox-Modells

Abb. 7: Die Wirkung des Flexbox-Modells

Wie starr oder eben wie flexibel ein einzelnes Element innerhalb des Flexbox-Modells reagiert, wird über die Eigenschaft flex für jedes Element eingestellt. Diese Eigenschaft umfasst drei Optionen: flex: flex-grow, flex-shrink, flex-basis. flex-grow gibt die Flexibilität des betreffenden Elements bei Vergrößerung gegenüber den anderen Elementen an. flex-shrink gibt die Flexibilität bei Verkleinerung gegenüber den anderen Elementen an. Die Basisbreite wird mit flex-basis angegeben.

SaSS

Sie haben jetzt einen kompakten Überblick über die Möglichkeiten von CSS, insbesondere die neueren Features der Version 3 (Flexbox-Modell). CSS ist damit schon funktional sehr umfassend und flexibel. Dennoch ist noch nicht das Ende der Möglichkeiten erreicht. Noch mehr Optionen beim Styling erhält man, wenn man statt Syntactically awesome Style Sheets (SaSS) statt CSS einsetzt. Hierbei handelt es sich um eine Style-Sheet-Sprache, die u. a. mit Variablen, Schleifen und anderen Funktionen die Erstellung von CSS vereinfacht und die Pflege großer Style Sheets erleichtert. Wenn wir in einem späteren Artikel dieser Serie mithilfe von Frameworks arbeiten, dann können wir i. d. R. das Dokumentenformat für das Styling aussuchen. Die Dateiendung lautet scss. Aus diesen Dateien werden dann normale CSS-Dateien generiert. Man kann in SaSS bspw. Variablen definieren (Listing 7), die wie in jeder anderen Programmiersprache funktionieren.

$default_blue = #414df0;
$default_margin = 20px;

.box {
    background-color: $default_blue;
    border: 1px solid $default_blue;
    margin-top: $default_margin;
    margin-bottom: $default_margin / 2;
}

Ein $-Zeichen dient als Indikator für eine Variable. Mit den zugeordneten Werten können sogar Operationen durchgeführt werden. Anstatt überall im CSS die gleichen Werte zu schreiben, kann man nun eine Variable definieren und mehrmals einsetzen. Ein weiterer Vorteil von SaSS gegenüber CSS ist das so genannte Nesting, das deutliche Vereinfachungen beim Einsatz von Selektoren zur Auswahl von HTML-Elementen mit sich bringt. In „normalem“ CSS müssen Sie notieren:

p
{
 /* Code */
}
p.Definition
{
/* Code */
}

Das geht mit SaSS einfacher:

p
{
 /* Code */

  .Definition
    {
      /* Code */
   }
}

Klar, bei wenigen Styles scheint das keine große Verbesserung zu sein. Stellen Sie sich jedoch vor, dass Sie Styles über viele Hierarchien definieren müssen, dann ist der Effekt beachtlich. SaSS hat zudem Mixins für Vereinfachung von sich wiederholendem Code und Funktionen. Eine Dokumentation von SaSS finden Sie hier.

Fazit und Ausblick

Die Möglichkeiten, die dem Webentwickler und -designer mit CSS3 heute zur Verfügung stehen, sind schon enorm. Allein mit HTML5 und CSS3 können Sie umfassende Webauftritte gestalten. Auch im Hinblick auf unser Ziel, moderne Webanwendungen zu erstellen, denken Sie bitte immer an Folgendes: HTML dient dazu, die Struktur des Inhalts vorzugeben. Verwenden Sie dazu eine möglichst aussagekräftige Art der Beschreibung. Unterlassen Sie in HTML jedoch alles, was mit dem Styling der Webseite zu tun hat. Das ist in CSS zu erledigen. Die Styles werden an zentraler Stelle möglichst aufbauend aufeinander definiert und über den link-Tag eingebunden. Andere Style-Festlegungen sollten Sie weitgehend vermeiden.

Inhalt, Struktur und Design einer Webanwendung können Sie nun schon erstellen. Und die Funktionalität? Dazu kommen wir in der kommenden Ausgabe. Wir werden uns mit JavaScript beschäftigen. Ebenso wird es um TypeScript gehen, da es in vielen modernen Webanwendungen als Ersatz für JavaScript verwendet wird.

Weiterführende Informationen zu CSS gibt es auf der Webseite von Mozilla, und die Autoren möchten allen Lesern wärmstens Jürgen Wolfs Buch „HTML5 und CSS3“ [1] als Lektüre empfehlen.

Links & Literaturs

[1] Wolf, Jürgen: HTML5 und CSS3. 2. Auflage, Rheinwerk Verlag, Bonn, 2016

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -