Tag Vier

CSS Box Sizing

Standardmäßig wird die Breite und Höhe eines Elements wie folgt berechnet:

• width + padding + border = tatsächliche Breite eines Elements

• Höhe + padding + border = tatsächliche Höhe eines Elements

Dies bedeutet: Wenn die Breite/Höhe eines Elements festgelegt wird, erscheint das Element oft größer, als es per Breite/Höhe festgelegt wurde, da der Rahmen und das Padding des Elements zur angegebenen Breite/Höhe des Elements hinzugefügt werden.

Dieses oft "unlogische" Verhalten lässt sich einfach ändern.

            div.container {
  box-sizing: border-box;
}
        

Die CSS-Eigenschaft box-sizing ermöglicht es uns, Padding und Border in die Gesamtbreite und -höhe eines Elements einzubeziehen.

CSS extern einbinden

Bis jetzt haben wir CSS jeweils direkt in unser .html Dokument geschrieben. Das war zu Beginn zwecks Übersicht lernreich, ist jedoch nicht üblich. Normalerweise lagert man alle Stylings in eine eigene Datei mit der Endung .css aus. Das hat zum Vorteil, die Datei in mehreren .html Seiten zu verwenden und damit einer ganzen Website das gleiche Aussehen zu verpassen. Zudem gewährleistet es uns bei komplexeren Projekten eine bessere Übersicht.

Um CSS auf einer HTML-Seite einzubinden, muss der Verweis auf die externe Stylesheet-Datei innerhalb des <link>-Elements im Head-Abschnitt passieren.

Es können mehrere CSS Dateien eingebunden werden. Um es uns einfach zu machen, werden wir zukünftig das CSS Reset auslagern und gemeinsam nutzen:

Responsive Webdesign mit Media Queries

Digitale Inhalte werden heutzutage auf unterschiedlichsten Geräten mit unendlich vielen unterschiedlichen Bildschirmauflösungen konsumiert. Für die Webentwicklung bedingt das Lösungen für unterschiedliche Darstellungen der Inhalte, adaptiert auf die jeweilige Bildschirmgrösse. Die sogenannte Viewport Width ist deshalb ausschlaggebend für die Definition jeglicher Grössen und Dimensionen und jedes HTML Element verhält sich im Optimalfall entsprechend relativ zu seinem Elternelement und der aktuellen Bildschirmgrösse – es reagiert mit dem Layout. Dieses Verhalten nennt man Responsive Webdesign.

Ein einfaches Beispiel für ein responsive Verhalten ist die CSS Property max-width, welche einem Element keine fixe Weite sondern eine maximale Weite definiert. Im Falle eines Div Containers mit der Klasse ".container" führt dies dazu, dass das Block Element DIV (welches per default als Block Element 100% Breite besitzt) nur noch die definierte maximale Grösse erreichen kann.

            .container {
	max-width: 800px;
}
        

In der Webentwicklung gibt es Technologien, welche uns eine maximale flexible Anpassungsfähigkeit von Elementen ermöglichen. In allen anderen Fällen können wir abhängig von der jeweiligen Viewport Width andere CSS Grössen beschreiben.

Dazu verwenden wir CSS Media Queries.

            h1 {
  font-size: 40px;
}

@media (min-width: 640px) {
  h1 {
	font-size: 25px;
  }
}
        

Challenge #2

Du bist nun bereits im Stande eine Website zu entwicklen, die auf Desktop und Mobile korrekt dargestellt wird. Zeit für eine weitere Challenge!